/* The company's privacy and terms pages (/privacy/, /terms/), in the design of Tabdial's legal pages: the title on the
   blue canvas, the summary lying over its lower edge, the footer on the canvas again. */

/* Geist by Vercel, OFL-1.1, self-hosted (latin, variable weight). */
@font-face { font-family:"Geist"; src:url(/fonts/geist.woff2) format("woff2"); font-weight:100 900; font-display:swap; }

:root {
  --bg:#F4F4F6; --card:#FFFFFF; --ink:#0E0F14; --ink-2:#4B4F5C; --ink-3:#656A77; --line:#E1E2E8;
  --cobalt:#2B3BFF; --cobalt-text:#2B3BFF;
  --canvas:radial-gradient(55% 60% at 25% 20%, rgb(255 255 255 / .16), transparent 70%), radial-gradient(50% 60% at 95% 100%, rgb(10 16 120 / .55), transparent 70%), var(--cobalt);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --sans:"Geist", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans", "Microsoft YaHei", sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --lap:clamp(36px, 5vw, 64px);
  --gap:clamp(40px, 5vw, 64px);
  color-scheme:light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0C0D12; --card:#15171E; --ink:#EEEFF3; --ink-2:#A7ABB8; --ink-3:#8A8F9C; --line:#24262F;
    --cobalt-text:#9AA5FF;
    color-scheme:dark;
  }
}

* { box-sizing:border-box; }
html { scroll-padding-top:24px; }
body { margin:0; background:var(--bg); color:var(--ink); font:400 17px/1.65 var(--sans); -webkit-font-smoothing:antialiased; }
a { color:var(--cobalt-text); text-underline-offset:3px; }
:focus-visible { outline:2px solid var(--cobalt-text); outline-offset:3px; border-radius:6px; }
.wrap { max-width:1280px; margin:0 auto; padding-inline:clamp(20px, 4vw, 56px); }

.site-head, .top, .end { color:#fff; }
:is(.site-head, .top, .end) a { color:#fff; }
:is(.site-head, .top, .end) :focus-visible { outline-color:#fff; }
.top, .end { position:relative; overflow:hidden; isolation:isolate; border-radius:32px; background:var(--canvas); }
.top::after, .end::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:var(--grain); opacity:.22; mix-blend-mode:overlay; }

.site-head { position:absolute; inset:12px 12px auto; z-index:2; }
.site-head .wrap { display:flex; align-items:center; justify-content:space-between; height:76px; }
.logo { display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:600; font-size:18px; letter-spacing:-.02em; }
.logo svg { width:28px; height:28px; flex:none; }
.site-nav { display:flex; align-items:center; gap:24px; font-size:15px; white-space:nowrap; }
.site-nav a { text-decoration:none; color:rgb(255 255 255 / .82); }
.site-nav a:hover, .site-nav a[aria-current] { color:#fff; }
@media (max-width:640px) {
  .site-nav { gap:18px; }
  .site-nav a[href^="mailto:"], .site-nav a[href="/#work"] { display:none; }
}

.top { margin:12px 12px 0; padding-block:calc(76px + clamp(28px, 5vw, 72px)) calc(var(--lap) + clamp(32px, 4vw, 48px)); }
h1 { margin:0; max-width:17em; font-size:clamp(34px, 4.8vw, 64px); line-height:1.02; letter-spacing:-.045em; font-weight:600; text-wrap:balance; }
.updated { margin:18px 0 0; font-size:15px; color:rgb(255 255 255 / .8); }
@media (prefers-reduced-motion: no-preference) {
  h1, .updated, .summary { animation:rise .9s var(--ease) both; }
  .summary { animation-delay:.12s; }
}
@keyframes rise { from { opacity:0; transform:translateY(32px); } }

article { display:grid; grid-template-columns:minmax(0, 748px); padding-block:var(--gap) clamp(16px, 3vw, 40px); }
h2 { margin:38px 0 12px; font-size:26px; line-height:1.15; letter-spacing:-.03em; font-weight:600; text-wrap:balance; }
:lang(zh) h2, :lang(ja) h2 { letter-spacing:-.01em; line-height:1.25; }
.summary { position:relative; margin:calc(-1 * var(--lap) - var(--gap)) 0 40px; padding:clamp(22px, 3vw, 32px) clamp(22px, 3.2vw, 36px); background:var(--card); border-radius:24px; box-shadow:0 0 0 1px var(--line), 0 32px 64px -40px rgb(6 10 70 / .5); }
p, li { color:var(--ink-2); text-wrap:pretty; }
p { margin:0 0 14px; }
ul { margin:0 0 14px; padding-left:22px; }
li { margin-bottom:8px; }
li:last-child { margin-bottom:0; }
strong { color:var(--ink); font-weight:600; }
:lang(ja), :lang(zh) { line-break:strict; }

/* On wide screens each heading stands to the left of its part. */
@media (min-width:1200px) {
  article { grid-template-columns:minmax(0, 1fr) minmax(0, 748px); column-gap:64px; }
  article > * { grid-column:2; }
  article > h2 { grid-column:1; margin-bottom:0; overflow-wrap:anywhere; }
  article > h2, article > h2 + * { align-self:baseline; }
  article > h2 + * { margin-top:38px; }
  article > .summary { grid-column:1 / -1; min-height:8em; padding-left:calc(100% - 748px); }
  .summary > strong:first-child { position:absolute; left:36px; top:28px; width:calc(100% - 748px - 100px); font-size:26px; line-height:1.15; letter-spacing:-.03em; }
}

.end { margin:clamp(56px, 7vw, 104px) 12px 12px; font-size:14px; line-height:1.6; color:rgb(255 255 255 / .84); }
.end .wrap { display:flex; flex-wrap:wrap; gap:8px 24px; padding-block:32px 36px; }