/* The page, the palette, and the card column every section sits in. */

:root {
  --blush: #e9b8b3;
  --blush-deep: #c98a86;
  --rose: #a8646a;
  --sage: #9caf88;
  --sage-deep: #5f7355;
  --ivory: #fbf6ef;
  --pearl: #f6ece6;
  --gold-soft: #c9a86a;
  --ink: #5b3c40;

  /* The card fills a phone. On a laptop or desktop it is a 3:4 column, the
     shape of a tablet held upright, lying on the table. */
  --card-w: min(100%, max(calc(100svh * .75), 360px));
}

/* A tablet (set in the page's <head>) is filled edge to edge, either way up. */
html.is-tablet { --card-w: 100%; }

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

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

html, body {
  margin: 0;
  /* A pale blush room in morning light: the table the card lies on. */
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, rgba(255, 250, 244, .9), transparent 70%),
    radial-gradient(ellipse at 50% 50%, #f6e9e3 0%, #ecd8d1 62%, #dcc2ba 100%) fixed;
  background-color: var(--pearl);
}

body { min-height: 100vh; }

img { display: block; max-width: 100%; }

.card {
  position: relative;
  width: var(--card-w);
  margin: 0 auto;
  background: var(--ivory);
  box-shadow: 0 0 60px rgba(120, 70, 70, .18);
}