/* Inside Hualien: "Marble and tide".
   The east coast in daylight: marble-white paper with faint grey veins (Taroko's marble), deep
   Pacific ink, the turquoise of the Liwu River, cliff slate, and one warm accent, the coral of
   Taiwan's first sunrise. Layered ridges and tide lines instead of a city grid. Serif headings
   (Newsreader), a plain sans for reading (Instrument Sans), DM Mono for labels.
   Mobile first, 44px touch targets, nothing said by color alone. */
:root{
  /* Pacific */
  --ink:#0B2A3A;
  --ink-2:#0F3647;
  --ink-3:#18475C;
  /* marble */
  --paper:#F4F2EC;
  --paper-2:#E9E6DE;
  --line:#D6D2C8;
  --text:#1A2328;
  --muted:#56636A;
  --white:#FFFFFF;

  /* river, cliff, field, sunrise */
  --jade:#2BB3B1;
  --jade-soft:#8FDCD6;
  --jade-deep:#0F6E70;
  --slate:#5E6B73;
  --rice:#7FA45A;
  --coral:#F0785A;
  --coral-soft:#F7B39E;
  --coral-deep:#B04526;
  --sand:#E8D3A8;

  --font-display:'Newsreader',Georgia,'Times New Roman',serif;
  --font-body:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'DM Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  --maxw:1160px;
  --r:12px;

  /* marble veins: thin grey strokes that wander and split */
  --veins:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='560' viewBox='0 0 720 560' fill='none' stroke-linecap='round'%3E%3Cg stroke='%23F4F2EC'%3E%3Cpath d='M-20 80C90 60 140 140 230 120S380 30 470 70 640 180 740 150' stroke-width='2.2'/%3E%3Cpath d='M230 120C260 190 220 260 300 300S420 360 400 450 470 560 500 600' stroke-width='1.4'/%3E%3Cpath d='M-20 330C60 300 120 350 180 330S260 260 300 300' stroke-width='1.2'/%3E%3Cpath d='M470 70C500 140 580 160 600 240S560 380 640 420 720 470 760 460' stroke-width='1.8'/%3E%3Cpath d='M400 450C340 470 300 520 240 540' stroke-width='1'/%3E%3Cpath d='M600 240C640 250 680 230 740 250' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
  /* layered ridges over the sea (home hero, panels) */
  --ridges:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='420' viewBox='0 0 1200 420' preserveAspectRatio='none'%3E%3Cpath d='M0 260L120 170 230 220 360 110 470 190 600 80 720 170 840 120 960 200 1080 140 1200 190V420H0Z' fill='%2318475C' fill-opacity='.55'/%3E%3Cpath d='M0 310L150 230 260 270 400 190 540 260 660 200 800 260 930 210 1060 270 1200 230V420H0Z' fill='%230F3647' fill-opacity='.8'/%3E%3Cpath d='M0 360C100 345 200 375 300 360S500 345 600 360 800 375 900 360 1100 345 1200 360V420H0Z' fill='%232BB3B1' fill-opacity='.35'/%3E%3Cpath d='M0 385C100 372 200 398 300 385S500 372 600 385 800 398 900 385 1100 372 1200 385' stroke='%23F4F2EC' stroke-opacity='.5' stroke-width='2' fill='none'/%3E%3C/svg%3E");
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);color:var(--text);background:var(--paper);line-height:1.65;font-size:1.0625rem;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
@media(min-width:700px){.wrap{padding:0 32px}}
a{color:inherit}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--paper);color:var(--ink);padding:12px 16px;border-radius:8px;font-weight:700}
.skip:focus{left:12px}
.nobr{white-space:nowrap}

.eyebrow{font-family:var(--font-mono);font-size:.74rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--coral-deep)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.1;letter-spacing:-.01em;text-wrap:balance}

/* ---------- header: the coast road ---------- */
header.site{background:var(--ink);color:var(--paper);position:sticky;top:0;z-index:30;border-bottom:4px solid transparent;border-image:linear-gradient(90deg,var(--slate) 0 25%,var(--jade) 0 50%,var(--rice) 0 75%,var(--coral) 0) 1}
.nav{display:flex;align-items:center;gap:28px;min-height:72px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;flex:none}
.brand .mark{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--paper);color:var(--ink);font-family:"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;font-weight:800;font-size:1.1rem;line-height:1;box-shadow:inset 0 -6px 0 var(--jade)}
.brand .words{display:flex;flex-direction:column;line-height:1}
.brand .name{font-family:var(--font-display);font-weight:600;font-size:1.5rem;letter-spacing:-.01em}
.brand .tag{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(244,242,236,.62);margin-top:5px}
.nav nav{flex:1;min-width:0}
.nav ul{display:flex;gap:6px 22px;list-style:none;justify-content:flex-end}
.nav ul a{display:inline-block;padding:12px 0;text-decoration:none;font-weight:600;font-size:.95rem;color:rgba(244,242,236,.88);white-space:nowrap;position:relative}
.nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--jade);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.nav ul a:hover,.nav ul a:focus-visible{color:var(--white)}
.nav ul a:hover::after,.nav ul a:focus-visible::after,.nav ul a[aria-current="page"]::after{transform:scaleX(1)}
.nav ul a[aria-current="page"]{color:var(--white)}
.picks-link{color:var(--coral-soft)!important}
.nav ul.langs{flex:none}
/* header: logo and language links on top, the nav on its own row below, at every width (one row
   never fits once the language links are in) */
@media(min-width:0px){
  .nav{flex-wrap:wrap;gap:0;padding-top:10px}
  .nav nav{flex-basis:100%;-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent)}
  .nav ul{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;gap:22px;padding-right:40px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .nav ul::-webkit-scrollbar{display:none}
}
@media(max-width:700px){header.site{position:static}}

/* ---------- hero: deep water, marble veins ---------- */
.hero{position:relative;overflow:hidden;background:var(--ink);color:var(--paper);isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(55% 70% at 95% 0%,rgba(240,120,90,.28),transparent 60%),
  radial-gradient(50% 60% at 0% 100%,rgba(43,179,177,.30),transparent 65%),
  linear-gradient(180deg,var(--ink) 0%,var(--ink-2) 100%)}
.hero::after{content:"";position:absolute;z-index:-1;right:-140px;top:-40px;width:720px;height:560px;background:var(--veins) no-repeat;opacity:.16}
.hero .inner{max-width:var(--maxw);margin:0 auto;padding:64px 20px 72px}
@media(min-width:700px){.hero .inner{padding:84px 32px 92px}}
.hero .eyebrow{color:var(--coral-soft)}
.hero h1{font-size:clamp(2.3rem,6vw,4rem);margin-top:14px;max-width:18ch}
.hero h1 em{font-style:italic;color:var(--jade-soft)}
.hero .lede{font-size:clamp(1.05rem,2vw,1.22rem);max-width:52ch;margin-top:18px;color:rgba(244,242,236,.88)}
.pagehero h1{font-size:clamp(2.1rem,5vw,3.4rem)}
.hero.has-photo{background-image:linear-gradient(90deg,rgba(11,42,58,.95) 0%,rgba(11,42,58,.84) 42%,rgba(11,42,58,.38) 78%,rgba(11,42,58,.22) 100%),var(--hero);background-size:cover;background-position:center}
.hero.has-photo::before{opacity:.5}
.hero.has-photo::after{opacity:.08}
@media(max-width:700px){
  .hero::after{width:480px;height:374px;background-size:480px 374px;right:-180px;top:-20px;opacity:.12}
  .hero.has-photo{background-image:linear-gradient(180deg,rgba(11,42,58,.55) 0%,rgba(11,42,58,.80) 55%,rgba(11,42,58,.94) 100%),var(--hero-sm)}
  .hero.has-photo::after{opacity:.06}
  .hero.has-photo::before{opacity:.3}
}
.cta-row{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;margin-top:30px}
.btn{display:inline-flex;align-items:center;min-height:48px;padding:12px 24px;border-radius:999px;background:var(--coral-deep);color:var(--white);text-decoration:none;font-weight:700;border:0;font-family:var(--font-body);font-size:1rem;cursor:pointer;transition:background .2s,transform .2s}
.btn:hover,.btn:focus-visible{background:#8F361C;transform:translateY(-2px)}
.textlink{display:inline-flex;align-items:center;min-height:44px;color:var(--paper);font-weight:600;text-decoration:underline;text-decoration-color:var(--jade);text-decoration-thickness:2px;text-underline-offset:6px}
.textlink:hover{color:var(--jade-soft)}

/* ---------- sections ---------- */
section{padding:64px 0}
.sec-head{margin-bottom:28px}
.sec-head h2{font-size:clamp(1.8rem,3.6vw,2.7rem);margin-top:8px;color:var(--ink)}
.sec-head p.sub{margin-top:10px;color:var(--muted);max-width:60ch}

/* ---------- article pages ---------- */
main{display:block;background:var(--paper)}
.prose{padding:48px 0 16px}
@media(min-width:700px){.prose{padding:64px 0 24px}}
.prose .wrap{max-width:780px}
.prose p{margin:0 0 18px}
.prose h2{font-size:clamp(1.6rem,3.2vw,2.2rem);color:var(--ink);margin:44px 0 14px;padding-top:16px;position:relative}
.prose h2::before{content:"";position:absolute;left:0;top:0;width:56px;height:8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='8' viewBox='0 0 56 8'%3E%3Cpath d='M2 5c4-4 8-4 12 0s8 4 12 0 8-4 12 0 8 4 12 0' fill='none' stroke='%232BB3B1' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat}
.prose h3{font-size:1.32rem;color:var(--ink);margin:30px 0 10px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px}
.prose li{margin:7px 0}
.prose li::marker{color:var(--jade-deep)}
.prose a{color:var(--jade-deep);text-decoration:underline;text-decoration-color:rgba(15,110,112,.38);text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:var(--ink);text-decoration-color:var(--coral)}
.prose strong{font-weight:700;color:var(--ink)}
.prose hr{border:0;border-top:1px solid var(--line);margin:34px 0}
.prose blockquote{border-left:4px solid var(--jade);background:var(--paper-2);padding:14px 20px;margin:0 0 18px;border-radius:0 10px 10px 0}
.prose table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:.95rem;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:11px 14px;text-align:left;vertical-align:top}
.prose thead th{background:var(--ink);color:var(--paper);font-weight:700;border:0;white-space:nowrap}
.prose thead th:first-child{border-radius:10px 0 0 0}
.prose thead th:last-child{border-radius:0 10px 0 0}
.prose tbody tr:nth-child(even){background:rgba(233,230,222,.6)}
.prose td:first-child{font-weight:600;color:var(--ink)}
.prose code,.prose kbd{font-family:var(--font-mono);font-size:.9em;background:var(--paper-2);padding:1px 6px;border-radius:5px}
/* "Sources" paragraph: quieter */
.prose p.sources,.prose .sources{font-size:.9rem;color:var(--muted)}

/* quick facts: a trail sign */
.prose ul.facts{list-style:none;padding:18px 20px;margin:0 0 26px;background:var(--ink);color:var(--paper);border-radius:var(--r);display:grid;gap:10px;font-size:.98rem;position:relative;overflow:hidden}
.prose ul.facts::after{content:"";position:absolute;right:-200px;top:-120px;width:720px;height:560px;background:var(--veins) no-repeat;opacity:.08;pointer-events:none}
.prose ul.facts li{margin:0;position:relative;z-index:1;padding-left:9.6rem}
.prose ul.facts li strong{position:absolute;left:0;top:.3em;width:9rem;font-family:var(--font-mono);font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--jade-soft)}
.prose ul.facts a{color:var(--coral-soft);text-decoration-color:rgba(247,179,158,.5)}
@media(max-width:480px){.prose ul.facts li{padding-left:0}.prose ul.facts li strong{position:static;display:block;width:auto;margin-bottom:2px}}

/* tip box: sand */
.prose p.tip,.prose div.tip{background:#FBF3E2;border:1px solid var(--sand);border-left:5px solid var(--coral);border-radius:10px;padding:14px 18px}
.prose p.tip strong{color:#7A3A1E}
/* warning box (closures, typhoons) */
.prose p.warn,.prose div.warn{background:#FCEDEA;border:1px solid #F0C4B8;border-left:5px solid var(--coral-deep);border-radius:10px;padding:14px 18px}
.prose p.warn strong{color:#7A2A14}

/* mode badges: <span class="line tra">TRA</span> (always with the name as text nearby) */
.line{display:inline-block;min-width:2.1em;padding:1px 7px;border-radius:999px;font-family:var(--font-mono);font-size:.78em;font-weight:500;color:#fff;text-align:center;vertical-align:.08em;line-height:1.5}
.line.tra{background:var(--ink-3)}.line.bus{background:var(--jade-deep)}.line.fly{background:var(--slate)}
.line.car{background:var(--coral-deep)}.line.bike{background:#4F7A33}

/* cards (hub pages): stones on the beach */
.cards{list-style:none!important;padding:0!important;margin:8px 0 30px!important;display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:620px){.cards{grid-template-columns:1fr 1fr}}
.cards li{margin:0!important}
a.card{display:flex;flex-direction:column;gap:6px;height:100%;padding:20px 20px 22px;background:var(--white);border:1px solid var(--line);border-radius:var(--r);text-decoration:none!important;color:var(--text)!important;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s}
a.card::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--jade)}
.cards li:nth-child(4n+2) a.card::before{background:var(--coral)}
.cards li:nth-child(4n+3) a.card::before{background:var(--rice)}
.cards li:nth-child(4n+4) a.card::before{background:var(--slate)}
a.card:hover,a.card:focus-visible{transform:translateY(-3px);box-shadow:0 14px 28px rgba(11,42,58,.12);border-color:var(--ink)}
.card-kicker{font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.card-title{font-family:var(--font-display);font-weight:600;font-size:1.35rem;color:var(--ink);line-height:1.15}
.card-title::after{content:" \2192";color:var(--coral-deep)}
.card-text{font-size:.95rem;color:var(--muted)}

/* FAQ */
.faq{background:var(--paper-2);padding:56px 0}
.faq .wrap{max-width:820px}
.faq h2{font-size:clamp(1.6rem,3vw,2.1rem);color:var(--ink);margin-bottom:12px}
.faq .qa{border-top:1px solid var(--line);padding:20px 0}
.faq .qa:last-child{border-bottom:1px solid var(--line)}
.faq .q{font-size:1.22rem;color:var(--ink);margin:0 0 8px;font-weight:600}
.faq .a p{margin:0 0 10px}
.faq .a a{color:var(--jade-deep)}

/* ---------- forms ---------- */
.interest .panel{position:relative;overflow:hidden;background:var(--ink);color:var(--paper);border-radius:20px;padding:36px 24px 120px}
@media(min-width:700px){.interest .panel{padding:44px 44px 130px}}
.interest .panel::after{content:"";position:absolute;left:0;right:0;bottom:0;height:140px;background:var(--ridges) no-repeat bottom/100% 100%;pointer-events:none}
.interest .panel>*{position:relative;z-index:1}
.interest .eyebrow{color:var(--coral-soft)}
.interest h2{font-size:clamp(1.6rem,3.2vw,2.3rem);margin:10px 0 12px;max-width:24ch;color:var(--paper)}
.interest p.copy{color:rgba(244,242,236,.86);max-width:56ch;margin-bottom:22px}
.signup{display:flex;gap:12px;flex-wrap:wrap;max-width:560px}
.signup input{flex:1;min-width:200px;min-height:48px;padding:12px 16px;border:1px solid rgba(244,242,236,.4);border-radius:999px;background:rgba(244,242,236,.08);color:var(--paper);font:inherit}
.signup input::placeholder{color:rgba(244,242,236,.62)}
.signup button{min-height:48px;padding:12px 24px;border-radius:999px;border:0;background:var(--coral-deep);color:#fff;font:inherit;font-weight:700;cursor:pointer}
.signup button:hover{background:#8F361C}
.interest .fineprint{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;color:rgba(244,242,236,.62);margin-top:14px}
.afield{display:flex;flex-direction:column;gap:15px;margin-top:6px}
.afield label{display:flex;flex-direction:column;gap:6px;font-weight:700;color:var(--ink);font-size:.95rem}
.afield input,.afield textarea,.afield select{font:inherit;font-weight:400;min-height:48px;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:var(--white);color:var(--text)}
.afield textarea{resize:vertical;min-height:110px}
.afield input:focus,.afield textarea:focus,.afield select:focus{outline:2px solid var(--jade-deep);outline-offset:1px;border-color:var(--jade-deep)}
.afield select{-webkit-appearance:none;appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230B2A3A' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.afield button{align-self:flex-start;min-height:48px;padding:12px 28px;border-radius:999px;border:0;background:var(--coral-deep);color:#fff;font:inherit;font-weight:700;cursor:pointer}
.afield button:hover{background:#8F361C}

/* ---------- footer: the shoreline ---------- */
footer.site{background:var(--ink);color:rgba(244,242,236,.86);padding:0 0 28px;position:relative;overflow:hidden}
.tide-rule{height:46px;background:var(--paper) var(--ridges) no-repeat bottom/100% 140%}
.foot-top{display:grid;grid-template-columns:1fr;gap:28px;padding-top:40px}
@media(min-width:620px){.foot-top{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.foot-top{grid-template-columns:1.5fr 1fr 1fr 1fr}}
footer .brand{flex-direction:column;align-items:flex-start;gap:0}
footer .brand .name{font-family:var(--font-display);font-weight:600;font-size:1.6rem;color:var(--paper)}
footer .brand .tag{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(244,242,236,.58);margin-top:6px}
footer p.blurb{font-size:.95rem;margin-top:16px;max-width:34ch;color:rgba(244,242,236,.78)}
.fcol{display:flex;flex-direction:column}
.fcol h4{font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--jade-soft);margin-bottom:8px}
.fcol a{display:inline-flex;align-items:center;min-height:40px;color:rgba(244,242,236,.86);text-decoration:none;font-size:.95rem}
.fcol a:hover{color:var(--coral-soft);text-decoration:underline;text-underline-offset:4px}
.colophon{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:space-between;margin-top:28px;padding-top:18px;border-top:1px solid rgba(244,242,236,.14);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;color:rgba(244,242,236,.62)}
.colophon .legal a{display:inline-block;padding:12px 0;color:inherit;text-decoration:underline;text-underline-offset:3px}
.colophon .legal a:hover{color:var(--coral-soft)}

/* ---------- consent banner (assets/consent.js) ---------- */
.consent{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));max-width:560px;margin-inline:auto;z-index:50;background:var(--paper);color:var(--text);border:2px solid var(--ink);border-radius:16px;padding:18px 20px;box-shadow:0 18px 40px rgba(11,42,58,.35);font-size:.98rem}
.consent[hidden]{display:none}
.consent p{margin:0 0 12px}
.consent a{color:var(--jade-deep);text-decoration:underline;text-underline-offset:2px}
.consent-actions{display:flex;gap:10px;flex-wrap:wrap}
.consent button,.choices-btn{min-height:44px;padding:10px 22px;border-radius:999px;font:inherit;font-weight:700;cursor:pointer;background:var(--ink);color:var(--paper);border:2px solid var(--ink)}
.consent button:hover,.choices-btn:hover{background:var(--ink-3);border-color:var(--ink-3)}
.consent button.quiet{background:transparent;color:var(--ink)}
.consent button.quiet:hover{background:rgba(11,42,58,.08)}

/* ---------- place actions (assets/myday.js) and My picks (assets/picks.js) ---------- */
.place-actions{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;margin:-6px 0 22px;font-size:.9rem}
span.place-actions{margin:8px 0 2px}
td span.place-actions{gap:2px 12px;font-size:.84rem}
.pa-name{font-weight:700;color:var(--ink);margin-right:-8px}
.prose .place-actions a,.place-actions a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);text-decoration:underline;text-decoration-color:rgba(86,99,106,.4);text-underline-offset:4px}
.prose .place-actions a:hover{color:var(--coral-deep)}
.pa-save{min-height:40px;padding:6px 16px;border:1.5px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);font:inherit;font-size:.88rem;font-weight:700;cursor:pointer;position:relative}
.pa-save::after{content:"";position:absolute;inset:-3px -2px}
.pa-save:hover,.pa-save:focus-visible{background:var(--paper-2)}
.pa-save[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
td .pa-save{padding:6px 12px;white-space:nowrap}
#picks{margin:8px 0 28px}
.pk-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:0 0 6px;padding:12px 0;border-bottom:2px solid var(--line)}
.pk-count{margin:0!important;font-weight:700;color:var(--ink)}
.pk-tools{display:flex;flex-wrap:wrap;gap:8px}
.pk-tool{min-height:44px;padding:8px 16px;border:1.5px solid var(--ink);border-radius:999px;background:var(--white);color:var(--ink);font:inherit;font-weight:700;font-size:.88rem;cursor:pointer}
.pk-shared{flex-basis:100%;margin:0!important;font-size:.9rem;color:var(--muted)}
.pk-url{width:100%;max-width:560px;min-height:44px;margin-top:6px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;font-size:.85rem;background:var(--white)}
.pk-notice{background:var(--paper-2);border-left:4px solid var(--jade);padding:10px 14px;border-radius:0 10px 10px 0;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pk-group h2{margin-top:30px!important}
.pk-n{font-family:var(--font-body);font-size:.9rem;color:var(--muted);font-weight:400}
.prose .pk-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.prose .pk-item{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:0;padding:12px 0;border-bottom:1px solid var(--line)}
.pk-main{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 260px}
.prose .pk-name{font-weight:700;font-size:1.05rem}
.pk-meta{font-size:.86rem;color:var(--muted)}
.pk-actions{display:flex;align-items:center;gap:6px 18px;flex:none}
.prose a.pk-link{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);font-size:.9rem}
.pk-remove{min-height:44px;padding:8px 14px;border:1px solid var(--muted);border-radius:999px;background:transparent;color:var(--text);font:inherit;font-size:.85rem;cursor:pointer}
.pk-empty{font-size:1.05rem}
.pk-browse a{white-space:nowrap}
.pk-tag{display:inline-block;margin-left:6px;padding:0 8px;border-radius:999px;background:var(--paper-2);font-size:.75rem;font-weight:700;color:var(--ink)}

/* ---------- home page ---------- */
.hero-home{min-height:clamp(560px,88vh,820px);display:flex;align-items:center}
.hero-home .inner{width:100%;padding-bottom:140px}
.hero-home h1{font-size:clamp(2.9rem,8vw,6.2rem);max-width:12ch;line-height:.98;font-weight:500}
.hero-home::after{width:1000px;height:780px;background-size:1000px 780px;right:-220px;top:-80px;opacity:.14}
/* layered ridges and the tide along the bottom of the home hero */
.ridges{position:absolute;left:0;right:0;bottom:0;height:clamp(120px,22vw,240px);background:var(--ridges) no-repeat bottom/100% 100%;z-index:-1;pointer-events:none}
.hero-home.has-photo .ridges{opacity:.85}
/* the rising sun, upper right */
.sun{position:absolute;right:clamp(24px,10vw,160px);top:clamp(40px,10vh,110px);width:clamp(70px,9vw,120px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 40%,#FBC3AE,var(--coral) 70%);box-shadow:0 0 60px 10px rgba(240,120,90,.35);z-index:-1;opacity:.9}
@media(max-width:520px){.sun{opacity:.5}}

/* "How to get here" board under the hero */
.board{position:relative;z-index:2;margin-top:-56px;padding:0 0 56px}
.board-card{background:var(--white);color:var(--text);border-radius:18px;border:1px solid var(--line);box-shadow:0 22px 44px rgba(11,42,58,.16);padding:24px 20px}
@media(min-width:700px){.board-card{padding:30px 32px}}
.board-head{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:baseline;justify-content:space-between}
.board-head h2{font-size:clamp(1.45rem,2.8vw,2rem);color:var(--ink)}
.board-head p{color:var(--muted);font-size:.95rem;max-width:56ch}
.lines-list{list-style:none;display:grid;grid-template-columns:1fr;gap:8px;margin-top:20px}
@media(min-width:700px){.lines-list{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.lines-list{grid-template-columns:1fr 1fr 1fr}}
.lines-list a{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;align-items:center;padding:12px 14px;border-radius:12px;background:var(--paper);border:1px solid var(--line);text-decoration:none;color:var(--text);min-height:56px}
.lines-list a:hover,.lines-list a:focus-visible{border-color:var(--ink);background:var(--paper-2)}
.lines-list .line{grid-row:1 / span 2;font-size:.8rem;min-width:3.4em;padding:4px 8px}
.lines-list .t{font-weight:700;color:var(--ink)}
.lines-list .s{font-size:.86rem;color:var(--muted)}
.board-foot{margin-top:16px;font-size:.92rem;color:var(--muted)}
.board-foot a{color:var(--jade-deep);font-weight:700}

/* featured stories */
.stories{padding:24px 0 72px}
.story-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:860px){.story-grid{grid-template-columns:1.3fr 1fr 1fr;grid-template-rows:auto auto}}
.story{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:var(--text);transition:transform .2s,box-shadow .2s}
.story:hover,.story:focus-visible{transform:translateY(-4px);box-shadow:0 16px 32px rgba(11,42,58,.14)}
@media(min-width:860px){.story-lead{grid-row:span 2}}
.story-art{position:relative;min-height:150px;display:flex;align-items:flex-end;padding:16px;background:var(--ink);overflow:hidden;background-size:cover;background-position:center}
.story-lead .story-art{min-height:260px;flex:1}
.story-art::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,42,58,0) 30%,rgba(11,42,58,.85))}
.story-art .hanzi{position:relative;font-family:"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;font-weight:800;font-size:2rem;letter-spacing:.1em;color:var(--paper)}
.story-lead .story-art .hanzi{font-size:clamp(2.6rem,5vw,3.6rem)}
.story-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:none}
.story-body h3{font-size:1.4rem;color:var(--ink);margin:6px 0 8px}
.story-lead .story-body h3{font-size:clamp(1.6rem,3vw,2.1rem)}
.story-body p{font-size:.96rem;color:var(--muted);margin:0 0 12px}
.story-body .more{margin-top:auto;font-weight:700;color:var(--coral-deep)}
.story-body .more::after{content:" \2192"}

/* section index */
.index{background:var(--paper-2);padding:64px 0}
.index-list{list-style:none;display:grid;grid-template-columns:1fr;gap:0 32px}
@media(min-width:760px){.index-list{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.index-list{grid-template-columns:1fr 1fr 1fr}}
.index-list a{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;padding:18px 0;border-top:1px solid var(--line);text-decoration:none;color:var(--text);min-height:44px}
.index-list .n{grid-row:1 / span 2;align-self:start;margin-top:3px;font-family:var(--font-mono);font-size:.8rem;color:var(--jade-deep)}
.index-list .t{font-family:var(--font-display);font-weight:600;font-size:1.35rem;color:var(--ink)}
.index-list .s{font-size:.93rem;color:var(--muted)}
.index-list a:hover .t,.index-list a:focus-visible .t{color:var(--coral-deep)}

/* who we are */
.who{padding:72px 0;text-align:center}
.who-inner{max-width:760px}
.who h2{font-size:clamp(1.9rem,4vw,2.8rem);color:var(--ink);margin:10px 0 16px}
.who p{margin:0 auto 16px;max-width:60ch}
.textlink-dark{display:inline-flex;align-items:center;min-height:44px;color:var(--coral-deep);font-weight:700;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.textlink-dark::after{content:"\00a0\2192"}
.interest-slim{padding:64px 0 72px}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Japanese (/ja/) and Traditional Chinese (/zh-tw/): Latin keeps the site fonts, CJK uses the visitor's
   own system fonts (nothing extra is downloaded) */
html:lang(ja){--font-body:'Instrument Sans','Hiragino Sans','Hiragino Kaku Gothic ProN','Noto Sans JP','Yu Gothic UI','Yu Gothic',Meiryo,sans-serif;--font-display:'Newsreader','Hiragino Mincho ProN','Noto Serif JP','Yu Mincho',serif}
html:lang(zh-Hant-TW){--font-body:'Instrument Sans','PingFang TC','Noto Sans TC','Microsoft JhengHei',sans-serif;--font-display:'Newsreader','Songti TC','Noto Serif TC','PMingLiU',serif}
html:lang(ja) body,html:lang(zh-Hant-TW) body{line-height:1.85}
html:lang(ja) h1,html:lang(ja) h2,html:lang(ja) h3,html:lang(zh-Hant-TW) h1,html:lang(zh-Hant-TW) h2,html:lang(zh-Hant-TW) h3{line-height:1.3;letter-spacing:0}
html:lang(ja) .eyebrow,html:lang(zh-Hant-TW) .eyebrow{letter-spacing:.08em}
/* language switch */
.nav ul.langs{display:flex;gap:2px;list-style:none;margin:0 0 0 12px;padding:0}
.nav ul.langs a{display:inline-block;padding:12px 8px;font-size:.85rem;font-weight:700;color:var(--coral-soft);text-decoration:none;white-space:nowrap}
.nav ul.langs a:hover,.nav ul.langs a:focus-visible{text-decoration:underline;text-underline-offset:3px}
@media(min-width:0px){.nav{position:relative}.nav nav{margin-top:10px}.nav ul.langs{position:absolute;top:6px;right:12px;margin:0}.nav ul.langs a{padding:12px 6px;font-size:.8rem}}
@media(min-width:1241px){.nav ul{justify-content:flex-start}.nav nav{-webkit-mask-image:none;mask-image:none}}
@media(max-width:400px){.brand .name{font-size:1.22rem}.brand .mark{width:34px;height:34px}.brand{gap:9px}.nav ul.langs{right:6px}.nav ul.langs a{padding:12px 4px;font-size:.76rem}}

/* home story art: Pexels photos (generator/photos/pexels.json) */
.story-art.ph-taroko{background-image:url(/assets/photos/taroko-marble-gorge-900.webp)}
.story-art.ph-coast{background-image:url(/assets/photos/pebble-beach-mountains-900.webp)}
.story-art.ph-food{background-image:url(/assets/photos/wonton-soup-900.webp)}
.story-art.ph-market{background-image:url(/assets/photos/night-market-stalls-900.webp)}
.story-art.ph-valley{background-image:url(/assets/photos/hualien-rice-fields-aerial-900.webp)}
@media(max-width:340px){.brand .name{font-size:1.08rem}.brand .tag{letter-spacing:.16em}}