/* ==========================================================================
   /links, the link-in-bio page (src/links.html, rendered by src/links/page.js).
   The site's v4 theme: the tokens of site.css, cards as the work tiles (white on paper).
   Mobile first, one column, nothing hidden, no motion beyond colour.
   ========================================================================== */

:root{
  --paper:#F4F3EF;              /* page */
  --surface:#FFFFFF;
  --ink:#121212;
  --ink-2:#3A3A38;
  --muted:#66645E;              /* 5.4:1 on paper */
  --line:rgba(18,18,18,.12);
  --accent:#E8C15A;             /* fills only, always with black text: amber text is unreadable on paper */
  --accent-ink:#8A6512;         /* the accent where it has to be read: 4.6:1 on paper */
  --r-sm:4px; --r:8px;
  --serif:"Instrument Serif", Georgia, serif;
  --sans:"Inter Tight", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  background:var(--paper);color:var(--ink);font:400 1rem/1.55 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,p{margin:0}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px;border-radius:2px}
:lang(zh-Hant){font-family:"PingFang TC","Noto Sans CJK TC","Noto Sans TC","Microsoft JhengHei",var(--sans)}

.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-60px;padding:10px 14px;background:var(--ink);color:var(--paper);
  border-radius:var(--r-sm);z-index:2}
.skip:focus{top:12px}

.lk-head,.lk-main,.lk-foot{width:min(480px,100% - 32px);margin-inline:auto}

/* ---------- the name: the mark is ink on the light page, as in the site header ---------- */
.lk-head{padding-top:48px;text-align:center}
@media (min-width:700px){.lk-head{padding-top:96px}}
.brand{display:inline-flex;align-items:center;gap:12px;font:600 1.5rem/1 var(--sans);letter-spacing:.01em}
.brand__mark{width:1.15em;height:1.15em;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2.8 2.8 18.4 18.4'%3E%3Cpath d='M2.8 2.8H16.2V5.2H2.8ZM2.8 2.8H5.2V16.2H2.8ZM13.8 2.8H16.2V16.2H13.8ZM2.8 13.8H7.55V16.2H2.8ZM10.45 13.8H16.2V16.2H10.45ZM7.8 7.8H13.55V10.2H7.8ZM16.45 7.8H21.2V10.2H16.45ZM18.8 7.8H21.2V21.2H18.8ZM7.8 18.8H21.2V21.2H7.8ZM7.8 7.8H10.2V21.2H7.8Z' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2.8 2.8 18.4 18.4'%3E%3Cpath d='M2.8 2.8H16.2V5.2H2.8ZM2.8 2.8H5.2V16.2H2.8ZM13.8 2.8H16.2V16.2H13.8ZM2.8 13.8H7.55V16.2H2.8ZM10.45 13.8H16.2V16.2H10.45ZM7.8 7.8H13.55V10.2H7.8ZM16.45 7.8H21.2V10.2H16.45ZM18.8 7.8H21.2V21.2H18.8ZM7.8 18.8H21.2V21.2H7.8ZM7.8 7.8H10.2V21.2H7.8Z' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---------- the apps ---------- */
.lk-main{flex:1;padding-top:32px}
.apps{list-style:none;margin:0;padding:0;display:grid;gap:12px}

/* The whole card is the link: the button's ::after covers it, so the tap target is the
   card while the link's name stays "Download Sonar on the App Store". The label sits in
   one inner span: as a flex item of its own, "Download " would lose its space. */
.app{position:relative;padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  transition:box-shadow .35s}
@media (hover:hover){.app:hover{box-shadow:0 22px 44px -28px rgba(18,18,18,.35)}}
.app__head{display:flex;align-items:center;gap:16px;margin-bottom:16px}
/* App Store icons are square and unrounded; this is the usual approximation of iOS's mask.
   The hairline keeps a white icon from melting into the white card. */
.app__icon{width:64px;height:64px;flex:none;border-radius:22.5%;box-shadow:0 0 0 1px var(--line)}
.app__name{font:400 1.75rem/1.1 var(--serif)}
.app__meta{margin-top:4px;font:500 .72rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.app__line{font-size:1.0625rem;line-height:1.5;text-wrap:pretty}
/* Break Chinese at its comma, not two characters from the end. */
.app__line--zh{margin-top:4px;color:var(--ink-2);font-size:1rem;word-break:keep-all;overflow-wrap:anywhere}
.app__price{margin-top:12px;color:var(--muted);font-size:.9375rem}
.app__cta{display:flex;align-items:center;justify-content:center;min-height:52px;margin-top:20px;padding:0 20px;
  background:var(--accent);color:#000;border-radius:var(--r-sm);font:600 1rem/1.2 var(--sans);text-align:center;
  text-decoration:none;transition:background-color .2s}
.app__cta::after{content:"";position:absolute;inset:0;border-radius:var(--r)}
.app:hover .app__cta{background:#DDB44A}
.app__cta:active{background:#D2A940}

/* ---------- footer ---------- */
.lk-foot{margin-top:48px;padding:24px 0 calc(32px + env(safe-area-inset-bottom));border-top:1px solid var(--line);
  color:var(--muted);font-size:.9375rem;text-align:center}
.lk-foot__help a{color:var(--ink);text-decoration-color:var(--accent-ink);text-underline-offset:3px}
.lk-foot__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 24px;margin-top:12px}
.lk-foot__nav a{color:var(--ink-2);text-decoration:none}
.lk-foot__nav a:hover{color:var(--ink)}
.lk-foot__c{margin-top:12px;color:var(--muted);font-size:.8125rem}

/* touch: 44px targets */
@media (pointer:coarse){
  .lk-foot a{display:inline-flex;align-items:center;min-height:44px}
  .lk-foot__nav,.lk-foot__c{margin-top:0}
}