/* ── the legal pages ─────────────────────────────────────────────────────────
   Terms, privacy, and how to delete your data. Three static HTML files served
   by a rewrite in vercel.json, so they never touch the app bundle and never
   pay for it: somebody who follows a legal link from an app store listing or
   an email footer gets one document and one stylesheet.

   That is also why this file exists rather than three copies of it inline.

   ── the system, at document scale ──
   app/src/wall/wall.css, and every value here is one of its tokens. It cannot
   import them, because a static page is outside the bundle, so they are
   restated once, here, and nowhere else in this folder.

   Three things changed when the product's own type ruling did
   (design/DESIGN.md section 4, "explanation is reading, not mechanics"): the
   body of a legal page is set in the reading face at 17px rather than in the
   interface face at 15.5, the ground carries the same halo and grain every
   other surface stands on, and the bar at the top carries the other two
   documents, because a person who has found one of these pages usually wants
   a second one.

   What has not changed is the brief. A legal document is the one surface in
   the product with no art direction to do. It owes the reader a measure they
   can hold, a hierarchy they can scan, and nothing moving. ═══════════════ */

:root {
  --void: #08070B;
  --void-1: #0D0C12;
  --chalk: #F4F1EA;
  --ash: #9C978E;
  --ash-dim: #605C55;
  --hair: rgba(244, 241, 234, 0.09);
  --hair-soft: rgba(244, 241, 234, 0.05);
  --accent: #74C7DE;
  --r-card: 18px;
  --r-pill: 999px;
  --ease: cubic-bezier(0.16, 1, 0.30, 1);
  --f-display: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --f-letter: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --f-util: 'Inter Tight', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-id: 'Geist Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }

body {
  margin: 0;
  background: var(--void);
  color: var(--ash);
  font-family: var(--f-letter);
  font-optical-sizing: auto;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── the ground ──
   The room the rest of the product stands in, with the moving half taken out:
   the halo, and the grain over it. No canvas, no shader, no script. Without
   the grain the black is a screen that is off; with it, it is a room. */
.ground { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.ground::before,
.ground::after { content: ''; position: absolute; inset: 0; }
.ground::before {
  background:
    radial-gradient(58% 40% at 62% 0%, rgba(255, 244, 228, 0.055) 0%, rgba(255, 244, 228, 0) 68%),
    radial-gradient(46% 34% at 12% 34%, rgba(190, 205, 255, 0.035) 0%, rgba(190, 205, 255, 0) 70%);
}
.ground::after {
  opacity: 0.036;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.84' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 190px 190px;
}

/* ── the column ──
   640px. At 17px in a transitional serif that is a little over seventy
   characters, which is a measure a person can read a page of. */
.wrap {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 22px 96px;
  padding-top: max(0px, env(safe-area-inset-top));
}
@media (max-width: 359px) { .wrap { padding-left: 16px; padding-right: 16px; } }

a { color: var(--chalk); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
::selection { background: rgba(116, 199, 222, 0.22); color: var(--chalk); }

/* ── the bar ──
   Main's bar, and it has to be Main's bar: the brand on the left and you on
   the right, the same two objects in the same two places the front door, the
   flow screens and the wall carry them (main/TopBar.jsx, DESIGN.md 3.6). A
   legal page that signs itself differently is a fourth signature for one
   product, and it is the page a person is most likely to arrive at from
   outside it.

   The three documents used to sit where the chip is. They are in the contents
   block now, with the sections, because which document you want is a question
   about the reading rather than about the product. */
.bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 18px 0 6px;
}

/* the lockup: the mark and the word drawn on one grid at one pixel a cell,
   25 tall, as every bar draws it (app/src/wall/brand.js, written to
   /lockup.svg by scripts/export-mark.mjs), with the close bloom a lit thing
   has on the phone. A picture and not type, so there is no face to wait for
   and nothing to lift onto a baseline. A press drops it a pixel. */
.brand { display: inline-flex; align-items: center; color: var(--chalk); text-decoration: none; }
.brand img {
  display: block; width: 112px; height: 33px;
  filter: drop-shadow(0 0 3px rgba(255, 244, 228, 0.3)) drop-shadow(0 0 9px rgba(255, 244, 228, 0.1));
}
.brand:hover { color: var(--chalk); }
.brand:active { transform: translateY(1px); }

/* ── you, on the right ──
   parts.jsx `Me` as a static anchor: the ghost capsule, the handle in the
   identifier face once this browser has proved one, and the way in before
   that. legal.js is what turns the second into the first, and it is the only
   script these pages load. Without it the chip is the signed out state, which
   is what Main's bar shows before its own session resolves. */
.me {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 34px; padding: 0 14px;
  border: 1px solid rgba(244, 241, 234, 0.22); border-radius: var(--r-pill);
  font-family: var(--f-util); font-size: 12.5px; font-weight: 500; letter-spacing: 0.008em;
  color: var(--chalk); text-decoration: none; white-space: nowrap;
  transition: border-color 220ms var(--ease), color 220ms var(--ease);
}
.me:hover { border-color: rgba(244, 241, 234, 0.4); color: var(--chalk); }
/* a handle is an identifier, and it keeps its own face and its own case */
.me.is-on { font-family: var(--f-id); font-size: 12px; letter-spacing: 0.01em; }

/* ── the head ── */
h1 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(30px, 8.8vw, 39px);
  line-height: 1.06;
  letter-spacing: -0.022em;
  color: var(--chalk);
  text-wrap: balance;
  margin: 34px 0 0;
}
.updated {
  font-family: var(--f-id); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ash-dim); margin: 14px 0 0;
}
.lead { color: var(--chalk); font-size: 19px; line-height: 1.5; margin: 22px 0 0; }

/* ── the contents ──
   Two columns of identifiers, between hairlines. Nobody reads a legal page
   from the top; they arrive looking for one section of it. */
.toc {
  margin: 30px 0 0; padding: 14px 0;
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
}
/* the three documents, at the head of the block, above this one's sections */
.docs { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.docs a {
  font-family: var(--f-id); font-size: 10.5px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ash-dim); text-decoration: none;
  transition: color 200ms var(--ease);
}
.docs a:hover { color: var(--chalk); }
.docs a[aria-current='page'] { color: var(--chalk); }
.docs + ol { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hair); }
.toc ol {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 20px;
}
@media (max-width: 439px) { .toc ol { grid-template-columns: 1fr; } }
.toc a {
  display: flex; gap: 9px;
  font-family: var(--f-util); font-size: 12.5px; line-height: 1.35;
  color: var(--ash); text-decoration: none;
}
.toc a:hover { color: var(--chalk); }
.toc .n { font-family: var(--f-id); font-size: 11px; color: var(--ash-dim); }
/* the contents is a list of destinations, not a list of points: it does not
   take the rule the body's bullets carry */
.toc li { margin: 0; padding-left: 0; }
.toc li::before { content: none; }

/* ── a section ── */
section { margin: 40px 0 0; }
h2 {
  display: flex; gap: 10px; align-items: baseline;
  font-family: var(--f-id);
  font-weight: 400; font-size: 10.5px;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ash);
  margin: 0 0 10px;
}
h2 .n { color: var(--ash-dim); }
h3 {
  font-family: var(--f-util); font-weight: 500; font-size: 14px;
  letter-spacing: 0.004em; color: var(--chalk); margin: 22px 0 0;
}

p { margin: 14px 0 0; }
ul { margin: 14px 0 0; padding-left: 0; list-style: none; }
li { margin: 10px 0 0; padding-left: 18px; position: relative; }
/* A rule rather than a bullet: the product has one ornament and this is not
   the place to introduce a second. */
li::before {
  content: ''; position: absolute; left: 0; top: 0.78em;
  width: 8px; height: 1px; background: var(--ash-dim);
}
strong { color: var(--chalk); font-weight: 500; }
em { font-style: normal; color: var(--chalk); }
h2 + p, h2 + ul, h2 + .defs, h2 + .act { margin-top: 0; }

/* ── a list where the left column is the thing itself ──
   What we hold, and how long we hold it. The left side is an identifier, so
   it is set in the identifier face. */
.defs { margin: 14px 0 0; border-top: 1px solid var(--hair-soft); }
.defs > div {
  display: grid; grid-template-columns: 1fr; gap: 3px;
  padding: 12px 0; border-bottom: 1px solid var(--hair-soft);
}
@media (min-width: 560px) {
  .defs > div { grid-template-columns: 150px minmax(0, 1fr); gap: 20px; }
}
.defs dt {
  font-family: var(--f-id); font-size: 12px; line-height: 1.5;
  letter-spacing: -0.01em; color: var(--chalk);
}
.defs dd { margin: 0; font-size: 16px; line-height: 1.55; }

/* ── the one thing worth pulling out of the flow ──
   The sentence somebody came here to act on. One filled sheet per page and no
   more: the ration on a bright object holds on a document too. */
.act {
  margin: 24px 0 0; padding: 18px 20px 20px;
  border: 1px solid var(--hair); border-radius: var(--r-card);
  background: var(--void-1);
}
.act .k {
  display: block; font-family: var(--f-id); font-size: 10.5px;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--ash-dim);
  margin-bottom: 10px;
}
.act p { margin: 0; color: var(--chalk); }
.act p + p { margin-top: 10px; }
/* The one control on a page of prose, and it is the product's own: wall.css
   `.wl-pill.is-light.is-wide`, the filled capsule every primary act in the
   build is. It used to be a link set in the display face, which is a sentence
   somebody has to decide is a control. A person who came to this page to make
   something stop should not have to read to find the way to do it. */
.act .go {
  display: flex; align-items: center; justify-content: center;
  /* full width on a phone, and capped on a desktop: the column here is wider
     than the 460px measure Main's controls are drawn for, and a 600px capsule
     is a wider button than anything else in the product. */
  width: 100%; max-width: 360px; margin-left: auto; margin-right: auto;
  min-height: 50px; padding: 0 22px; margin-top: 16px;
  border-radius: var(--r-pill); border: 0;
  background: var(--chalk); color: #14131A;
  font-family: var(--f-util); font-size: 15px; font-weight: 500; letter-spacing: 0.008em;
  text-decoration: none; white-space: nowrap;
  transition: background 220ms var(--ease), transform 220ms var(--ease);
}
.act .go:hover { background: #FFFDF8; color: #14131A; }
.act .go:active { transform: scale(0.985); }
/* what the button is about to do, under it, in the identifier face */
.act .at {
  display: block; margin-top: 10px; text-align: center;
  font-family: var(--f-id); font-size: 11.5px; letter-spacing: 0.01em; color: var(--ash);
}

/* ── the foot of the site ──
   The same block the front door and the wall end on (wall.css
   `.wl-colophon`), restated here because a static page cannot import it: the
   lockup and the sentence on one line, two short columns, and the company's
   line. */
.colophon {
  margin: 52px 0 0; padding: 14px 0 0; border-top: 1px solid var(--hair);
  display: grid; grid-template-columns: 1fr; gap: 12px;
}
.colophon-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.colophon-line {
  margin: 0; flex: 1 1 200px; min-width: 0;
  font-family: var(--f-letter); font-size: 13.5px; line-height: 1.4; color: var(--ash);
}
.colophon-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.colophon-col { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.colophon-col h2 { margin: 0 0 1px; color: var(--ash-dim); }
.colophon-col a, .colophon-col address {
  font-family: var(--f-util); font-size: 12.5px; line-height: 1.4; font-style: normal;
  color: var(--ash); text-decoration: none;
}
.colophon-col a:hover { color: var(--chalk); }
.colophon-col a.id { font-family: var(--f-id); font-size: 12px; letter-spacing: 0.01em; }
.colophon-foot {
  display: flex; flex-wrap: wrap; gap: 3px 16px;
  padding-top: 8px; border-top: 1px solid var(--hair-soft);
  font-family: var(--f-id); font-size: 10px; letter-spacing: 0.06em; line-height: 1.5;
  color: var(--ash-dim);
}

/* ── printed ──
   These three are the pages in the product most likely to be printed or saved
   as a PDF, usually by somebody who wants a copy of what they agreed to. On
   paper the room is wrong, so it goes, and every link says where it went. */
@media print {
  .ground, .me, .docs, .toc { display: none; }
  body { background: #fff; color: #17150F; font-size: 11pt; line-height: 1.5; }
  .wrap { max-width: none; padding: 0; }
  .bar { border-bottom: 1px solid #C9C4BA; padding-top: 0; }
  h1, .lead, strong, em, .brand, .act p, .defs dt { color: #17150F; }
  .updated, h2, h2 .n, .colophon-foot, .colophon-col h2 { color: #6A6357; }
  a { color: #17150F; }
  .act { background: none; border-color: #C9C4BA; break-inside: avoid; }
  .act .go { background: none; border: 1px solid #17150F; color: #17150F; }
  .defs, .defs > div { border-color: #E3DFD6; }
  section { break-inside: avoid; }
  /* the lockup is drawn in chalk, which is invisible on paper */
  .brand img { filter: invert(1); }
  /* Only the document's own links are annotated. The lockup and the foot are
     furniture, and a page footer that prints its own address four times is
     the kind of thing that makes a printout look like a fax. */
  section a[href^='/']::after, .act a[href^='/']::after { content: ' (celestual.us' attr(href) ')'; }
  section a[href^='mailto:']::after { content: ' (' attr(href) ')'; }
  section a::after, .act a::after {
    font-family: var(--f-id); font-size: 8.5pt; color: #6A6357; word-break: break-all;
  }
}