/* The site's text pages (support, terms, privacy, the 404): the home page's
   ember header and footer round a paper body, on the same four-column grid.
   Each part's heading sits in the first column under a rule, its text beside
   it. The home page keeps its own styles, inline. */
:root {
  --ember: #e8562a; --ink: #130a06; --paper: #fff5ef; --soft: rgb(19 10 6 / 0.62); --rule: rgb(19 10 6 / 0.85); --hair: rgb(19 10 6 / 0.14);
  --out: cubic-bezier(0.16, 1, 0.3, 1);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--ember); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.55 var(--sans);
       -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; }
/* The 404 is all ember, with the footer kept to the bottom of the window. */
body.short { background: var(--ember); min-height: 100svh; display: flex; flex-direction: column; }
body.short .masthead { flex: 1; }
::selection { background: var(--ink); color: var(--paper); }
a { color: inherit; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }
.grid { max-width: 1440px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; }

/* Header and title, on ember */
.masthead { background: var(--ember); }
.top { padding-top: 22px; padding-bottom: 14px; font-size: 14px; font-weight: 600; }
.top > * { position: relative; padding-top: 12px; text-decoration: none; }
.top > *::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--rule); }
.brand { display: flex; align-items: center; gap: 10px; letter-spacing: 0.28em; font-weight: 800; }
.logo { flex: none; width: 22px; height: 22px; fill: var(--ink); }
.top .r { text-align: right; }
.u { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size 0.45s var(--out); padding-bottom: 1px; }
.arrow { display: inline-block; transition: translate 0.45s var(--out); }
@media (hover: hover) { a:hover .u { background-size: 100% 1.5px; } a:hover .arrow { translate: 3px 0; } }

.head { padding-top: clamp(40px, 7vw, 104px); padding-bottom: clamp(44px, 6vw, 88px); }
.head > * { grid-column: 1 / -1; }
.kicker { margin: 0 0 22px; font-size: 14px; font-weight: 700; }
h1 { margin: 0; max-width: 11em; font-size: clamp(52px, 8.5vw, 128px); font-weight: 800; line-height: 0.9; letter-spacing: -0.055em; text-wrap: balance; }
/* The full stop is drawn, not set: without SF Pro (Windows, Android) the fallback font's is square. */
h1::after { content: ""; display: inline-block; width: 0.17em; height: 0.17em; margin-left: 0.09em; border-radius: 50%; background: var(--paper); vertical-align: baseline; }
.lede { grid-column: 1 / 4; margin: 30px 0 0; max-width: 34em; font-size: clamp(19px, 1.7vw, 24px); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; text-wrap: pretty; }
.meta { margin: 26px 0 0; font-size: 14px; font-weight: 600; color: var(--soft); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 36px; }
.button { display: inline-flex; align-items: center; gap: 16px; background: var(--ink); color: var(--paper); text-decoration: none; font-weight: 700; font-size: 17px;
          padding: 15px 18px; border-radius: 2px; transition: background-color 0.3s, scale 0.2s var(--out); }
.button:active { scale: 0.985; }
@media (hover: hover) { .button:hover { background: #000; } }
.actions a:not(.button) { font-weight: 700; text-decoration: none; }

/* The 404's mark, turning in 3D beside the words: the opt-in parody's 80
   frames stacked, each shown for its slice of an 8-second turn, sized to
   fill its two columns without pushing the footer out of a short window.
   In paper, so the dense glyphs read as the lit side. */
.lost { align-items: center; }
.lost > .say { grid-column: 1 / 3; }
.spin { grid-column: 3 / -1; container-type: inline-size; }
.spin > div { position: relative; margin: 0 auto; width: calc(var(--cols) * 1ch); height: calc(var(--rows) * 1em);
              font: 700 min(18px, 100cqi / var(--cols) / 0.61, (100svh - 340px) / var(--rows))/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--paper); }
.spin pre { position: absolute; inset: 0; margin: 0; font: inherit; visibility: hidden;
            animation: frame 8s linear infinite; animation-delay: calc((var(--i) - 80) * 0.1s); }
@keyframes frame { 0% { visibility: visible; } 1.25%, 100% { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .spin pre { animation: none; }
  .spin pre[style="--i:26"] { visibility: visible; }
}

/* The document, on paper */
.doc { padding-top: 40px; padding-bottom: 104px; }
.part { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; position: relative; padding: 26px 0 34px; }
.part::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--rule); }
.part > h2 { grid-column: 1; margin: 0; padding-right: 16px; font-size: 22px; line-height: 1.15; letter-spacing: -0.025em; font-weight: 800; text-wrap: balance; }
.part > .body { grid-column: 2 / 4; }
.part.lead::before { display: none; }
.body > :first-child { margin-top: 0; }
.body > :last-child { margin-bottom: 0; }
.body p, .body ul, .body ol { margin: 0 0 14px; max-width: 38em; text-wrap: pretty; }
.body ul, .body ol { padding-left: 1.2em; }
.body li { margin-bottom: 6px; }
.body li::marker { color: var(--ember); }
.body h3 { margin: 30px 0 8px; font-size: 18px; line-height: 1.25; letter-spacing: -0.015em; }
.body a { text-decoration: underline; text-decoration-color: var(--ember); text-decoration-thickness: 2px; text-underline-offset: 3px; transition: text-decoration-color 0.2s; }
@media (hover: hover) { .body a:hover { text-decoration-color: var(--ink); } }
.body strong { font-weight: 700; }
.body code { font: 0.84em/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; overflow-wrap: anywhere; }
/* A summary, set on ember. */
.panel { background: var(--ember); padding: 22px 26px; border-radius: 2px; }
.panel ul { margin: 0; }
.panel li::marker { color: var(--ink); }
table { width: 100%; border-collapse: collapse; margin: 10px 0 18px; font-size: 15px; line-height: 1.45; }
th, td { text-align: left; vertical-align: top; padding: 10px 16px 10px 0; border-bottom: 1px solid var(--hair); }
th { font-size: 13px; font-weight: 700; color: var(--soft); border-bottom: 2px solid var(--rule); }

/* Footer, on ember */
footer { background: var(--ember); }
footer .grid { display: flex; flex-wrap: wrap; gap: 8px 28px; padding-top: 18px; padding-bottom: 36px; font-size: 13px; font-weight: 600; white-space: nowrap; }
footer a { text-decoration: none; }
footer .r { margin-left: auto; }
footer a:focus-visible { outline: none; }
footer a:focus-visible .u { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }

@media (max-width: 900px) {
  .top { font-size: 13px; }
  .top > :nth-child(2) { grid-column: 2 / 4; }
  .top > :nth-child(3) { display: none; }
  .lede { grid-column: 1 / -1; }
  .lost > .say, .spin { grid-column: 1 / -1; }
  .spin { margin-top: 36px; }
  .part > h2 { grid-column: 1 / -1; margin-bottom: 14px; }
  .part > .body { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr 1fr; }
  .top > :nth-child(2) { display: none; }
  footer .r { margin-left: 0; }
  .lost { padding-bottom: 32px; }
  table, thead, tbody, tr, th, td { display: block; }
  thead { display: none; }
  tr { padding: 10px 0; border-bottom: 1px solid var(--hair); }
  td { border: 0; padding: 2px 0; }
  td:first-child { font-weight: 700; }
}
@media (max-width: 560px) {
  .grid { padding-left: 16px; padding-right: 16px; column-gap: 16px; }
  body { font-size: 16px; }
  .panel { padding: 18px 20px; }
}