/* The site's brand, direction A, "Made to order" (decision 2826): its faces,
   its tokens and the components the home page shares with what follows it.
   The display and text faces are the site's own files (decision 2829); the
   installed faces after them in each stack stand in only while they load. The
   mono is the reader's own system monospace (decision 2835). */

@font-face {
  font-family: "Fraunces";
  src: url("fonts/Fraunces-normal-100-900.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("fonts/Fraunces-italic-100-900.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Alegreya Sans";
  src: url("fonts/AlegreyaSans-normal-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Alegreya Sans";
  src: url("fonts/AlegreyaSans-normal-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #f5eee2;
  --card: #fffaf2;
  --kraft: #ebdfca;
  --ink: #2b2118;
  --walnut: #5c4d3f;
  --kiln: #b13c1f;
  --kiln-bright: #c4462a;
  --sage: #355c31;
  --mustard: #e0a83a;
  --dust: #d9c8ad;

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --text: "Alegreya Sans", "Seravek", "Gill Sans", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --measure: 1240px;
  --gutter: clamp(20px, 4vw, 56px);

  color-scheme: light;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { background: var(--paper) url("grain.svg"); color: var(--ink); }

body {
  margin: 0;
  font-family: var(--text);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { list-style: none; margin: 0; padding: 0; }
svg { display: block; }

/* A link's corners are round, which only its focus ring shows (it has no
   ground or edge); a button or the skip link writes its own. */
a { color: var(--ink); text-decoration-color: var(--kiln); text-decoration-thickness: 2px; text-underline-offset: 4px; border-radius: 4px; }
a:hover { text-decoration-style: wavy; }
/* The focus ring, on exactly the elements the site makes focusable (a test
   holds the list to them both ways, decision 2816): a bare :focus-visible
   would reach the console's notice and its html and body. It writes no
   radius: this selector outranks .button and .skip, and an outline follows
   the element's own corners (a link's are a's above). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible,
textarea:focus-visible { outline: 3px solid var(--kiln); outline-offset: 4px; }

/* The wordmark: the mark in kiln, drawn by a mask of the site's one mark
   file, beside the name in the display face, which the rule writes on
   itself so the console's name, a bare text, takes it too. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: 27px;
  line-height: 1;
  letter-spacing: -.01em;
}
.brand::before {
  content: "";
  flex: none;
  width: 34px;
  height: 34px;
  background: var(--kiln);
  -webkit-mask: url("rapidea-mark.svg") center / contain no-repeat;
  mask: url("rapidea-mark.svg") center / contain no-repeat;
}

/* The stitched button: a kiln label with a sewn edge, pressed like a wooden
   key. It holds no drawing, so its press re-runs no ink filter (decision
   2832). The stitch is an outline drawn inside the edge, so no positioned
   box draws it (decision 2816); a focused button's ring, heavier, solid and
   outside the edge, takes its place. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 17px 34px 16px;
  background: var(--kiln);
  color: var(--card);
  font-family: var(--text);
  font-weight: 500;
  font-size: 19px;
  line-height: 1;
  letter-spacing: .01em;
  text-decoration: none;
  border: 2px solid var(--ink);
  border-radius: 12px;
  outline: 1.5px dashed rgb(255 250 242 / .62);
  outline-offset: -8.5px;
  box-shadow: 0 5px 0 var(--ink);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.button:hover { transform: translateY(2px); box-shadow: 0 3px 0 var(--ink); text-decoration: none; }
.button:active { transform: translateY(5px); box-shadow: 0 0 0 var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .button { transition: none; }
}