/* ==========================================================================
   relationalnotes.com — the whole stylesheet

   Tokens, type scale and rhythm are taken from ../design/system.md, so the
   site and the app agree rather than being two visual languages that happen
   to share a name. Where a value here differs from that file it is because a
   website is read at arm's length and a phone is not; those are marked.

   No external resources. No fonts fetched, no images, no script. That is not
   minimalism for its own sake — it is what lets the Content-Security-Policy
   in vercel.json be `default-src 'none'`, which turns "no trackers" from a
   promise on the privacy page into something a stranger can verify from the
   response headers.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
/* Light values are design/system.md §2 verbatim. The dark counterparts are
   the ones that file says exist for every token. */
:root{
  --rhythm:10px;

  --page:#F2F2F7;                  /* --sys-bg   grouped background */
  --card:#FFFFFF;                  /* --grouped  card / row ground */
  --ink:#000000;                   /* --label    primary text */
  --ink-2:rgba(60,60,67,.60);      /* --label-2  secondary text */
  --ink-3:rgba(60,60,67,.32);      /* --label-3  captions */
  --sep:rgba(60,60,67,.20);        /* --sep      row separators */
  --hairline:rgba(60,60,67,.29);   /* --hairline structural edges */
  --blue:#007AFF;                  /* --blue     settled / commit only */
  --blue-tint:rgba(0,122,255,.10);

  /* Site-only. The TODO marker is deliberately loud: an unfilled legal field
     that looks finished is the failure mode this styling exists to prevent. */
  --todo-ink:#8A5300;
  --todo-bg:rgba(255,159,10,.16);
}

@media (prefers-color-scheme: dark){
  :root{
    --page:#000000;
    --card:#1C1C1E;
    --ink:#FFFFFF;
    --ink-2:rgba(235,235,245,.60);
    --ink-3:rgba(235,235,245,.32);
    --sep:rgba(84,84,88,.60);
    --hairline:rgba(84,84,88,.72);
    --blue:#0A84FF;
    --blue-tint:rgba(10,132,255,.20);

    --todo-ink:#FFB340;
    --todo-bg:rgba(255,159,10,.18);
  }
}

/* ------------------------------------------------------------------ base */
*{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--page);
  color:var(--ink);
  /* The app's face. San Francisco where it exists, and a real fallback stack
     everywhere else — no webfont is fetched. */
  font:400 17px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* One column, one measure. design/system.md's website ledger line 16: body
   text has a measure. 34rem lands at roughly 62 characters at 17px. */
.wrap{
  max-width:34rem;
  margin:0 auto;
  padding:0 calc(var(--rhythm) * 2);
}

a{color:var(--blue)}
a:hover{text-decoration:none}

:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
  border-radius:3px;
}

/* -------------------------------------------------------------- masthead */
.mast{
  padding:calc(var(--rhythm) * 3) 0 calc(var(--rhythm) * 2);
}

.wordmark{
  display:inline-block;
  color:var(--ink);
  text-decoration:none;
  font-size:17px;         /* design/system.md §4, screen title */
  font-weight:640;
  letter-spacing:-.01em;
}

.wordmark:hover{color:var(--blue)}

/* ------------------------------------------------------------------ type */
/* design/system.md §4 allows five sizes and says a sixth needs a reason.
   The reason: 17px is a phone's title size held eight inches from the eye.
   A page title read at arm's length on a 27" display needs its own step, so
   h1 is the one addition and every other size below is from that table. */
h1{
  margin:0 0 calc(var(--rhythm) * 2);
  font-size:28px;
  line-height:1.2;
  font-weight:640;
  letter-spacing:-.02em;
}

h2{
  margin:calc(var(--rhythm) * 4) 0 var(--rhythm);
  font-size:17px;         /* §4, screen title */
  line-height:1.35;
  font-weight:640;
  letter-spacing:-.01em;
}

h3{
  margin:calc(var(--rhythm) * 3) 0 calc(var(--rhythm) * .5);
  font-size:15px;         /* §4, body / list row, at the heavier weight */
  line-height:1.4;
  font-weight:620;
  letter-spacing:-.012em;
}

p{
  margin:0 0 var(--rhythm);
  color:var(--ink-2);
}

p strong,li strong{color:var(--ink);font-weight:620}

/* The caption. design/system.md §4 verbatim: 11px, 660, .075em, uppercase. */
.caption{
  margin:0 0 var(--rhythm);
  font-size:11px;
  font-weight:660;
  letter-spacing:.075em;
  text-transform:uppercase;
  color:var(--ink-3);
}

ul{
  margin:0 0 var(--rhythm);
  padding-left:calc(var(--rhythm) * 2);
  color:var(--ink-2);
}

li{margin-bottom:calc(var(--rhythm) * .6)}

/* ------------------------------------------------------------------ lede */
/* The one paragraph on a page that is allowed to be ink rather than ink-2. */
.lede{
  color:var(--ink);
  font-size:19px;
  line-height:1.45;
  letter-spacing:-.01em;
  margin-bottom:calc(var(--rhythm) * 2);
}

/* ------------------------------------------------------------------ card */
.card{
  background:var(--card);
  border-radius:12px;
  padding:calc(var(--rhythm) * 2);
  margin:calc(var(--rhythm) * 2) 0;
}

/* design/system.md §3: every container holds as much as it costs. The claim
   card is the only card on the site because the claim is the only thing that
   earns being lifted off the ground. */
.claim{
  color:var(--ink);
  font-size:17px;
  line-height:1.45;
  letter-spacing:-.008em;
  margin:0;
}

/* The four supporting lines, identical on every surface. */
.lines{
  list-style:none;
  margin:0;
  padding:0;
}

.lines > li{
  margin:0;
  padding:calc(var(--rhythm) * 1.6) 0;
  border-top:1px solid var(--sep);
  color:var(--ink-2);
  font-size:15px;          /* §4, body */
  line-height:1.5;
  letter-spacing:-.008em;
}

.lines > li:first-child{border-top:0;padding-top:0}
.lines > li:last-child{padding-bottom:0}

/* ------------------------------------------------------------- next page */
.next{
  margin:calc(var(--rhythm) * 4) 0 0;
  padding-top:calc(var(--rhythm) * 2);
  border-top:1px solid var(--sep);
}

.next a{
  display:block;
  padding:calc(var(--rhythm) * 1.2) 0;
  text-decoration:none;
  font-size:17px;
  letter-spacing:-.012em;
}

.next a + a{border-top:1px solid var(--sep)}
.next a:hover{text-decoration:underline}
.next .why{display:block;color:var(--ink-3);font-size:15px;letter-spacing:-.008em}

/* ----------------------------------------------------------------- email */
.email{
  display:inline-block;
  font-size:19px;
  letter-spacing:-.01em;
  padding:calc(var(--rhythm) * .4) 0;
}

/* ------------------------------------------------------------------ todo */
/* Unfilled fields a stranger must not see on a live page. Loud on purpose. */
.todo{
  display:inline-block;
  padding:1px 6px;
  border-radius:4px;
  background:var(--todo-bg);
  color:var(--todo-ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:14px;
  letter-spacing:0;
}

/* ---------------------------------------------------------------- footer */
/* design/system.md §3: dead space is a defect and is hunted explicitly. The
   first cut put 60px of nothing between the last link and the footer rule,
   which read as unfinished rather than as air. 30px is the same rhythm and
   reads as a boundary. */
footer{
  margin-top:calc(var(--rhythm) * 3);
  padding:calc(var(--rhythm) * 3) 0 calc(var(--rhythm) * 6);
  border-top:1px solid var(--sep);
  color:var(--ink-3);
  font-size:13px;
  line-height:1.6;
}

footer p{color:inherit;margin:0 0 calc(var(--rhythm) * .4)}
footer a{color:var(--ink-2)}

/* ------------------------------------------------------------- narrow vp */
@media (max-width:420px){
  body{font-size:16px}
  h1{font-size:24px}
  .lede{font-size:17px}
  .wrap{padding:0 calc(var(--rhythm) * 1.6)}
}

/* ------------------------------------------------------------------ misc */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}