/* Verso site. The palette and type are lifted from the app's own Warm theme so
   the site and the product read as one thing: paper stock, a serif, oxblood.
   Values are the app's tokens verbatim (app/lib/theme/app_theme.dart). */
:root {
  --paper: #F3EAD8;
  --surface: #FBF4E4;
  --ink: #2A2420;
  --muted: #6E6457;
  --oxblood: #8A3B2A;
  --gold: #B68A3E;
  --owned: #2E5339;
  --on-verdict: #FFFFFF;
  --rule: #E3D7BF;
  --leaf: #E7D9BC;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.62;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 720px; margin: 0 auto; padding: 48px 24px 72px; }

.mark {
  font-size: 64px;
  font-weight: 700;
  color: var(--oxblood);
  line-height: 1;
  margin: 0 0 8px;
}

h1 { font-size: 34px; line-height: 1.15; margin: 0 0 12px; }
h2 { font-size: 21px; margin: 40px 0 8px; }
h3 { font-size: 18px; margin: 26px 0 6px; }
p, li { font-size: 17px; }
a { color: var(--oxblood); }
ul { padding-left: 22px; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 40px 0; }
.updated { color: var(--muted); font-style: italic; margin: 0 0 32px; }
.lede { font-size: 19px; color: var(--muted); margin: 0 0 8px; }

/* The verdict card. This is the app's most characteristic artifact: the answer
   you get standing in the shop with the book in your hand. It is the hero
   because it IS the product, not a decoration around it. */
.verdict {
  background: var(--owned);
  color: var(--on-verdict);
  border-radius: 12px;
  padding: 22px 24px;
  margin: 28px 0 10px;
}
.verdict .word {
  font-size: 30px;
  font-weight: 700;
  margin: 0 0 2px;
  line-height: 1.1;
}
.verdict .detail { margin: 0; font-size: 16px; opacity: 0.92; }
.verdict-note {
  color: var(--muted);
  font-size: 15px;
  margin: 0 0 8px;
  font-style: italic;
}

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 24px 0 0;
}

footer { color: var(--muted); font-size: 15px; }

/* The download call to action. Apple's badge is their artwork, used unmodified
   and at its own aspect ratio, per their identity guidelines. */
.cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 26px 0 8px; }
.badge { display: inline-block; line-height: 0; }
.badge img { height: 50px; width: auto; }
.cta-note { color: var(--muted); font-size: 15px; }

/* Screenshots. A row on a wide screen, a single scrollable rail on a phone,
   so three tall portrait shots never turn the page into a mile of scrolling. */
/* A phone screenshot at a third of a 720px column is not readable, and it is
   not trying to be: its job here is to show that this is a warm, paper-toned
   book app made by someone with taste. So the HEIGHT is bounded and the aspect
   is left alone, rather than letting three portrait shots run 500px tall each
   and swallow the page. */
.shots {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin: 32px 0 8px;
}
.shots figure { margin: 0; text-align: center; }
.shots img {
  max-height: 300px;
  width: auto;
  max-width: 100%;
  border: 1px solid var(--rule);
  border-radius: 10px;
  display: block;
}
.shots figcaption {
  color: var(--muted);
  font-size: 14px;
  font-style: italic;
  margin-top: 8px;
}

@media (max-width: 560px) {
  /* On a phone, one shot at a readable size beats three thumbnails. */
  .shots { flex-direction: column; align-items: center; gap: 28px; }
  .shots img { max-height: 440px; }
}

nav.top { margin: 0 0 8px; font-size: 16px; }
nav.top a { margin-right: 18px; }

@media (max-width: 480px) {
  h1 { font-size: 28px; }
  .verdict .word { font-size: 25px; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #18140F;
    --surface: #221D16;
    --ink: #ECE4D6;
    --muted: #A89C88;
    --oxblood: #CB7155;
    --rule: #322B20;
    /* The app BRIGHTENS its verdict tones for dark and flips the text to
       near-black, rather than reusing the light tone on a dark surface. These
       are the app's own dark values, so the card reads the way the product
       does instead of turning muddy. */
    --owned: #7FB069;
    --on-verdict: #18140F;
  }
}