/*
  ExcerptDraw site styles.

  Ink, ivory and one deep muted teal, following the app's design direction:
  quiet performance cards, not a flashcard game. The visual signature is the
  app's own motif, a small stack of cards with one corner revealed, drawn here
  in CSS from the same shapes rather than as an image.

  No web font is loaded and no image is fetched. Titles use the system sans at
  a heavy weight with tight tracking, which is the "large expressive title"
  direction without a font file being a network request for decoration.

  Every text colour pair used below was measured against its actual background.
  The lowest is 6.22:1, which clears WCAG AA at normal text sizes with room to
  spare. The figures are in ../receipts/01-deploy-2026-09-04.md.
*/

:root {
  --paper:      #f5f1e8; /* page */
  --surface:    #fffdf7; /* cards */
  --deep:       #ebe5d8; /* recessed panels */
  --ink:        #1b2326; /* body and titles      14.17:1 on paper */
  --ink-soft:   #48545a; /* secondary text        6.92:1 on paper */
  --teal:       #0f5257; /* accent, links         7.88:1 on paper */
  --teal-dark:  #0b3f43; /* accent on accent     11.43:1 under surface */
  --teal-tint:  #e2ecea; /* accent fill */
  --edge:       #b3a992; /* card edges, decorative grouping only */
  --rule:       #d9d2c3; /* hairline dividers, decorative */

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

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

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

body {
  margin: 0;
  /* An email address is one unbreakable token. At 320px with a large
     accessibility text size it is wider than the column, and without this it
     pushes a horizontal scrollbar onto the whole page. */
  overflow-wrap: break-word;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
}

.wrap {
  max-width: 40rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 3rem;
}

/* --- Masthead ------------------------------------------------------------ */

.masthead { margin-bottom: 2.75rem; }

.eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--teal);
}

h1 {
  margin: 0 0 0.75rem;
  /* Expressive but bounded: never smaller than a comfortable heading, never
     so large it wraps mid-word on a 320px screen. */
  font-size: clamp(2.5rem, 11vw, 3.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

.lede {
  margin: 0 0 1.25rem;
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--ink);
}

.status {
  display: inline-block;
  margin: 0 0 0.75rem;
  padding: 0.4rem 0.85rem;
  background: var(--teal-tint);
  border: 1px solid var(--teal);
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--teal);
}

.price {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

/* --- Sections ------------------------------------------------------------ */

section { margin-bottom: 2.5rem; }

h2 {
  margin: 0 0 0.6rem;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

h3 {
  margin: 1.75rem 0 0.4rem;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

ul { margin: 0 0 1rem; padding-left: 1.25rem; }
li { margin-bottom: 0.4rem; }
li:last-child { margin-bottom: 0; }

a {
  color: var(--teal);
  text-underline-offset: 0.15em;
}
a:hover { color: var(--teal-dark); }

/* Visible on keyboard focus, on any background, without relying on colour. */
a:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- The card stack ------------------------------------------------------

   The app's motif: an ordered stack of excerpt cards with the next one
   concealed, and one corner revealed. Two offset layers sit behind the front
   card; the front card carries a folded teal corner.

   It is decorative. aria-hidden in the markup, and every fact it suggests is
   also written in the text beside it. */

/* The caption is deliberately visible, not a title attribute or alt text. The
   card graphic looks enough like real app UI to be mistaken for a screenshot,
   and it is not one: no shipping build exists yet. It says so in the page. */
.illustration {
  margin: 0 0 2.75rem;
}

.illustration figcaption {
  margin-top: 0.75rem;
  padding-left: 0.5rem;
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.stack {
  position: relative;
  margin: 0 0.75rem 0 0.5rem;
  /* min(), not a bare 20rem: the two layers behind the front card are offset
     and rotated, and a transform paints outside the element's layout box. The
     percentage cap plus the side margins keep that painting inside the column
     on the narrowest screens instead of relying on the 20rem never being
     wider than the available space. */
  max-width: min(20rem, 100%);
}

.stack::before,
.stack::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: 0.75rem;
}
.stack::before { transform: translate(-0.5rem, 0.75rem) rotate(-1.6deg); }
.stack::after  { transform: translate(-0.25rem, 0.375rem) rotate(-0.7deg); }

.card {
  position: relative;
  /* The two layers behind the front card are ::before and ::after on .stack,
     so they are generated AFTER .card in paint order and would otherwise cover
     its text with their own opaque background. This lifts the front card back
     on top, which is where a front card belongs. */
  z-index: 1;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: 0.75rem;
  padding: 1.5rem 1.5rem 1.25rem;
  overflow: hidden;
}

/* The revealed corner. */
.card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 1.75rem 1.75rem 0;
  border-style: solid;
  border-color: var(--teal) var(--teal) transparent transparent;
  border-top-right-radius: 0.75rem;
}

.card .count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 0.875rem;
  padding: 0 0.5rem;
  background: var(--teal-tint);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--teal);
}

.card .title {
  margin: 0 0 0.35rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.card .meta {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

/* --- Panels -------------------------------------------------------------- */

.panel {
  background: var(--deep);
  border-radius: 0.75rem;
  padding: 1.25rem 1.35rem;
}

.panel h2 { margin-top: 0; }

/* --- Definition-style list ----------------------------------------------- */

.facts { margin: 0; }
.facts dt {
  margin-top: 1rem;
  font-weight: 700;
}
.facts dt:first-child { margin-top: 0; }
.facts dd {
  margin: 0.2rem 0 0;
  color: var(--ink-soft);
}

/* --- Footer -------------------------------------------------------------- */

footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

footer nav { margin-bottom: 0.75rem; }

/* Strong thumb targets: each footer link is a full 44px tall tap area with
   real space between, which is the same reason the app uses large controls. */
footer nav a {
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
  margin-right: 1.5rem;
  font-weight: 600;
}

footer p { margin: 0 0 0.5rem; }

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 26rem) {
  .wrap { padding: 2rem 1rem 2.5rem; }
  .stack { margin-left: 0.5rem; margin-right: 0.25rem; }
  .card { padding: 1.25rem 1.25rem 1rem; }
  footer nav a { margin-right: 1.25rem; }
}

@media (min-width: 48rem) {
  .wrap { padding: 4rem 2rem 4rem; }
  body { font-size: 1.125rem; }
}

/* Printing the support page should not waste ink on the decorative stack. */
@media print {
  body { background: #fff; color: #000; }
  .stack { display: none; }
  footer nav { display: none; }
}