@font-face{font-family:"Atkinson Hyperlegible";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/ah-400.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/ah-700.woff2) format("woff2")}

:root{
  --paper:#F5F7FA;      /* cool white page */
  --ink:#18233A;        /* text */
  --muted:#4D5A72;      /* secondary text, 7.2:1 on paper */
  --night:#1E2C49;      /* the lock screen */
  --signal:#C62E26;     /* emergency red: Emergency, the first-aid line, nothing else */
  --mist:#E2E8F1;       /* quiet panels, rules */
  --card:#FFFFFF;
  --focus:#1D5FD1;
  --measure:36rem;
  --sans:"Atkinson Hyperlegible","PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.125rem/1.6 var(--sans)}
:lang(zh-Hant-TW) body,body:lang(zh-Hant-TW){line-height:1.75;letter-spacing:.02em}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.wrap{max-width:68rem;margin:0 auto;padding:0 1.25rem}

/* top bar: only the language switch, so the hero is the first thing */
.top{display:flex;justify-content:space-between;align-items:center;padding:1rem 0;font-size:1rem}
.mark{font-weight:700;text-decoration:none;display:flex;align-items:center;gap:.5rem}
.mark svg{width:1.5rem;height:1.5rem}

/* hero: words left, the locked phone right */
.hero{display:grid;gap:2.5rem;align-items:center;padding:1.5rem 0 3.5rem}
@media (min-width:860px){.hero{grid-template-columns:1.15fr .85fr;padding:3rem 0 5rem}}
h1{font-size:clamp(2.25rem,5.6vw,3.75rem);line-height:1.08;letter-spacing:-.015em;margin:0 0 1.25rem;max-width:14ch}
h1:lang(zh-Hant-TW){max-width:12em;letter-spacing:0;line-height:1.25}
.lead{font-size:1.25rem;max-width:var(--measure);margin:0 0 2rem;color:var(--ink)}
.jumps{display:flex;flex-wrap:wrap;gap:.75rem}
.btn{display:inline-block;padding:.85rem 1.3rem;border-radius:.6rem;font-weight:700;text-decoration:none;border:2px solid var(--ink)}
.btn.solid{background:var(--ink);color:#fff}
.btn:hover{text-decoration:underline}

/* the phone */
.phone{justify-self:center;width:min(19rem,82vw);aspect-ratio:9/18.5;border-radius:2.6rem;background:#0F1729;padding:.7rem;box-shadow:0 1.5rem 3rem -1.5rem rgba(24,35,58,.45)}
.screen{position:relative;height:100%;border-radius:2rem;background:var(--night);color:#fff;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding:3.2rem 1rem 1.2rem}
.clock{font-size:3.6rem;font-weight:700;line-height:1;letter-spacing:-.02em}
.date{font-size:.95rem;opacity:.85;margin-top:.4rem}
.lock{margin-top:1.4rem;width:1.1rem;height:1.1rem;opacity:.8}
.emerg{margin-top:auto;align-self:flex-start;color:#FF8A82;font-weight:700;font-size:1rem}
.medcard{position:absolute;left:.75rem;right:.75rem;bottom:3.2rem;background:var(--card);color:var(--ink);border-radius:1rem;padding:.9rem 1rem;font-size:.9rem;line-height:1.35;border-top:6px solid var(--signal)}
.medcard strong{display:block;font-size:1rem;margin-bottom:.45rem}
.medcard dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.25rem .75rem}
.medcard dt{color:var(--muted)}
.medcard dd{margin:0;font-weight:700}
.example{position:absolute;top:.9rem;right:1rem;font-size:.75rem;opacity:.7}
@media (prefers-reduced-motion:no-preference){
  .medcard{animation:rise .9s cubic-bezier(.2,.8,.2,1) .8s both}
  @keyframes rise{from{transform:translateY(115%);opacity:0}to{transform:none;opacity:1}}
}

/* sections */
section.part{padding:3rem 0;border-top:1px solid var(--mist)}
@media (min-width:860px){section.part{display:grid;grid-template-columns:16rem 1fr;gap:3rem}}
h2{font-size:1.75rem;line-height:1.2;margin:0 0 1rem}
h3{font-size:1.2rem;margin:2rem 0 .75rem}
.body{max-width:var(--measure)}
.body p{margin:0 0 1rem}
.guides{list-style:none;padding:0;margin:0 0 1rem;display:grid;gap:.6rem}
.guides a{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.25rem 1rem;align-items:baseline;padding:1rem 1.1rem;background:var(--card);border:1px solid var(--mist);border-radius:.75rem;text-decoration:none}
.guides a:hover{border-color:var(--ink)}
.guides .name{font-weight:700}
.guides .by{color:var(--muted);text-decoration:underline;white-space:nowrap}
.small{font-size:1rem;color:var(--muted)}
.notes{padding-left:1.2rem;margin:0}
.notes li{margin:0 0 .6rem}

/* first aid comes first: the one red rule on the page */
.first{border-left:6px solid var(--signal);background:var(--card);padding:1.1rem 1.25rem;border-radius:0 .75rem .75rem 0;margin:0 0 1.5rem}
.first p{margin:0 0 .5rem;font-weight:700;font-size:1.2rem}
.first .small{font-weight:400;margin:0}
.none{font-weight:700}

.share{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1rem}
.share .btn{border-color:var(--ink);background:transparent}

footer{border-top:1px solid var(--mist);padding:2rem 0 3rem;font-size:1rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
footer a{color:var(--ink)}

.about h1{font-size:2.5rem;max-width:none}
.about h2{font-size:1.3rem;margin:2rem 0 .5rem}

/* lately: news and reminders */
.lately{list-style:none;padding:0;margin:0}
.lately li{padding:0 0 1.5rem;margin:0 0 1.5rem;border-bottom:1px solid var(--mist)}
.lately li:last-child{border-bottom:0;margin-bottom:0}
.lately h3{margin:.25rem 0 .5rem}
.lately .when{margin:0;font-size:1rem;color:var(--muted)}
.lately .kind{border:1px solid var(--muted);border-radius:1rem;padding:0 .5rem;margin-left:.4rem;font-size:.85rem}