/* Beyond Argument at matthewpreiser.com/beyond-argument, in the product's own
   look: paper, ink, Averia and flame red, its highlighter wash and one
   inverted ink band. Averia comes from the site's own /fonts/, the same files
   the product ships. Light only, like the product. */
/* Only this page's theme lives here; the layout is /css/projects.css. */

@font-face { font-family: "Averia Serif Libre"; src: url("/fonts/averia-serif-libre-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Averia Serif Libre"; src: url("/fonts/averia-serif-libre-300-italic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Averia Serif Libre"; src: url("/fonts/averia-serif-libre-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --page: #fcf9f4;
  --card: #fffdf9;
  --ink: #2b2926;
  --ink2: #4d4942;
  --muted: #6b665c;
  --rule: #e8e2d6;
  --accent: #a8331b;
  --flame: #d4472a;
  --flame-btn: #c03a1e;
  --wash: rgba(226, 142, 58, 0.30);
  --scrim: rgba(28, 26, 24, 0.9);
  --shadow: rgba(60, 40, 25, 0.30);
  --on-accent: #fdfaf5;
  --accent-fill: var(--flame-btn);
  --font-head: "Averia Serif Libre", Georgia, serif;
  --font-text: "Averia Serif Libre", Georgia, serif;
  --head-weight: 300;
  --cap-gap: 0.153;
}

/* Averia is set light and tight, as the product sets it. It has no 600, so
   labels take the 700. */
body { background-image: url("/beyond-argument/paper.png"); font-weight: 300; letter-spacing: -0.03em; }
h1 { letter-spacing: -0.055em; }
h2 { letter-spacing: -0.045em; }
.title, .eyebrow, .wordmark, .facts span { font-weight: 700; }
.facts span { font-weight: 300; font-size: 14px; }
/* On a phone the shared rule scales the row with the screen; Averia at 300
   is wider than the other faces, so it starts from the same size the others
   use rather than this page's 14px. */
@media (max-width: 700px) { .facts span { font-size: 1em; } }
.eyebrow { letter-spacing: 0.06em; }

.app-icon { width: 44px; height: 44px; align-self: start; margin-top: 2px; }
.name { display: grid; gap: 2px; }
.wordmark { font-size: 22px; letter-spacing: -0.03em; }
.tagline { font-size: 16px; color: var(--ink2); }

/* The highlighter: a marker stroke over the lower half of the text. */
.wash {
  background: linear-gradient(var(--wash), var(--wash)) 0 0.66em / 100% 0.52em no-repeat;
  padding: 0 0.12em;
  margin: 0 -0.12em;
}

/* One full-bleed inverted band for the key line. A spread shadow clipped to
   the band's height carries the colour to the viewport edges, so nothing
   widens the page. */
.ink-band {
  background: var(--ink);
  box-shadow: 0 0 0 100vmax var(--ink);
  clip-path: inset(0 -100vmax);
  padding-block: clamp(40px, 6vw, 72px);
  display: grid;
  gap: 16px;
}
.ink-band h2 { color: #fdfaf5; font-size: clamp(32px, 4.4vw, 52px); max-width: 18ch; }
.ink-band p { color: #c9c2b4; font-size: clamp(18px, 1.9vw, 21px); max-width: 52ch; }

/* The labeled example, set like the product sets a round. */
.said p { margin: 0; }
.who { font-size: 13px; font-weight: 700; color: var(--accent); }
.you { border-left: 2px solid var(--wash); padding-left: 16px; }
.you .who { color: var(--muted); }

/* A tactic's textbook name, under its plain one. */
.aka { display: block; font-weight: 300; font-size: 15px; color: var(--muted); }

/* Research, tiered the way the product tiers it. */
.tier {
  display: inline-block;
  font-size: 13px;
  font-weight: 300;
  color: var(--muted);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 1px 6px;
  margin-left: 6px;
  letter-spacing: 0;
}

/* The actions, in the product's light Averia rather than the shared 600,
   which would fetch a bold face this page otherwise never loads. The fill is
   --accent-fill, the product's button flame. */
.act { font-weight: 300; font-size: 16px; letter-spacing: -0.02em; }
.act:not(.act-primary) { border-color: var(--ink); }
.act-primary:hover, .act-primary:focus-visible { filter: none; background: var(--flame); border-color: var(--flame); }

/* The unlock card's controls, square and ink-bordered like the product's. */
.unlock-row input { border: 2px solid var(--ink); border-radius: 2px; }
.unlock-row button { background: var(--flame-btn); border-radius: 2px; font-weight: 300; }