/* Frame — shared styles.
   Palette and type come from the app itself, so the site and the product read
   as one thing: Paper, Ink, and Crimson for the one thing that matters.

   The display font is the file the app bundles, served from this domain. A site
   that promises "nothing leaves your phone" should not hand every visitor's IP
   to a font CDN on load. Body text uses the system font, as the app does. */

@font-face {
  font-family: 'Playfair Display'; font-style: italic; font-weight: 400 900;
  font-display: swap; src: url('/assets/fonts/PlayfairDisplay-Italic.ttf') format('truetype');
}

:root {
  --paper: #F8F6F1;
  --ink: #1A1A1A;
  --crimson: #B8342D;
  --dim: rgba(26, 26, 26, 0.64);
  --hair: rgba(26, 26, 26, 0.14);
  --card: rgba(255, 255, 255, 0.6);

  --display: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;

  --measure: 62ch;
  --gutter: clamp(20px, 5vw, 40px);
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
}

a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--dim); }
a:hover { text-decoration-color: var(--ink); }

.wrap { max-width: 880px; margin: 0 auto; padding: 0 var(--gutter); }
.measure { max-width: var(--measure); }

/* Masthead and footer */

.masthead {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 28px 0 22px; border-bottom: 1px solid var(--hair);
}
.wordmark {
  font-family: var(--display); font-style: italic; font-size: 28px;
  text-decoration: none; letter-spacing: 0.01em;
}
.wordmark .dot { color: var(--crimson); }
nav a { margin-left: 22px; font-size: 15px; color: var(--dim); text-decoration: none; }
nav a:hover { color: var(--ink); }

footer {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; justify-content: space-between;
  margin-top: 72px; padding: 22px 0 44px; border-top: 1px solid var(--hair);
  font-size: 14px; color: var(--dim);
}
footer nav a:first-child { margin-left: 0; }

/* Type */

h1, h2 { font-family: var(--display); font-style: italic; font-weight: 400; line-height: 1.12; margin: 0; }
h1 { font-size: clamp(40px, 8vw, 64px); }
h2 { font-size: clamp(26px, 4.4vw, 34px); margin-top: 56px; }
h3 { font-size: 17px; font-weight: 600; margin: 28px 0 6px; }
p { margin: 0 0 14px; }

.stamp {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--dim); margin: 0 0 14px;
}
.lede { font-size: 20px; color: var(--dim); margin-top: 18px; }
.updated { font-family: var(--mono); font-size: 13px; color: var(--dim); margin-top: 14px; }

.prose { padding-top: 56px; }
.prose h2 + .measure, .prose h2 + p { margin-top: 14px; }

.plain {
  background: var(--card); border: 1px solid var(--hair); border-radius: 14px;
  padding: 18px 20px;
}

/* Home */

.hero { padding: 64px 0 24px; }
.hero img { width: 96px; height: 96px; border-radius: 22px; display: block; margin-bottom: 30px; }
.badge {
  display: inline-block; margin-top: 26px; padding: 9px 16px;
  border: 1px solid var(--ink); border-radius: 999px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
}

.rows { margin-top: 20px; border-top: 1px solid var(--hair); }
.row {
  display: grid; grid-template-columns: 56px 1fr; gap: 6px 14px;
  padding: 18px 0; border-bottom: 1px solid var(--hair);
}
.row .numeral { font-family: var(--display); font-style: italic; font-size: 22px; color: var(--dim); }
.row strong { font-weight: 600; }
.row span { color: var(--dim); display: block; }

@media (max-width: 520px) {
  body { font-size: 16px; }
  .row { grid-template-columns: 40px 1fr; }
  nav a { margin-left: 16px; }
}