/* The page, the card column every section sits in, and the pieces every section shares:
   the ivory silk (surface P), the onyx-and-gold seam, and the heading formula (THEME.md). */

:root {
  --onyx: #0d0b09;
  --lacquer: #1a1611;
  --gold: #c9a24b;
  --gold-hi: #f0d99c;
  --brass: #9c7231;
  --ivory: #f3ead8;
  --ink: #2a231b;
  --table: #060504;

  /* Gold leaf, for the script on dark. */
  --gold-leaf: linear-gradient(175deg, #fff6d8 0%, #f4d98e 28%, #d9a94c 52%, #fbe6a6 74%, #c08a35 100%);

  /* 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 dark room, warmed from the middle by lamplight: the table the card lies on. */
  background:
    radial-gradient(ellipse 60% 55% at 50% 45%, rgba(120, 84, 32, .22), transparent 70%),
    radial-gradient(ellipse at 50% 50%, #15110c 0%, #0a0806 62%, var(--table) 100%) fixed;
  background-color: var(--table);
}

body { min-height: 100vh; }

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

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

/* ------------------------------------------------------------ surface P: the ivory silk */

/* The letter, the events and the RSVP sit on this, and only this. The silk is busy,
   so a soft ivory veil calms the middle where the words are. */
.silk {
  position: relative;
  background: url(../assets/theme/paper-b.webp) 0 0 / min(92vw, 460px) repeat, var(--ivory);
  color: var(--ink);
}

.silk::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 62% 48% at 50% 50%, rgba(246, 239, 225, .78), rgba(246, 239, 225, .25) 70%, transparent 100%);
}

.silk > * { position: relative; }

/* ------------------------------------------------------------ the seam */

/* The onyx band set in gold, at every border between the hall (S) and the silk (P).
   Give a P section `.seamed`: a band straddles its top edge and another its foot. */
.seamed::after,
.seamed > .seam-top {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 5;
  height: var(--seam-h, clamp(22px, 6.4cqi, 40px));
  background: url(../assets/theme/seam-b.webp) center / auto 100% repeat-x;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .55));
  pointer-events: none;
}

/* (above its neighbours, so the band at its foot lies over the next section's top) */
.seamed { position: relative; z-index: 1; container-type: inline-size; }
.seamed > .seam-top { top: calc(var(--seam-h, clamp(22px, 6.4cqi, 40px)) / -2); }
.seamed::after { bottom: calc(var(--seam-h, clamp(22px, 6.4cqi, 40px)) / -2); }

/* ------------------------------------------------------------ the heading formula */

/* A kicker in small serif capitals over a title in the script, with an optional italic
   sub-line. On dark: pale gold over gold leaf. On ivory (inside .silk): brass over onyx. */
.kicker {
  margin: 0;
  font: 600 .72em/1.3 'Cormorant Garamond', serif;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #e6d3a4;
}

.title {
  margin: 0;
  font: 400 3.2em/1.05 'Luxurious Script', cursive;
}

.sub {
  margin: 0;
  font: italic 500 1.05em/1.35 'Cormorant Garamond', serif;
}

.gold-leaf {
  background: var(--gold-leaf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .85)) drop-shadow(0 0 8px rgba(0, 0, 0, .5));
}

.silk .kicker { color: var(--brass); }
.silk .title { color: #1d1813; }
.silk .sub { color: #3a3026; }

/* Only for screen readers. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}