/* SewCraft pages: unbleached linen, indigo ink, pincushion red. */
:root { --linen: #E6DCC8; --indigo: #283657; --soft: rgba(40, 54, 87, .72); --red: #C0473B; --paper: #FBF8F1; --mustard: #E2B23F; }
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--indigo); background-color: var(--linen);
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.10) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(120,100,70,.08) 0 1px, transparent 1px 3px);
  font: 18px/1.6 "Gill Sans", "Gill Sans MT", Seravek, Calibri, sans-serif;
}
.wrap, main > .wrap { max-width: 680px; margin: 0 auto; padding: 0 24px; }
main { padding: 0 0 40px; }
/* The single-column help and privacy pages keep their own padding. */
body > main:not(:has(.wrap)) { max-width: 680px; margin: 0 auto; padding: 48px 24px 80px; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 40px; }
.label {
  display: inline-block; background: var(--indigo); color: var(--paper); padding: 10px 28px;
  font: italic 600 30px/1 "Snell Roundhand", "Brush Script MT", cursive; transform: rotate(-1.5deg);
  border-left: 6px solid #1d2742; border-right: 6px solid #1d2742; box-shadow: 0 3px 6px rgba(0,0,0,.25);
  outline: 2px dashed var(--mustard); outline-offset: -7px;
}
h1 { font-size: 34px; font-weight: 600; margin: 36px 0 8px; line-height: 1.2; }
h2 { font-size: 22px; font-weight: 600; margin: 34px 0 6px; }
p, li { color: var(--indigo); }
.lede { font-size: 21px; }
.note { color: var(--soft); font-style: italic; font-size: 16px; }
a { color: var(--red); }
a:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 2px; }
nav { font-size: 16px; }
nav a { margin-right: 18px; }
.top nav a { margin: 0 0 0 18px; }
main nav, body > main:not(:has(.wrap)) nav { margin-top: 40px; }

/* The screens, laid out like photos on the table: a row that scrolls sideways on a phone. */
.shots {
  display: flex; gap: 26px; max-width: 1080px; margin: 34px auto 6px; padding: 18px 24px 26px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.shots::-webkit-scrollbar { display: none; }
.shot { flex: 0 0 min(230px, 62vw); margin: 0; scroll-snap-align: center; }
.shot:nth-child(odd) { transform: rotate(-1.2deg); }
.shot:nth-child(even) { transform: rotate(1deg); }
.shot img {
  display: block; width: 100%; height: auto; border-radius: 28px; background: var(--paper);
  box-shadow: 0 2px 3px rgba(60, 43, 27, .25), 0 12px 26px rgba(60, 43, 27, .22);
}
.shot figcaption { margin-top: 14px; font-size: 16px; line-height: 1.4; color: var(--soft); }
@media (min-width: 1040px) { .shots { justify-content: center; overflow: visible; } }

footer { padding-top: 10px; padding-bottom: 60px; border-top: 1px dashed rgba(40, 54, 87, .25); }
footer p { font-size: 16px; color: var(--soft); }