/* Inner pages (privacy, terms, support, deletion, join), in the home page's look:
   orange header band, cream reading column, dark footer. Fonts are the home page's subsets. */
@font-face{font-family:Quando;font-display:swap;src:url(/home/Quando-Regular.woff) format('woff')}
@font-face{font-family:Nunito;font-display:swap;font-weight:400;src:url(/home/Nunito-Regular.woff) format('woff')}
@font-face{font-family:Nunito;font-display:swap;font-weight:600;src:url(/home/Nunito-SemiBold.woff) format('woff')}
@font-face{font-family:Nunito;font-display:swap;font-weight:700 900;src:url(/home/Nunito-Bold.woff) format('woff')}
:root{--cream:#FFF9EE;--char:#1B1917;--orange:#F2481F;--ink:#2A1E17;--ink-soft:#6E5D50;--link:#B5330F;--peach:#FFE2B8;--line:#EADBC9;
  --gutter:max(24px,calc(50% - 360px));color-scheme:light}
*{box-sizing:border-box}
html{background:var(--char)}
body{margin:0;background:var(--cream);color:var(--ink);font:400 17px/1.65 Nunito,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--link);text-underline-offset:2px}
/* Short pages (join) keep the cream column down to a footer pinned at the bottom. */
body{min-height:100vh;display:flex;flex-direction:column}
main{flex:1;display:flex;flex-direction:column}
main>:nth-last-child(2){margin-bottom:72px}
main>.button,main>.code{align-self:flex-start}
main>.button{margin-bottom:16px}
/* Flex children do not collapse margins, so headings carry less top margin than in normal flow. */
main>*{margin-left:var(--gutter);margin-right:var(--gutter)}

/* Header band */
main>header{margin:0 0 40px;padding:22px var(--gutter) 44px;color:var(--cream);
  background:radial-gradient(70% 120% at 80% 30%,#FF6A3D 0%,var(--orange) 55%,#D63A14 100%)}
.brand{display:inline-flex;align-items:center;gap:12px;color:var(--cream);text-decoration:none;font:22px/1.1 Quando,serif}
.brand img{width:40px;height:40px;border-radius:22.5%;box-shadow:0 0 0 2px rgba(255,249,238,.6)}
.brand small{display:block;font:800 11px/1.4 Nunito,sans-serif;letter-spacing:2px;text-transform:uppercase;color:var(--peach)}
h1,h2{font-family:Quando,serif;font-weight:400;letter-spacing:-.3px}
h1{font-size:clamp(34px,6vw,48px);line-height:1.1;margin:40px 0 12px}
main>header p{margin:0;color:rgba(255,249,238,.92);font-weight:600;max-width:52ch}
main>header nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
main>header nav a{color:var(--cream);text-decoration:none;font-weight:800;font-size:14px;padding:7px 14px;border-radius:99px;
  background:rgba(255,249,238,.14);box-shadow:inset 0 0 0 1px rgba(255,249,238,.35)}
main>header nav a:hover{background:rgba(255,249,238,.26)}

/* Reading column */
h2{font-size:26px;line-height:1.2;margin-top:24px;margin-bottom:8px;color:var(--ink)}
p,ul,ol{margin-top:0;margin-bottom:16px}
strong{font-weight:700}
.button,button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:11px 22px;border:0;border-radius:99px;cursor:pointer;
  font:800 16px/1.2 Nunito,sans-serif;text-decoration:none;color:#fff;background:linear-gradient(135deg,#FF6A3D,var(--orange));
  box-shadow:0 10px 22px -10px rgba(214,58,20,.7),inset 0 1px 0 rgba(255,255,255,.3)}
.button:hover,button:hover{filter:brightness(1.05)}
.code{display:inline-block;font:700 28px/1.2 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.1em;word-break:break-all;
  padding:14px 22px;border-radius:18px;background:#fff;box-shadow:0 10px 24px -12px rgba(60,25,5,.35),inset 0 0 0 1px var(--line)}

/* Footer band */
main>footer{margin:auto 0 0;padding:28px var(--gutter) 40px;background:var(--char);color:rgba(255,249,238,.72);font-size:14px}
main>footer a{color:var(--peach)}