/* Inside Taichung: "Sun and milk tea".
   The light one of the family: Taichung's famous sunshine and its drinks. Milk-tea paper, roasted-tea
   brown for ink, a marigold sun, the red brick of the old Taichung Station and the green of the
   Calligraphy Greenway. The background motif is the soft arched openings of the National Taichung
   Theater, with a few tapioca pearls. Young Serif for headings, Manrope for reading, Space Mono for
   labels. Mobile first, 44px touch targets, nothing said by color alone. */
:root{
  /* tea */
  --ink:#3B2416;
  --ink-2:#4E3121;
  --ink-3:#6B4630;
  --paper:#FBF5EA;
  --paper-2:#F3E7D3;
  --caramel:#D9B48A;
  --line:#E3D3BA;
  --text:#2A1C12;
  --muted:#6A5546;
  --white:#FFFFFF;

  /* sun, brick, leaf */
  --sun:#F2A900;
  --sun-soft:#FFD66B;
  --brick:#B5462B;
  --brick-deep:#8E3420;
  --leaf:#4F7A4A;
  --leaf-deep:#3B5E37;
  --link:#9A3B22;

  /* transit (accents only, always with a code or name) */
  --tmrt-green:#8DC21F;
  --bus:#2C6E9B;
  --hsr:#E56E19;
  --tra:#1F4E9C;

  --font-display:'Young Serif',Georgia,'Times New Roman',serif;
  --font-body:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'Space Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  --maxw:1160px;
  --r:16px;

  /* the theater: arched openings, a greenway line, a few pearls and the sun */
  --curves:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='520' viewBox='0 0 640 520' fill='none' stroke-linecap='round'%3E%3Cg stroke='%23B5462B' stroke-width='3' stroke-opacity='.55'%3E%3Cpath d='M40 540V300C40 230 90 190 150 190S260 230 260 300V540'/%3E%3Cpath d='M300 540V220C300 140 360 90 430 90S560 140 560 220V540'/%3E%3Cpath d='M600 540V360C600 310 630 280 680 280'/%3E%3C/g%3E%3Cg stroke='%234F7A4A' stroke-width='3' stroke-opacity='.5'%3E%3Cpath d='M-20 120C60 60 130 150 210 100S340 20 420 60 560 150 660 90'/%3E%3C/g%3E%3Cg stroke='%233B2416' stroke-width='2' stroke-opacity='.28'%3E%3Cpath d='M80 540V320C80 270 110 240 150 240S220 270 220 320V540'/%3E%3Cpath d='M345 540V240C345 180 385 140 430 140S515 180 515 240V540'/%3E%3C/g%3E%3Cg fill='%233B2416' fill-opacity='.55'%3E%3Ccircle cx='150' cy='150' r='7'/%3E%3Ccircle cx='172' cy='162' r='7'/%3E%3Ccircle cx='430' cy='52' r='7'/%3E%3Ccircle cx='590' cy='240' r='7'/%3E%3Ccircle cx='606' cy='258' r='5'/%3E%3C/g%3E%3Ccircle cx='540' cy='70' r='44' fill='%23F2A900' fill-opacity='.85'/%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.68;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(--brick);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ink);color:var(--paper);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:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brick)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;line-height:1.1;letter-spacing:-.01em;text-wrap:balance}

/* ---------- header: a sunny shopfront ---------- */
header.site{background:var(--paper);color:var(--ink);position:sticky;top:0;z-index:30;border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(59,36,22,.04)}
header.site::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:4px;background:linear-gradient(90deg,var(--sun) 0 40%,var(--brick) 0 70%,var(--leaf) 0)}
.nav{display:flex;align-items:center;gap:28px;min-height:72px}
.wrap.nav{max-width:1360px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;flex:none}
.brand .mark{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--ink);color:var(--paper);font-family:"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;font-weight:800;font-size:1.15rem;line-height:1;position:relative}
.brand .mark::after{content:"";position:absolute;right:-4px;top:-4px;width:13px;height:13px;border-radius:50%;background:var(--sun);border:2px solid var(--paper)}
.brand .words{display:flex;flex-direction:column;line-height:1}
.brand .name{font-family:var(--font-display);font-size:1.45rem;letter-spacing:-.01em}
.brand .tag{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.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:700;font-size:.95rem;color:var(--ink-2);white-space:nowrap;position:relative}
.nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:3px;border-radius:2px;background:var(--sun);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.nav ul a:hover,.nav ul a:focus-visible{color:var(--ink)}
.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(--ink)}
.picks-link{color:var(--brick)!important}
.nav ul.langs{flex:none}
@media(max-width:1359px){
  .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: afternoon sun ---------- */
.hero{position:relative;overflow:hidden;background:var(--paper-2);color:var(--ink);isolation:isolate;border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(55% 75% at 92% 0%,rgba(242,169,0,.38),transparent 62%),
  radial-gradient(45% 60% at 0% 100%,rgba(79,122,74,.18),transparent 65%),
  linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%)}
.hero::after{content:"";position:absolute;z-index:-1;right:-110px;bottom:-60px;width:640px;height:520px;background:var(--curves) no-repeat;opacity:.55}
.hero .inner{max-width:var(--maxw);margin:0 auto;padding:60px 20px 68px}
@media(min-width:700px){.hero .inner{padding:84px 32px 92px}}
.hero h1{font-size:clamp(2.3rem,6vw,4rem);margin-top:14px;max-width:18ch;color:var(--ink)}
.hero h1 em{font-style:normal;color:var(--brick);background:linear-gradient(transparent 62%,rgba(242,169,0,.55) 62%);padding:0 .08em}
.hero .lede{font-size:clamp(1.05rem,2vw,1.22rem);max-width:52ch;margin-top:18px;color:var(--ink-2)}
.pagehero h1{font-size:clamp(2.1rem,5vw,3.4rem)}
/* photo banners: the photo on the right, milk-tea paper fading in from the left so the text stays dark on light */
.hero.has-photo{background-image:linear-gradient(90deg,rgba(251,245,234,.97) 0%,rgba(251,245,234,.90) 40%,rgba(251,245,234,.35) 72%,rgba(251,245,234,0) 100%),var(--hero);background-size:cover;background-position:center}
.hero.has-photo::before{opacity:.35}
.hero.has-photo::after{opacity:0}
@media(max-width:700px){
  .hero::after{width:420px;height:340px;background-size:420px 340px;right:-150px;bottom:-40px;opacity:.4}
  .hero.has-photo{background-image:linear-gradient(180deg,rgba(251,245,234,.55) 0%,rgba(251,245,234,.88) 45%,rgba(251,245,234,.97) 100%),var(--hero-sm)}
}
.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(--ink);color:var(--paper);text-decoration:none;font-weight:700;border:0;font-family:var(--font-body);font-size:1rem;cursor:pointer;transition:background .2s,transform .2s;box-shadow:0 4px 0 var(--sun)}
.btn:hover,.btn:focus-visible{background:var(--ink-3);transform:translateY(-2px)}
.textlink{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--sun);text-decoration-thickness:3px;text-underline-offset:6px}
.textlink:hover{color:var(--brick)}

/* ---------- sections ---------- */
section{padding:64px 0}
.sec-head{margin-bottom:28px}
.sec-head h2{font-size:clamp(1.7rem,3.6vw,2.6rem);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.55rem,3.2vw,2.15rem);color:var(--ink);margin:46px 0 14px;padding-top:18px;position:relative}
.prose h2::before{content:"";position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%;background:var(--ink);box-shadow:18px 0 0 var(--ink-3),36px 0 0 var(--caramel)}
.prose h3{font-size:1.3rem;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(--brick)}
.prose a{color:var(--link);text-decoration:underline;text-decoration-color:rgba(154,59,34,.35);text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:var(--ink);text-decoration-color:var(--sun);text-decoration-thickness:2px}
.prose strong{font-weight:800;color:var(--ink)}
.prose hr{border:0;border-top:1px solid var(--line);margin:34px 0}
.prose blockquote{border-left:4px solid var(--sun);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(243,231,211,.6)}
.prose td:first-child{font-weight:700;color:var(--ink)}
.prose code,.prose kbd{font-family:var(--font-mono);font-size:.88em;background:var(--paper-2);padding:1px 6px;border-radius:5px}
.prose p.sources,.prose .sources{font-size:.9rem;color:var(--muted)}

/* quick facts: a drinks-stand menu board */
.prose ul.facts{list-style:none;padding:18px 20px;margin:0 0 26px;background:var(--white);border:2px solid var(--ink);border-radius:var(--r);display:grid;gap:10px;font-size:.98rem;box-shadow:6px 6px 0 var(--sun)}
.prose ul.facts li{margin:0;position:relative;padding-left:8.5em}
.prose ul.facts li strong{position:absolute;left:0;top:.3em;width:8em;font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brick);line-height:1.4}
.prose ul.facts .place-actions{margin:2px 0 0}
@media(max-width:480px){.prose ul.facts li{padding-left:0}.prose ul.facts li strong{position:static;display:block;width:auto}}

/* tip box */
.prose p.tip,.prose div.tip{background:#EEF3E6;border:1px solid #CFDDBF;border-left:5px solid var(--leaf);border-radius:10px;padding:14px 18px}
.prose p.tip strong{color:var(--leaf-deep)}

/* transit badges: <span class="line g">G</span> (always with the line or service 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:700;color:#fff;text-align:center;vertical-align:.08em;line-height:1.5}
.line.g{background:var(--tmrt-green);color:#1b1b1b}.line.bus{background:var(--bus)}.line.hsr{background:var(--hsr);color:#1b1b1b}.line.tra{background:var(--tra)}
.line.bike{background:var(--sun);color:#1b1b1b}.line.taxi{background:var(--ink)}

/* cards (hub pages): drink cups on a counter */
.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 22px 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(--sun)}
.cards li:nth-child(4n+2) a.card::before{background:var(--brick)}
.cards li:nth-child(4n+3) a.card::before{background:var(--leaf)}
.cards li:nth-child(4n+4) a.card::before{background:var(--caramel)}
a.card:hover,a.card:focus-visible{transform:translateY(-3px);box-shadow:0 14px 28px rgba(59,36,22,.12);border-color:var(--ink)}
.card-kicker{font-family:var(--font-mono);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.card-title{font-family:var(--font-display);font-size:1.3rem;color:var(--ink);line-height:1.15}
.card-title::after{content:" \2192";color:var(--brick)}
.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.5rem,3vw,2rem);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-family:var(--font-body);font-size:1.12rem;color:var(--ink);margin:0 0 8px;font-weight:800;letter-spacing:0}
.faq .a p{margin:0 0 10px}
.faq .a a{color:var(--link)}

/* ---------- forms ---------- */
.interest .panel{position:relative;overflow:hidden;background:var(--ink);color:var(--paper);border-radius:22px;padding:36px 24px}
@media(min-width:700px){.interest .panel{padding:44px 44px}}
.interest .panel::after{content:"";position:absolute;right:-60px;bottom:-40px;width:200px;height:200px;border-radius:50%;background:var(--sun);opacity:.9;pointer-events:none}
.interest .panel>*{position:relative;z-index:1}
.interest .eyebrow{color:var(--sun-soft)}
.interest h2{font-size:clamp(1.5rem,3.2vw,2.2rem);margin:10px 0 12px;max-width:24ch;color:var(--paper)}
.interest p.copy{color:rgba(251,245,234,.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(251,245,234,.45);border-radius:999px;background:rgba(251,245,234,.1);color:var(--paper);font:inherit}
.signup input::placeholder{color:rgba(251,245,234,.65)}
.signup button{min-height:48px;padding:12px 24px;border-radius:999px;border:0;background:var(--sun);color:var(--ink);font:inherit;font-weight:800;cursor:pointer}
.signup button:hover{background:var(--sun-soft)}
.interest .fineprint{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;color:rgba(251,245,234,.65);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(--caramel);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(--brick);outline-offset:1px;border-color:var(--brick)}
.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='%233B2416' 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(--ink);color:var(--paper);font:inherit;font-weight:700;cursor:pointer}
.afield button:hover{background:var(--ink-3)}

/* ---------- footer: evening tea ---------- */
footer.site{background:var(--ink);color:rgba(251,245,234,.86);padding:0 0 28px;position:relative;overflow:hidden}
.sun-rule{display:grid;grid-template-columns:4fr 3fr 3fr;height:6px}
.sun-rule span:nth-child(1){background:var(--sun)}.sun-rule span:nth-child(2){background:var(--brick)}.sun-rule span:nth-child(3){background:var(--leaf)}
.foot-top{display:grid;grid-template-columns:1fr;gap:28px;padding-top:48px}
@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-size:1.55rem;color:var(--paper)}
footer .brand .tag{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(251,245,234,.6);margin-top:6px}
footer p.blurb{font-size:.95rem;margin-top:16px;max-width:34ch;color:rgba(251,245,234,.78)}
.fcol{display:flex;flex-direction:column}
.fcol h4{font-family:var(--font-mono);font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sun);margin-bottom:8px}
.fcol a{display:inline-flex;align-items:center;min-height:40px;color:rgba(251,245,234,.88);text-decoration:none;font-size:.95rem}
.fcol a:hover{color:var(--sun-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(251,245,234,.16);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.03em;color:rgba(251,245,234,.65)}
.colophon .legal a{display:inline-block;padding:12px 0;color:inherit;text-decoration:underline;text-underline-offset:3px}
.colophon .legal a:hover{color:var(--sun-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(--white);color:var(--text);border:2px solid var(--ink);border-radius:16px;padding:18px 20px;box-shadow:0 18px 40px rgba(59,36,22,.3);font-size:.98rem}
.consent[hidden]{display:none}
.consent p{margin:0 0 12px}
.consent a{color:var(--link);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(59,36,22,.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:800;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(106,85,70,.4);text-underline-offset:4px}
.prose .place-actions a:hover{color:var(--brick)}
.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:800;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(--sun);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:800;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(540px,84vh,780px);display:flex;align-items:center}
.hero-home .inner{width:100%}
.hero-home h1{font-size:clamp(2.9rem,8vw,6rem);max-width:12ch;line-height:1}
.hero-home::after{width:900px;height:730px;background-size:900px 730px;right:-180px;bottom:-120px;opacity:.6}
/* three cups on the right edge of the home hero: hanzi labels like drink-stand cups */
.cups{position:absolute;right:clamp(16px,5vw,72px);bottom:0;display:flex;gap:14px;align-items:flex-end;z-index:-1}
.cups span{display:grid;place-items:center;width:clamp(64px,7vw,92px);border-radius:10px 10px 22px 22px;border:3px solid var(--ink);background:var(--white);font-family:"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;font-weight:800;font-size:clamp(1.2rem,2.2vw,1.7rem);writing-mode:vertical-rl;letter-spacing:.14em;padding:18px 0;color:var(--ink);position:relative}
.cups span::before{content:"";position:absolute;left:12%;right:12%;bottom:10px;height:16px;background:radial-gradient(circle,var(--ink) 38%,transparent 42%) 0 0/14px 14px}
.cups span:nth-child(1){height:min(46vh,330px);background:#EBD2AE}
.cups span:nth-child(2){height:min(36vh,250px);margin-bottom:24px;background:#F6E2A6}
.cups span:nth-child(3){height:min(30vh,210px);background:#DDE7CF}
@media(max-width:860px){.cups{opacity:.35;right:12px}}
@media(max-width:560px){.cups{display:none}}

/* "How to get around" 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:22px;border:2px solid var(--ink);box-shadow:8px 8px 0 var(--sun);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.35rem,2.8vw,1.9rem);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{background:var(--paper-2);border-color:var(--ink)}
.lines-list .line{grid-row:1 / span 2;font-size:.85rem;min-width:3.2em;padding:4px 8px}
.lines-list .t{font-weight:800;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(--link);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:20px;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(59,36,22,.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(--caramel);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(59,36,22,0) 35%,rgba(59,36,22,.78))}
.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.35rem;color:var(--ink);margin:6px 0 8px}
.story-lead .story-body h3{font-size:clamp(1.5rem,3vw,2rem)}
.story-body p{font-size:.96rem;color:var(--muted);margin:0 0 12px}
.story-body .more{margin-top:auto;font-weight:800;color:var(--brick)}
.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:4px;font-family:var(--font-mono);font-weight:700;font-size:.8rem;color:var(--brick)}
.index-list .t{font-family:var(--font-display);font-size:1.28rem;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(--brick)}

/* who we are */
.who{padding:72px 0;text-align:center}
.who-inner{max-width:760px}
.who h2{font-size:clamp(1.8rem,4vw,2.7rem);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(--brick);font-weight:800;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}
}

/* home story art: photos (generator/photos/pexels.json) */
.story-art.ph-gaomei{background-image:url(/assets/photos/taiwan-coast-turbines-sunset-900.webp)}
.story-art.ph-miyahara{background-image:url(/assets/photos/ice-cream-scoops-900.webp)}
.story-art.ph-fengjia{background-image:url(/assets/photos/fengjia-night-market-900.webp)}
.story-art.ph-theater{background-image:url(/assets/photos/taichung-theater-night-900.webp)}
.story-art.ph-shenji{background-image:url(/assets/photos/shenji-old-house-greenery-900.webp)}

/* 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:'Manrope','Hiragino Sans','Hiragino Kaku Gothic ProN','Noto Sans JP','Yu Gothic UI','Yu Gothic',Meiryo,sans-serif;--font-display:'Young Serif','Hiragino Mincho ProN','Noto Serif JP','Yu Mincho',serif}
html:lang(zh-Hant-TW){--font-body:'Manrope','PingFang TC','Noto Sans TC','Microsoft JhengHei',sans-serif;--font-display:'Young Serif','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) .hero h1 em,html:lang(zh-Hant-TW) .hero h1 em{white-space:nowrap}
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(--brick);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(max-width:1359px){.nav{position:relative}.nav ul.langs{position:absolute;top:14px;right:12px;margin:0}.nav ul.langs a{padding:12px 6px;font-size:.8rem}}
/* phones: the language switch sits beside the brand instead of over it */
@media(max-width:600px){
  .nav ul.langs{position:static;order:1;margin:0 -6px 0 auto}
  .nav nav{order:2}
  .nav ul.langs a{padding:12px 5px}
}
@media(max-width:420px){.brand .name{font-size:1.22rem}.brand .mark{width:38px;height:38px}.brand .tag{letter-spacing:.14em}}