/* Shared chrome for every page except the homepage (/insights, /subsidy-finder).
   ponytail: the tokens and the header/footer rules below are copied from
   index.html's inline <style>. The homepage stays a self-contained single
   file, so these two are the only places the design system lives. If they
   ever drift, lift index.html's shared layer into this file and link it. */

:root{
  --ink:#272322;--muted:#666666;--accent:#28627c;--sky:#a6e3f5;--pale:#edfbff;--white:#fff;
  --sans:"IBM Plex Sans","Noto Sans TC",system-ui,sans-serif;
  --nav-height:88px;--hero-bg:#f0f9fc;--width:1200px;--gutter:clamp(24px,5vw,80px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:104px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.85;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{font-weight:500;text-wrap:balance}
h2{font-size:clamp(30px,3vw,42px);line-height:1.5;letter-spacing:-.025em}
h3{font-size:24px;line-height:1.6;letter-spacing:-.02em}
p{max-width:65ch}
:focus-visible{outline:3px solid var(--accent);outline-offset:6px}
::selection{background:var(--sky);color:var(--ink)}

.wrap{width:min(var(--width),calc(100% - var(--gutter)*2));margin-inline:auto}
.muted{color:var(--muted)}
.section-label{font-size:15px;color:var(--accent);margin-bottom:14px}
.skip{position:fixed;top:12px;left:16px;z-index:100;background:var(--ink);color:white;padding:12px 20px;transform:translateY(-160%)}
.skip:focus{transform:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:20px;min-height:54px;padding:12px 25px;background:var(--ink);color:white;border-radius:4px;font-weight:500;line-height:1.6;transition:background .2s}
.btn:hover{background:var(--accent)}
.btn svg{width:18px;height:18px;flex:none}
.text-link{display:inline-flex;align-items:center;gap:10px;padding-block:10px;text-underline-offset:6px}
.text-link:hover{text-decoration:underline}

.header{position:sticky;top:0;z-index:20;background:var(--hero-bg)}
.nav{min-height:var(--nav-height);display:flex;align-items:center;justify-content:space-between;gap:32px}
.wordmark{display:inline-flex;align-items:baseline;gap:.4375em;font-size:23px;font-weight:500;letter-spacing:-.026em;white-space:nowrap}
/* The mark is twice the cap height (Plex caps are .698em) and centred on the caps, so it hangs .349em below the baseline.
   The gap plus the F's .086em side bearing leaves .75 cap height of visible space before the ink.
   flex:none because img,svg{max-width:100%} would otherwise let a tight row squeeze the mark to 0. */
.wordmark svg{width:.698em;height:1.396em;margin-top:-.349em;transform:translateY(.349em);flex:none}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-links>a{font-size:15px;white-space:nowrap}
.nav-links>a:not(.btn){color:var(--muted);transition:color .2s}
.nav-links>a:not(.btn):hover,.nav-links>a[aria-current=page]{color:var(--accent)}
.nav-links .btn{min-height:42px;padding:10px 18px}
.nav-cta{display:none}
.nav-toggle{display:none;border:0;background:transparent;color:var(--ink);min-width:48px;min-height:48px;cursor:pointer}

.footer{padding-block:34px;background:#def3fb}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:30px;font-size:15px;color:var(--muted)}
.footer .wordmark{font-size:17px;color:var(--ink)}
.footer-meta{display:flex;gap:24px;align-items:center}
.footer-links{display:flex;gap:24px}
.footer-links a{transition:color .2s}
.footer-links a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:6px}

/* Content-page primitives shared by /insights and /subsidy-finder. */
.reading{width:min(760px,calc(100% - var(--gutter)*2));margin-inline:auto}
.masthead{background:var(--hero-bg);padding-block:clamp(48px,7svh,88px) clamp(52px,7svh,92px)}
.masthead h1{font-size:clamp(32px,3.6vw,50px);font-weight:500;line-height:1.42;letter-spacing:-.035em}
.masthead-intro{margin-top:24px;font-size:17px;line-height:1.95;color:#52636b}
.sources{margin-top:40px;font-size:15px;line-height:1.9;color:var(--muted)}
.sources a{text-decoration:underline;text-underline-offset:4px}
.sources a:hover{color:var(--accent)}

.cta-panel{background:var(--ink);color:white;padding:44px 40px}
.cta-panel-head{display:flex;align-items:center;gap:16px}
.cta-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 2px #ffffff33}
.cta-panel h2{font-size:24px;line-height:1.6;letter-spacing:-.02em;font-weight:500}
.cta-panel p{margin-top:16px;color:#d9e1e5;font-size:16px;line-height:1.95}
.cta-panel .cta-actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:32px}
.cta-panel .btn{background:white;color:var(--ink);min-height:48px}
.cta-panel .btn:hover{background:var(--sky)}
.cta-panel .btn-ghost{background:transparent;color:white;box-shadow:inset 0 0 0 1px #ffffff66}
.cta-panel .btn-ghost:hover{background:#ffffff1a}
.cta-panel p a{color:white;text-decoration:underline;text-underline-offset:4px}
.cta-panel p a:hover{color:var(--sky)}
.cta-panel .cta-meta{font-size:15px;color:#c5d9e2}
.cta-panel :focus-visible{outline-color:var(--sky)}

@media(max-width:960px){
  .nav{gap:12px}.nav-cta{display:inline-flex;margin-left:auto;margin-right:4px;min-height:40px;padding:9px 14px;font-size:14px;gap:8px;white-space:nowrap;flex:none}.nav-links .btn{display:none}
  .nav-toggle{display:block}.nav-links{position:absolute;top:var(--nav-height);left:0;right:0;background:var(--hero-bg);display:none;align-items:stretch;padding:10px var(--gutter) 24px;gap:0;box-shadow:0 16px 20px #2723220d}
  .nav-links.open{display:flex;flex-direction:column}.nav-links>a{padding:12px 0}
}
@media(max-width:760px){
  :root{--nav-height:76px}html{scroll-padding-top:90px}.wordmark{font-size:20px}
  .masthead h1{font-size:clamp(27px,5.4vw,36px);line-height:1.5}
  .masthead-intro{font-size:15px;margin-top:20px}
  .cta-panel{padding:32px 26px}.cta-panel .cta-actions{gap:18px}
  .footer-inner{align-items:flex-start}.footer-meta{flex-direction:column;align-items:flex-end;gap:5px}
}
@media(max-width:400px){
  .nav{gap:8px}.nav-cta{padding:8px 10px;margin-right:0}
  .footer-inner{flex-direction:column;gap:18px}.footer-meta{align-items:flex-start}
}
/* Below 340px the 20px wordmark, CTA and burger need more than the row has; 17px keeps the mark whole-pixel (12x24). */
@media(max-width:340px){.wordmark{font-size:17px}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}
}