/* ============================================
   Love, Lera: shared styles
   Palette built around the pink satin background:
   berry and rose accents, deep wine text, soft blush footer.
   ============================================ */
:root {
  --linen: #fdf3f7;      /* lightest blush */
  --cream: #fff0f6;      /* highlights, selection */
  --paper: #fff7fb;      /* cards, placeholders */
  --maroon: #cc1e36;     /* wordmark, headings (cherry red) */
  --ink: #b01a30;        /* body text (deeper red, easier to read) */
  --ink-dim: #c45a68;    /* secondary text (soft red) */
  --olive: #ecdcc0;      /* footer (deeper cream) */
  --olive-ink: #cc1e36;  /* text on footer */
  --wood: #d8475e;       /* accents, small labels (light cherry) */
  --line: #e6d3b8;
  --pink: #f6ecd9;       /* cream satin background */
  --pink-deep: #eab4cd;
  --blue: #234a85;       /* cyanotype Prussian blue */
  --blue-deep: #17345f;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .28 0 0 0 0 .18 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --sans: "IM Fell English", Georgia, serif;   /* paragraphs, descriptions, form text */
  --serif: "IM Fell English SC", Georgia, serif;     /* small headings */
  --wrap: 1120px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  position: relative;
  min-height: 100vh;
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.55;
  font-size: 1.08rem;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

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

/* Paper grain over every page, like printed stock */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background-image: var(--grain);
  opacity: 0.16;
  mix-blend-mode: multiply;
}

/* Sparkle cursor canvas (sparkle.js) */
.sparkle-layer {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  pointer-events: none;
}

/* Soft cream satin background for every page: warm highlights, a blush of pink, a few glints */
body, .satin {
  background-color: var(--pink);
  background-image:
    radial-gradient(2px 2px at 12% 22%, #fff 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 68% 14%, #fff 50%, transparent 100%),
    radial-gradient(2px 2px at 86% 64%, #fff 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 34% 78%, #fff 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 52% 46%, #fff 50%, transparent 100%),
    radial-gradient(ellipse 38% 30% at 18% 30%, rgba(255, 253, 246, 0.9), transparent 70%),
    radial-gradient(ellipse 30% 40% at 78% 22%, rgba(255, 250, 240, 0.85), transparent 70%),
    radial-gradient(ellipse 45% 35% at 60% 85%, rgba(255, 252, 245, 0.7), transparent 70%),
    radial-gradient(ellipse 35% 45% at 95% 80%, rgba(236, 196, 186, 0.35), transparent 70%),
    radial-gradient(ellipse 40% 35% at 5% 90%, rgba(232, 200, 168, 0.4), transparent 70%);
}

a { color: inherit; }

::selection { background: var(--cream); color: var(--maroon); }

/* A row of eyelets, like the edge of broderie anglaise */
.eyelets {
  height: 10px;
  background: radial-gradient(circle, currentColor 0 2px, transparent 2.6px) center / 16px 10px repeat-x;
  color: var(--line);
}

/* Shared small type */
.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wood);
  margin: 0 0 1rem;
}

.text-link {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--maroon);
  text-decoration: underline;
  text-decoration-color: var(--wood);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.text-link:hover { color: var(--wood); }

/* ============================================
   Header / nav
   ============================================ */
.site-header {
  text-align: center;
  padding: 2.5rem 1rem 0;
}

.site-header .mark {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.1rem, 5vw, 2.9rem);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  text-decoration: none;
  color: var(--maroon);
}

.site-header nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1.75rem;
  max-width: var(--wrap);
  margin: 1.5rem auto 0;
  padding: 0 0 1.25rem;
}

.site-header nav a {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-dim);
  padding: 0.35rem 0;
  border-bottom: 1px solid transparent;
}

.site-header nav a:hover { color: var(--maroon); }

.site-header nav a.active {
  color: var(--maroon);
  border-bottom-color: var(--wood);
}

.site-header .eyelets {
  max-width: var(--wrap);
  margin: 0 auto;
}

/* ============================================
   Homepage: photo gallery
   ============================================ */
.photo-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 1080px;
  margin: 0 auto;
  padding: 2.5rem 2rem 5rem;
}

.photo-gallery img,
.photo-gallery .frame {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 2px;
}

.photo-gallery .frame {
  border: 1px dashed #d8c3a3;
  background: rgba(255, 250, 241, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-dim);
  font-size: 0.85rem;
}

@media (max-width: 700px) {
  .photo-gallery { grid-template-columns: repeat(2, 1fr); padding: 2rem 1rem 3.5rem; gap: 0.75rem; }
}

/* (Unused now: earlier homepage layout, kept in case it comes back) */
.lede {
  max-width: 34ch;
  margin: 0 auto;
  padding: 3.5rem 1rem 3rem;
  text-align: center;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  line-height: 1.35;
  color: var(--ink);
}

.lede em { color: var(--maroon); }

.feature {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 3.5rem;
  align-items: center;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 2rem 5rem;
}

.feature-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 0;
}

.feature-photos img {
  width: 100%;
  aspect-ratio: 9 / 14;
  object-fit: cover;
  border-radius: 2px;
}

.feature-photos img:nth-child(2) { margin-top: 3rem; }

.feature-text h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--maroon);
  margin: 0 0 1rem;
}

.feature-text p:not(.eyebrow) {
  color: var(--ink-dim);
  max-width: 38ch;
  margin: 0 0 1.25rem;
}

.feature-text .press-line {
  font-size: 0.85rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.feature-text .press-line strong { color: var(--ink); font-weight: 600; }

/* Practice index */
.practice {
  padding: 4rem 2rem 4.5rem;
}

.practice-inner {
  max-width: var(--wrap);
  margin: 0 auto;
}

.practice-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  border-top: 1px solid rgba(74, 22, 38, 0.18);
}

.practice-list a {
  display: grid;
  grid-template-columns: 3rem 1fr auto 2rem;
  align-items: baseline;
  gap: 1rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid rgba(74, 22, 38, 0.18);
  text-decoration: none;
  color: var(--maroon);
  transition: color 0.15s, padding 0.2s;
}

.practice-list .num {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--wood);
}

.practice-list .name {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.practice-list .desc {
  font-size: 0.9rem;
  color: var(--ink-dim);
  text-align: right;
}

.practice-list .arrow {
  text-align: right;
  color: var(--wood);
  transition: transform 0.2s;
}

.practice-list a:hover .name { font-style: italic; }
.practice-list a:hover .arrow { transform: translateX(4px); }

/* ============================================
   Category pages
   ============================================ */
.category-header {
  max-width: 720px;
  margin: 0 auto;
  padding: 4rem 1.5rem 2.5rem;
  text-align: center;
}

.category-header h1 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: var(--maroon);
  margin: 0 0 1.25rem;
}

.category-header p {
  color: var(--ink-dim);
  max-width: 52ch;
  margin: 0 auto;
}

.page-section {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 3rem 2rem;
}

.page-section + .page-section { border-top: 1px solid var(--line); }

.page-section h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.6rem;
  letter-spacing: -0.005em;
  color: var(--maroon);
  margin: 0 0 1.25rem;
}

.page-section p {
  color: var(--ink-dim);
  max-width: 60ch;
  margin: 0 0 1.5rem;
}

.gallery-placeholder .frame {
  border: 1px dashed #d8c3a3;
  border-radius: 2px;
  padding: 4rem 2rem;
  text-align: center;
  color: var(--ink-dim);
  font-size: 0.9rem;
  background: var(--paper);
}

/* Real image gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.25rem;
}

.gallery figure { margin: 0; }

.gallery img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 2px;
}

.gallery figcaption {
  font-size: 0.8rem;
  color: var(--ink-dim);
  margin-top: 0.6rem;
}

/* ============================================
   Buttons
   ============================================ */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper);
  background: var(--maroon);
  padding: 0.95rem 1.6rem;
  border-radius: 2px;
  transition: background 0.15s;
}

.btn:hover { background: var(--wood); }

/* ============================================
   Footer
   ============================================ */
.site-footer {
  background: var(--olive);
  color: var(--olive-ink);
  padding: 0 2rem 2.5rem;
  font-size: 0.85rem;
}

/* Scalloped lace edge where the page meets the footer */
.site-footer .scallop {
  height: 10px;
  margin: 0 -2rem 2.25rem;
  background: radial-gradient(circle at 50% 0, var(--scallop, var(--pink)) 0 7px, transparent 7.5px) center top / 18px 10px repeat-x;
}


.site-footer-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.site-footer .mark {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.5rem;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  text-decoration: none;
  color: var(--maroon);
}

.site-footer a { text-decoration-color: rgba(204, 30, 54, 0.35); text-underline-offset: 4px; }
.site-footer a:hover { color: var(--wood); }

.site-footer .fine { color: var(--ink-dim); }

/* ============================================
   Deck pages (public, unlinked)
   ============================================ */
.deck-body {
  max-width: 640px;
  margin: 0 auto;
  padding: 4rem 2rem;
}

.deck-body h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 2rem;
  color: var(--maroon);
}

/* ============================================
   Small screens
   ============================================ */
@media (max-width: 820px) {
  .feature { grid-template-columns: 1fr; gap: 2rem; padding: 0 1rem 3.5rem; }
  .feature-photos img:nth-child(2) { margin-top: 2rem; }
  .practice { padding: 3rem 1rem 3.5rem; }
  .practice-list a { grid-template-columns: 2.25rem 1fr 1.5rem; gap: 0.75rem; }
  .practice-list .desc { grid-column: 2; grid-row: 2; text-align: left; font-size: 0.85rem; margin-top: -0.15rem; }
  .practice-list .arrow { grid-column: 3; grid-row: 1; }
  .page-section { padding: 2.5rem 1rem; }
  .category-header { padding: 3rem 1rem 2rem; }
  .site-footer { padding: 0 1rem 2rem; }
  .site-footer .scallop { margin: 0 -1rem 2rem; }
}

@media (max-width: 480px) {
  .site-header { padding-top: 2rem; }
  .site-header nav { gap: 0.1rem 1.1rem; }
  .lede { padding: 2.5rem 1rem 2.25rem; }
}

/* ============================================
   Cyanotype store (index.html)
   ============================================ */
.store .page-section { scroll-margin-top: 1rem; }

.product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 3rem 2rem 4rem;
  align-items: start;
}

.product-media { position: sticky; top: 1.5rem; }

.product-photo {
  aspect-ratio: 1 / 1;
  border-radius: 3px;
  overflow: hidden;
}

.product-photo img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 22px rgba(23, 52, 95, 0.18)); }

.thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-top: 1rem; }
.thumb {
  all: unset;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  border-radius: 3px;
  padding: 0.35rem;
  background: rgba(255, 247, 251, 0.55);
  box-shadow: inset 0 0 0 1px var(--line);
}
.thumb img { width: 100%; height: 100%; object-fit: contain; }
.thumb.is-active { box-shadow: inset 0 0 0 2px var(--blue); }
.thumb:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.placeholder-blue {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  background:
    radial-gradient(ellipse 60% 50% at 30% 30%, rgba(255, 255, 255, 0.18), transparent 70%),
    radial-gradient(ellipse 70% 60% at 80% 85%, rgba(0, 0, 0, 0.25), transparent 70%),
    var(--blue);
}

.product-info h1 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.2rem, 4.6vw, 3.3rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: var(--maroon);
  margin: 0 0 1.5rem;
}

.product-info > p:not(.eyebrow):not(.fineprint) {
  color: var(--ink);
  max-width: 48ch;
  margin: 0 0 1rem;
}

.small-heading {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wood);
  margin: 2rem 0 0.75rem;
}

.sizes {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.sizes li {
  display: grid;
  grid-template-columns: 6rem 1fr auto;
  gap: 1rem;
  align-items: baseline;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}

.size-name { font-family: var(--serif); font-size: 1.25rem; color: var(--maroon); }
.size-dim { color: var(--ink-dim); font-size: 0.9rem; }
.size-price { font-weight: 600; color: var(--blue); }

.fineprint { font-size: 0.85rem; color: var(--ink-dim); margin: 0.75rem 0 1.75rem; }

.btn-blue { background: var(--blue); }
.btn-blue:hover { background: var(--blue-deep); }
.btn[disabled] { opacity: 0.6; cursor: wait; }

/* Handkerchief picker */
.hankie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}

.hankie {
  all: unset;
  cursor: pointer;
  display: block;
  border-radius: 3px;
  background: var(--paper);
  padding: 0.6rem 0.6rem 0.75rem;
  box-shadow: 0 1px 0 rgba(90, 24, 50, 0.06), 0 6px 18px rgba(90, 24, 50, 0.07);
  transition: transform 0.15s, box-shadow 0.15s;
}

.hankie:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(90, 24, 50, 0.12); }
.hankie:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.hankie-img { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 2px; background: var(--linen); }
.hankie-img img { width: 100%; height: 100%; object-fit: cover; }

.hankie-meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: 0.6rem; }
.hankie-num { font-family: var(--serif); font-size: 1.2rem; color: var(--maroon); }
.hankie-size { font-size: 0.78rem; color: var(--ink-dim); letter-spacing: 0.04em; }

.hankie.is-selected { box-shadow: 0 0 0 2px var(--blue), 0 10px 24px rgba(35, 74, 133, 0.18); }
.hankie.is-selected .hankie-num::after { content: " ✓"; color: var(--blue); }
.hankie.is-taken { cursor: default; opacity: 0.45; }
.hankie.is-taken:hover { transform: none; }

.hankie-empty { margin-top: 1.5rem; padding: 2rem; border: 1px dashed #d8c3a3; border-radius: 3px; background: rgba(255, 247, 251, 0.5); }

/* Steps */
.steps {
  list-style: none;
  padding: 0;
  margin: 2rem 0 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: 1px solid var(--blue);
  color: var(--blue);
  font-family: var(--serif);
  font-size: 1.1rem;
  margin-bottom: 0.9rem;
}

.steps h3 { font-family: var(--serif); font-weight: 500; font-size: 1.25rem; color: var(--maroon); margin: 0 0 0.5rem; }
.steps p { font-size: 0.95rem; margin: 0; }
.aside { font-style: italic; }

/* Commission form */
.commission-form { max-width: 720px; margin-top: 2rem; }

.commission-form fieldset {
  border: 0;
  margin: 0 0 2rem;
  padding: 1.75rem;
  background: rgba(255, 247, 251, 0.6);
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(90, 24, 50, 0.05);
}

.commission-form legend {
  float: left;
  width: 100%;
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--maroon);
  margin-bottom: 1.25rem;
}

.commission-form legend + * { clear: both; }

.commission-form label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 1.1rem;
}

.commission-form input[type="text"],
.commission-form input[type="email"],
.commission-form select,
.commission-form textarea {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.75rem 0.85rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 400;
  color: var(--ink);
  background: #fff;
  border: 1px solid #e0cdb0;
  border-radius: 3px;
  appearance: none;
}

.commission-form select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%), linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

.commission-form input:focus,
.commission-form select:focus,
.commission-form textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: transparent; }

.commission-form.show-errors :invalid { border-color: #c2334d; background: #fff6f7; }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.row-3 { grid-template-columns: 2fr 1fr 1fr; }

.req { color: var(--wood); }
.opt { color: var(--ink-dim); font-weight: 400; }

.choice-group { margin-bottom: 1.1rem; }
.choice-label { display: block; font-size: 0.85rem; font-weight: 500; margin-bottom: 0.5rem; }
.commission-form .choice { display: inline-block; margin: 0 0.5rem 0.5rem 0; }
.choice input { position: absolute; opacity: 0; }
.choice span {
  display: inline-block;
  padding: 0.55rem 1rem;
  border: 1px solid #e0cdb0;
  border-radius: 999px;
  background: #fff;
  font-size: 0.85rem;
  cursor: pointer;
}
.choice input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; }
.choice input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }

.upload input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload-box {
  display: block;
  margin-top: 0.4rem;
  padding: 1.75rem 1rem;
  text-align: center;
  border: 1.5px dashed #d8c3a3;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}
.upload-box strong { display: block; color: var(--blue); font-size: 0.95rem; }
.upload-box small { color: var(--ink-dim); font-weight: 400; }
.upload input:focus-visible + .upload-box { outline: 2px solid var(--blue); outline-offset: 2px; }
.commission-form.show-errors .upload input:invalid + .upload-box { border-color: #c2334d; }

.upload-list { list-style: none; padding: 0; margin: -0.5rem 0 0; font-size: 0.85rem; color: var(--ink-dim); }
.upload-list li::before { content: "✓ "; color: var(--blue); }
.upload-list li.warn::before { content: ""; }

.hp { position: absolute; left: -9999px; }

.form-status { min-height: 1.5em; margin-top: 1rem; font-size: 0.9rem; color: var(--ink-dim); }
.form-status.is-error { color: #a8243d; }

.thank-you {
  max-width: 720px;
  margin-top: 2rem;
  padding: 2.5rem;
  border-radius: 4px;
  background: rgba(255, 247, 251, 0.7);
}
.thank-you h2 { margin-top: 0; }

.signoff {
  margin-top: 2.5rem;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--ink) !important;
}
.signoff-name {
  display: inline-block;
  margin-top: 0.4rem;
  font-style: italic;
  font-size: 1.6rem;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: var(--maroon);
}

@media (max-width: 820px) {
  .product { grid-template-columns: 1fr; gap: 2rem; padding: 2rem 1rem 3rem; }
  .product-media { position: static; }
  .product-photo { aspect-ratio: 1 / 1; }
  .steps { grid-template-columns: 1fr; gap: 1.5rem; }
  .commission-form fieldset { padding: 1.25rem; }
}

@media (max-width: 520px) {
  .row, .row-3 { grid-template-columns: 1fr; }
  .sizes li { grid-template-columns: 4.5rem 1fr auto; gap: 0.5rem; }
  .hankie-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
}

/* ============================================
   Floating keepsakes (scanned lace butterfly and ribbon flowers)
   Sits above the cream background and below the page content.
   ============================================ */
.site-header, main, .site-footer { position: relative; z-index: 1; }

/* floaters.js lays these out in mirrored rows down the whole page */
.floaters {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.floater {
  position: absolute;
  transform: translate(-50%, -50%);
}

.floater.mirror { transform: translate(-50%, -50%) scaleX(-1); }

.floater img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.55;
  filter: drop-shadow(0 6px 10px rgba(90, 60, 30, 0.12));
  animation: drift 18s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes drift {
  0%   { transform: translate(0, 0) rotate(var(--r, 0deg)); }
  50%  { transform: translate(5px, -10px) rotate(calc(var(--r, 0deg) + 3deg)); }
  100% { transform: translate(-4px, 5px) rotate(calc(var(--r, 0deg) - 2deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .floater img { animation: none; transform: rotate(var(--r, 0deg)); }
}

@media (max-width: 820px) {
  .floater img { opacity: 0.38; }
}

.short-field { max-width: 220px; }

.choice-help, .field-help {
  display: block;
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--ink-dim);
  margin: 0.15rem 0 0.6rem;
  max-width: 56ch;
}

/* ============================================
   Vintage pass: script headings, letterpress serif, grainy ink,
   framed wordmark on the left, lace trims, film grain
   ============================================ */
:root {
  --script: "Pinyon Script", "Snell Roundhand", cursive;     /* wordmark, big headings */
  --fell: "IM Fell English SC", Georgia, serif;              /* small headings */
  --fell-sc: "IM Fell English SC", Georgia, serif;           /* labels, menu, buttons */
  /* speckled mask that makes red ink look printed */
  --ink-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.1 0 0 0 1.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  /* lace trim: a straight edge, a row of eyelets, and scallops */
  --lace: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='20'%3E%3Cg fill='none' stroke='%23cc1e36' stroke-opacity='.55' stroke-width='1'%3E%3Cpath d='M0 1.5H36'/%3E%3Ccircle cx='9' cy='6' r='1.6'/%3E%3Ccircle cx='27' cy='6' r='1.6'/%3E%3Cpath d='M0 9.5Q9 22 18 9.5Q27 22 36 9.5'/%3E%3Cpath d='M4 11Q9 17 14 11M22 11Q27 17 32 11' stroke-opacity='.35'/%3E%3C/g%3E%3Cg fill='%23cc1e36' fill-opacity='.4'%3E%3Ccircle cx='18' cy='5' r='1'/%3E%3Ccircle cx='0' cy='5' r='1'/%3E%3Ccircle cx='36' cy='5' r='1'/%3E%3C/g%3E%3C/svg%3E");
}

/* Printed-ink grain on the display type */
.mark, h1, h2, .signoff-name {
  -webkit-mask-image: var(--ink-grain);
  mask-image: var(--ink-grain);
  -webkit-mask-size: 180px 180px;
  mask-size: 180px 180px;
}

/* Script for the wordmark and big headings */
.mark,
.category-header h1,
.product-info h1,
.page-section h2,
.thank-you h2,
.signoff-name,
.site-footer .mark {
  font-family: var(--script);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  font-variation-settings: normal;
}

.product-info h1 { font-size: clamp(2.7rem, 6vw, 4.1rem); line-height: 1.1; }
.page-section h2 { font-size: clamp(2.3rem, 4.6vw, 3rem); line-height: 1.15; }
.signoff-name { font-size: 2.4rem; }
.site-footer .mark { font-size: 2rem; }

/* Letterpress serif for the smaller headings */
.steps h3, .commission-form legend, .size-name, .hankie-num, .feature-text h2, .signoff {
  font-family: var(--fell);
}
.steps h3 { font-size: 1.35rem; font-style: italic; }
.commission-form legend { font-size: 1.5rem; font-style: italic; }

/* Old-style small caps for labels, the menu and buttons */
.eyebrow, .small-heading, .site-header nav a, .btn {
  font-family: var(--fell-sc);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: none;
}
.eyebrow, .small-heading { font-size: 1rem; }
.site-header nav a { font-size: 1.05rem; }
.btn { font-size: 1.05rem; padding: 0.8rem 1.6rem; }

/* Header: framed wordmark on the left, menu on the right */
.site-header {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1rem 2rem;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 2rem 2rem 0;
  text-align: left;
}
.site-header > .mark, .mark-frame { justify-self: start; }
.site-header nav { justify-self: end; margin: 0; padding: 0; justify-content: flex-end; }
.site-header .eyelets { grid-column: 1 / -1; width: 100%; }

.mark-frame {
  position: relative;
  display: inline-block;
  padding: 0.55rem 1.6rem 0.75rem;
  text-decoration: none;
  border: 1.5px solid rgba(204, 30, 54, 0.8);
  outline: 1px solid rgba(204, 30, 54, 0.45);
  outline-offset: 4px;
  border-radius: 2px;
}
.mark-frame .mark { font-size: clamp(2.4rem, 5vw, 3.1rem); line-height: 1.1; color: var(--maroon); }
.mark-flower { position: absolute; height: auto; pointer-events: none; }
.mf-1 { width: 40px; top: -18px; left: -20px; transform: rotate(-18deg); }
.mf-2 { width: 28px; bottom: -14px; right: -14px; transform: rotate(12deg); }

/* Lace trims replace the dotted line and the plain section rules */
.eyelets {
  height: 20px;
  background: var(--lace) left top / 36px 20px repeat-x;
  color: transparent;
  margin-top: 1.25rem;
}
.page-section + .page-section {
  border-top: 0;
  background: var(--lace) left top / 36px 20px repeat-x;
  padding-top: 3.5rem;
}

/* Film: slightly stronger moving grain and a warm red vignette */
body::before {
  inset: -120px;
  opacity: 0.22;
  animation: film-grain 0.9s steps(5) infinite;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 75% at 50% 45%, transparent 60%, rgba(140, 20, 35, 0.10) 100%);
}
@keyframes film-grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-40px, 20px); }
  40%  { transform: translate(30px, -30px); }
  60%  { transform: translate(-20px, -50px); }
  80%  { transform: translate(50px, 30px); }
  100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

@media (max-width: 820px) {
  .site-header { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 2rem 1rem 0; }
  .site-header > .mark, .mark-frame, .site-header nav { justify-self: center; }
  .site-header nav { justify-content: center; }
}

/* Handkerchief picker inside the form */
.hankie-browser { margin: -0.4rem 0 1.4rem; }
.hankie-browser summary {
  cursor: pointer;
  display: inline-block;
  font-family: var(--fell);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--maroon);
  text-decoration: underline;
  text-decoration-color: var(--wood);
  text-underline-offset: 4px;
}
.hankie-browser[open] summary { margin-bottom: 0.6rem; }
.hankie-browser .hankie-grid { margin-top: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.9rem; }

/* Two typefaces only: Pinyon Script for titles, IM Fell English for everything else */
input, select, textarea, button { font-family: var(--sans); }
.size-price { font-weight: 400; font-size: 1.1rem; }

/* Small caps everywhere outside the titles; the SC face has no italic */
.steps h3, .commission-form legend, .hankie-browser summary, .aside { font-style: normal; }

.upload-box strong { font-size: 1.1rem; }
.upload-box small { display: block; margin-top: 0.3rem; font-size: 0.95rem; color: var(--ink-dim); }

/* Sign-off in the cursive, with a tiny embroidered flower instead of an emoji */
.signoff {
  font-family: var(--script) !important;
  font-size: 2rem;
  line-height: 1.35;
  -webkit-mask-image: var(--ink-grain);
  mask-image: var(--ink-grain);
  -webkit-mask-size: 180px 180px;
  mask-size: 180px 180px;
}
.signoff-name { font-size: 2.6rem; }
.signoff-flower { display: inline-block; width: 26px; height: auto; vertical-align: -2px; margin-left: 0.2rem; }

/* Size names: small caps, a little smaller */
.size-name { font-family: var(--fell-sc); font-size: 1.05rem; letter-spacing: 0.06em; }
.sizes { margin-bottom: 0.5rem; }

/* Hint text inside boxes: faint italic so it reads as something to type over */
.commission-form textarea::placeholder,
.commission-form input::placeholder {
  color: #c98a93;
  opacity: 1;
  font-style: italic;
  font-size: 0.95rem;
}

/* Titles use the "Love, Lera" wordmark face: IM Fell English SC, slanted.
   (Replaces the cursive Pinyon Script, which was hard to read.) */
.mark,
.site-header .mark,
.mark-frame .mark,
.site-footer .mark,
.category-header h1,
.product-info h1,
.page-section h2,
.thank-you h2,
.signoff,
.signoff-name {
  font-family: var(--fell-sc) !important;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.02em;
}
.mark-frame .mark { font-size: clamp(1.9rem, 4vw, 2.4rem); }
.product-info h1 { font-size: clamp(2.1rem, 4.6vw, 3rem); line-height: 1.12; }
.page-section h2 { font-size: clamp(1.8rem, 3.6vw, 2.3rem); line-height: 1.15; }
.signoff { font-size: 1.45rem; }
.signoff-name { font-size: 1.9rem; }
.site-footer .mark { font-size: 1.6rem; }

/* Compact steps: number sits beside the step title */
#how-it-works { padding-top: 2.75rem; padding-bottom: 2rem; }
#how-it-works h2 { margin-bottom: 0.25rem; }
.steps { margin: 1.25rem 0 0.5rem; gap: 1.25rem 2rem; }
.steps li { display: grid; grid-template-columns: auto 1fr; column-gap: 0.7rem; align-items: baseline; }
.steps .step-num { width: 1.7rem; height: 1.7rem; font-size: 0.95rem; margin: 0; grid-row: 1; }
.steps h3 { grid-column: 2; margin: 0 0 0.25rem; }
.steps p { grid-column: 2; }

/* Real scanned lace trim (images/lace-trim.webp) between sections and under the header.
   The tile is drawn at half size so it stays crisp on retina screens. */
.eyelets,
.page-section + .page-section::before {
  height: 44px;
  background: url("images/lace-trim.webp") left top / auto 44px repeat-x;
  filter: drop-shadow(0 2px 2px rgba(120, 60, 50, 0.22));
}
.eyelets { margin-top: 1.25rem; }
.page-section + .page-section {
  position: relative;
  background: none;
  padding-top: 4.5rem;
}
.page-section + .page-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 2rem;
  right: 2rem;
}
@media (max-width: 820px) {
  .eyelets, .page-section + .page-section::before { height: 34px; background-size: auto 34px; }
  .page-section + .page-section::before { left: 1rem; right: 1rem; }
  .page-section + .page-section { padding-top: 3.75rem; }
}

/* Lace runs edge to edge on every screen size */
html, body { overflow-x: clip; }
.site-header .eyelets {
  width: 100vw;
  max-width: none;
  justify-self: start;
  margin-left: calc(50% - 50vw);
  margin-right: 0;
}
.page-section + .page-section::before {
  left: calc(50% - 50vw);
  right: auto;
  width: 100vw;
}
@media (max-width: 820px) {
  .page-section + .page-section::before { left: calc(50% - 50vw); right: auto; }
}

/* Single price with the available sizes */
.product-info > p.price:not(.x):not(.y) {
  font-family: var(--fell-sc);
  font-size: 1.9rem;
  color: var(--blue);
  margin: 1.5rem 0 0.35rem;
}
.product-info > p.sizes-note:not(.x):not(.y) { color: var(--ink-dim); font-size: 1rem; margin: 0 0 0.25rem; max-width: 48ch; }
.upload .field-help { margin-top: 0.3rem; }

/* Live Google Drive folder of available handkerchiefs */
.hankie-drive {
  display: block;
  width: 100%;
  height: 460px;
  margin-top: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #fff;
}
@media (max-width: 520px) { .hankie-drive { height: 380px; } }

/* Price: the body font, upright and clean rather than small caps */
.product-info > p.price:not(.x):not(.y) {
  font-family: var(--sans);
  font-size: 1.75rem;
  font-variant-numeric: lining-nums;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: var(--blue);
  padding-bottom: 0;
  border-bottom: 0;
  display: block;
}