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

:root {
  --ink: #5e1424;          /* burgundy lettering */
  --ink-soft: #8a4a52;
  --gold: #a9803f;
  --paper: #f6eee1;

  /* 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;
   the hero has a composition for each (hero.css). */
html.is-tablet { --card-w: 100%; }

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

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

html, body {
  margin: 0;
  /* The same wine table the envelope lies on, so opening it leaves the card
     on the table rather than swapping the room. */
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(120, 24, 40, .55), transparent 70%),
    radial-gradient(ellipse at 50% 50%, #4a0f19 0%, #26060c 62%, #120206 100%) fixed;
  background-color: #1c0409;
}

body { min-height: 100vh; }

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

.card {
  position: relative;
  width: var(--card-w);
  margin: 0 auto;
  background: var(--paper);
  box-shadow: 0 0 60px rgba(8, 0, 3, .55);
}

/* ------------------------------------------------------------ lace edges */

/* A burgundy section's edges (the letter, the events): burgundy lace trim laid
   over the foot of the section above it, and hanging from its own foot over
   the next. trim.webp is two scallops of it, cut to repeat seamlessly; its
   solid part fades into the section's own paper. */
.lace-edged::before {
  --trim: clamp(44px, 13vw, 84px);
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: calc(var(--trim) * -.66);
  height: var(--trim);
  background: url(../assets/letter/trim.webp) 50% 0 / auto 100% repeat-x;
  -webkit-mask: linear-gradient(#000 58%, transparent 97%);
          mask: linear-gradient(#000 58%, transparent 97%);
  filter: drop-shadow(0 -1px 2px rgba(60, 10, 18, .3));
  pointer-events: none;
}

.lace-edged::after {
  --trim: clamp(44px, 13vw, 84px);
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: calc(var(--trim) * -.66);
  height: var(--trim);
  background: url(../assets/letter/trim.webp) 50% 0 / auto 100% repeat-x;
  transform: scaleY(-1);
  -webkit-mask: linear-gradient(#000 58%, transparent 97%);
          mask: linear-gradient(#000 58%, transparent 97%);
  filter: drop-shadow(0 -1px 2px rgba(60, 10, 18, .3));
  pointer-events: none;
}