/* Colours: change these to restyle the page. */
:root {
  --paper: #f7f0e3;
  --ink: #1f1a1a;
  --red: #b8262d;
  --button-1: var(--red);
  --button-2: var(--ink);
  --button-text: #fff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--paper);
  color: var(--ink);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  -webkit-font-smoothing: antialiased;
}

/* Quilt band with a pinking-shear bottom edge and a dashed seam below it */
.quilt {
  height: clamp(120px, 24vh, 220px);
  background: url(/pattern.jpg) center 30% / cover;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 22px 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 22px 100%;
}

main {
  margin-top: 6px;
  padding: 28px 24px 48px;
  border-top: 2px dashed var(--red);
  text-align: center;
}

main > * {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

h1 { margin-top: 8px; margin-bottom: 0; }

h1 img {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  margin: 0 auto;
}

.line {
  margin-top: 18px;
  margin-bottom: 32px;
  font-size: 1.25rem;
}

nav {
  display: grid;
  gap: 14px;
}

.button {
  display: block;
  padding: 20px 16px;
  border-radius: 14px;
  color: var(--button-text);
  font: 700 1.15rem/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .01em;
  text-decoration: none;
}

.etsy { background: var(--button-1); }
.facebook { background: var(--button-2); }

.email {
  margin-top: 28px;
  font-size: 1.05rem;
}

.email a {
  color: var(--ink);
  text-underline-offset: 3px;
}

.button:hover, .button:focus-visible { filter: brightness(1.12); }
.button:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }