/* The document voice of the same page: ink, bone, one signal-yellow accent, and
   the same division of faces index.html makes. Fraunces is the wordmark and
   nothing else, so nothing on these two pages is set in it: neither heading is
   the app's name, and a policy set in the signature face reads as the brand
   talking where it should read as the document. The prose is the system sans
   and the furniture is the mono, exactly as on the landing page. */
@font-face{font-family:'Plex Mono';src:url(/fonts/plexmono-400-latin.woff2) format('woff2');font-weight:400;font-display:swap;font-style:normal}
@font-face{font-family:'Plex Mono';src:url(/fonts/plexmono-500-latin.woff2) format('woff2');font-weight:500;font-display:swap;font-style:normal}

:root{
  --ink:#0B0A09;
  --bone:#F2EDE6;
  --muted:#8C8379;
  --faint:#514B45;
  --signal:#FFD60A;   /* Palette.signal, matching index.html */
  --flag:#E4553C;
  --prose-color:rgba(242,237,230,.84);
  --underline:rgba(242,237,230,.3);
  --rule:rgba(242,237,230,.1);
  --grain-blend:overlay;
  --grain-op:.03;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono:'Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  padding:56px 24px calc(72px + env(safe-area-inset-bottom));
  background:var(--ink);
  color:var(--prose-color);
  font-family:var(--sans);
  font-weight:400;
  font-size:16.5px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  background-image: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='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:var(--grain-op);
  mix-blend-mode:var(--grain-blend);
  pointer-events:none;
}

article{max-width:62ch;margin:0 auto}

.home{
  display:inline-block;
  margin-bottom:44px;
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  text-decoration:none;
}
.home:hover{color:var(--bone)}

h1{
  margin:0;
  font-size:clamp(34px,7vw,46px);
  font-weight:600;
  letter-spacing:-.022em;
  line-height:1.05;
  color:var(--bone);
}
.stamp{
  margin:14px 0 0;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}
.lede{
  margin:26px 0 0;
  font-size:clamp(18px,4vw,21px);
  font-weight:350;
  letter-spacing:-.008em;
  line-height:1.55;
  color:var(--bone);
  text-wrap:balance;
}

h2{
  margin:44px 0 0;
  font-size:12px;
  font-family:var(--mono);
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--signal);
}
h2 + p{margin-top:12px}
p{margin:16px 0 0}
ul{margin:14px 0 0;padding-left:20px}
li{margin:8px 0 0}
strong{font-weight:600;color:var(--bone)}
a{color:var(--bone);text-decoration:underline;text-decoration-color:var(--underline);text-underline-offset:3px}
a:hover{text-decoration-color:var(--signal)}

hr{
  margin:52px 0 0;
  border:0;
  border-top:1px solid var(--rule);
}
footer{
  margin:22px 0 0;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--faint);
}
footer a{color:var(--faint);text-decoration:none}
footer a:hover{color:var(--muted)}

/* The light half is white, and the yellow keeps its exact value the way it
   does on the landing page. It cannot be the colour of these headings there:
   #FFD60A is 1.4:1 on white, and a heading is the last thing that may be
   guessed at. Nor can it be the highlighter the trade line wears, because
   there are ten section heads down this page and ten marks is not a marked
   page, it is a yellow one. It is a block set before the heading instead,
   which is the shape the whole mark is built out of.

   --flag moves too: film red is 3.1:1 on white, and the one colour in these
   two pages whose job is to be impossible to miss cannot be the one that goes
   quiet. */
@media (prefers-color-scheme:light){
  :root{
    --ink:#FFFFFF;
    --bone:#14110F;
    --muted:#6B635A;
    --faint:#A79C8F;
    --signal:#FFD60A;
    --flag:#A8341B;
    --prose-color:rgba(20,17,15,.8);
    --underline:rgba(20,17,15,.26);
    --rule:rgba(20,17,15,.1);
    --grain-blend:multiply;
    --grain-op:.016;
  }
  h2{color:var(--bone)}
  h2::before{
    content:"";
    display:inline-block;
    width:.58em;
    height:.58em;
    margin-right:.7em;
    /* Inline-block sits on the baseline, which for a block is a little under
       the cap line it is standing beside. */
    vertical-align:.04em;
    background:var(--signal);
  }
  /* A yellow underline is not there at all on white. */
  a:hover{text-decoration-color:var(--bone)}
}

/* Anything still to be filled in is meant to be impossible to publish by
   accident. */
.todo{
  color:var(--flag);
  font-weight:600;
  border-bottom:1px dashed var(--flag);
}