/* ==========================================================================
   The Vintage Letter Writing Society — shared styles
   --------------------------------------------------------------------------
   Palette + type live in :root so the whole look can be retuned in one place.
   ========================================================================== */

/* --- Petal & Quill (Tom Chalky) — licensed webfont, self-hosted -----------
   Only the Rounded Regular cut is loaded: it is the sole weight used on the
   site (the wordmark). Adding cuts costs ~80KB each, so add only when used. */
@font-face {
  font-family: "Petal Quill";
  src: url("../fonts/petal-quill-round-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Palette — warm paper, ink, dusty rose, brown, old gold */
  --paper: #f6efe3;
  --paper-deep: #efe4d0;
  --cream: #fbf7ee;
  --ink: #413a33;          /* charcoal brown — softer than a true black */
  --ink-soft: #75695c;
  --rose: #b8685e;
  --rose-deep: #9c5248;
  --bark: #7a6650;      /* warm brown — replaced the old sage green */
  --bark-deep: #55483a; /* deep brown, kin to the footer */
  --gold: #b08b47;
  --line: #d9cbb2;

  --font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: "EB Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --font-label: "Karla", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --font-script: "Petal Quill", "Snell Roundhand", cursive;

  /* Headline weight lives here so the whole site retunes from one value.
     Keep at 400 unless the chosen display face actually ships a heavier cut —
     asking for a weight a font doesn't have makes the browser fake it. */
  --display-weight: 400;

  --radius: 10px;
  --shadow: 0 10px 30px rgba(59, 49, 40, 0.10);
  --shadow-soft: 0 4px 14px rgba(59, 49, 40, 0.08);
  --wrap: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--ink);
  background-color: var(--paper);
  /* Faint paper grain, pure CSS — no image assets needed */
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(176, 139, 71, 0.05), transparent 55%),
    radial-gradient(ellipse at 85% 90%, rgba(184, 104, 94, 0.05), transparent 55%);
}

img, svg { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: var(--ink);
}

/* Script accents inside headings. Deliberately scoped to <em> so the choice of
   which words get the flourish is made in the HTML, phrase by phrase. Keep them
   to two or three words — script is charming in bursts and tiring in sentences. */
h1 em, h2 em, h3 em {
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 400;
  font-size: 1.18em;
  line-height: 0.85;
  color: var(--rose-deep);
}

h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); }
h3 { font-size: clamp(1.35rem, 2.5vw, 1.65rem); }

p { margin: 0 0 1em; }

a { color: var(--rose-deep); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 3px;
}

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2rem);
}

/* Small caps eyebrow labels */
.eyebrow {
  font-family: var(--font-label);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bark-deep);
  margin: 0 0 0.9rem;
}

.lede {
  font-size: clamp(1.15rem, 2.2vw, 1.3rem);
  color: var(--ink-soft);
  max-width: 42em;
}

/* --- Skip link ---------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  background: var(--ink);
  color: var(--cream);
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  font-family: var(--font-label);
  transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; }

/* --- Header / navigation ------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 247, 238, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--ink);
  /* The name is now nowrap, so the brand must not be squeezed below its own
     width — otherwise a tight header would push it into the nav rather than
     letting the nav give ground first. */
  flex: none;
}

.brand svg { flex: none; }

.brand-name {
  font-family: var(--font-script);
  /* Slightly smaller than it was. At 1.75rem "The Vintage Letter" needed more
     room than the header could give it once the nav and basket had taken their
     share, so it broke after "Vintage" and the name arrived in three lines with
     "Letter" orphaned in the middle. */
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.01em;
  /* Break ONLY at the <br> in the markup. Without this the line breaks
     wherever the header happens to run out of room, which is a different place
     on every screen width — so the logo changed shape as the window resized. */
  white-space: nowrap;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.5vw, 1.8rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  font-family: var(--font-label);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--ink);
  padding: 0.4rem 0.1rem;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover { border-bottom-color: var(--gold); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--rose); color: var(--rose-deep); }

.nav-cta {
  background: var(--rose);
  color: var(--cream) !important;
  padding: 0.55rem 1.1rem !important;
  border-radius: 999px;
  border-bottom: none !important;
  transition: background 0.2s ease;
}
.nav-cta:hover { background: var(--rose-deep); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.5rem 0.65rem;
  cursor: pointer;
  color: var(--ink);
}

.nav-toggle .bars { display: block; width: 22px; }
.nav-toggle .bars span {
  display: block;
  height: 2px;
  background: var(--ink);
  margin: 5px 0;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 760px) {
  .nav-toggle { display: block; }

  .brand-name { font-size: 1.45rem; }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-soft);
    display: none;
  }
  .site-nav.open { display: block; }

  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.6rem 1.2rem 1.2rem;
  }
  .site-nav li { border-bottom: 1px solid var(--line); }
  .site-nav li:last-child { border-bottom: none; padding-top: 0.8rem; }
  .site-nav a { display: block; padding: 0.85rem 0.2rem; border-bottom: none; }
  .nav-cta { display: inline-block !important; text-align: center; }
}

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  border-radius: 999px;
  padding: 0.85rem 1.9rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--rose); color: var(--cream); }
.btn-primary:hover { background: var(--rose-deep); }

.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink-soft); }
.btn-secondary:hover { border-color: var(--ink); background: rgba(59, 49, 40, 0.05); }

.btn-bark { background: var(--bark); color: var(--cream); }
.btn-bark:hover { background: var(--bark-deep); }

.btn-small { padding: 0.55rem 1.2rem; font-size: 0.85rem; }

/* --- Hero --------------------------------------------------------------- */
.hero {
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(3rem, 7vw, 5rem);
  overflow: hidden;
}

.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero-copy .btn { margin-right: 0.8rem; margin-bottom: 0.8rem; }

.hero-note {
  font-family: var(--font-label);
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 0.4rem;
}

.hero-art { position: relative; }

/* On a phone the photograph leads. Hannah's work is the reason anyone stays on
   this page, and a wall of type above the first image is what makes a small
   shop look like every other template. The copy keeps its DOM order for
   screen readers and for search engines; only the visual order changes. */
@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-art  { max-width: 480px; margin-inline: auto; order: -1; }
  /* The eyebrow line leads, then the photo, then the headline. Pulling just
     that one line above the picture rather than the whole copy block. */
  .hero-copy { display: contents; }
  .hero-copy .eyebrow { order: -2; text-align: center; }
  .hero-copy h1,
  .hero-copy .lede,
  .hero-copy .btn { order: 0; }
}

/* --- Placeholder art plates --------------------------------------------- */
/* Art-directed stand-ins until real product photography arrives.
   Swap: replace the <svg> inside .art-plate with an <img>, keep the
   .placeholder-chip until the real photo is in, then delete the chip. */
.art-plate {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--paper-deep);
  border: 1px solid var(--line);
}

.art-plate svg { display: block; width: 100%; }

.placeholder-chip {
  position: absolute;
  bottom: 0.7rem;
  left: 0.7rem;
  background: rgba(59, 49, 40, 0.82);
  color: var(--cream);
  font-family: var(--font-label);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  pointer-events: none;
}

/* --- Benefit banners ----------------------------------------------------- */
.benefits {
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
  background: var(--cream);
  border-block: 1px solid var(--line);
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 3vw, 2rem);
  margin-top: 2rem;
}

.benefit-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem 1.6rem;
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.benefit-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

.benefit-card .icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(119, 133, 95, 0.14);
  margin-bottom: 1.1rem;
  color: var(--bark-deep);
}

.benefit-card h3 { margin-bottom: 0.4rem; }
.benefit-card p { color: var(--ink-soft); font-size: 1.02rem; margin: 0; }

@media (max-width: 820px) {
  .benefit-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
}

/* --- Generic sections ---------------------------------------------------- */
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section-alt { background: var(--cream); border-block: 1px solid var(--line); }

/* --- The gap between sections ----------------------------------------------
   Every section carries that padding top AND bottom, so two stacked sections
   put up to ELEVEN rem of nothing between them. One section's worth is a
   breath; two is a gap you scroll through wondering if the page has ended.

   So where sections meet, each contributes about half. The page then reads as
   a sequence rather than a row of islands.

   A tinted band is the exception, twice over. Its padding sits INSIDE the
   tint, doing the work of holding the band off its own edges rather than
   separating it from the neighbour — so its own top and bottom are left alone,
   and only the plain section on the other side gives ground. */
.section:not(.section-alt):has(+ .section) {
  padding-bottom: clamp(1.75rem, 4vw, 3rem);
}
.section + .section:not(.section-alt) {
  padding-top: clamp(1.75rem, 4vw, 3rem);
}
.section-header { max-width: 640px; margin-bottom: clamp(1.6rem, 4vw, 2.8rem); }
.section-header.center { margin-inline: auto; text-align: center; }

/* --- What's inside ------------------------------------------------------- */
.inside .wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (max-width: 860px) {
  .inside .wrap { grid-template-columns: 1fr; }
  .inside .art-plate { max-width: 480px; }
}

.inside-list { list-style: none; margin: 1.6rem 0 0; padding: 0; }

.inside-list li {
  display: flex;
  gap: 1.1rem;
  padding: 1.1rem 0;
  border-bottom: 1px dashed var(--line);
}
.inside-list li:last-child { border-bottom: none; }

.inside-list .tick {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(176, 139, 71, 0.14);
  color: var(--gold);
}

.inside-list h3 { font-size: 1.25rem; margin-bottom: 0.15rem; }
.inside-list p { margin: 0; color: var(--ink-soft); font-size: 1rem; }

/* --- How it works -------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 3vw, 2rem);
  counter-reset: step;
}

.step {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.4rem 1.6rem 1.6rem;
  box-shadow: var(--shadow-soft);
}

.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: -1.1rem;
  left: 1.4rem;
  width: 2.3rem;
  height: 2.3rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bark);
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  box-shadow: var(--shadow-soft);
}

.step h3 { font-size: 1.3rem; }
.step p { margin: 0; color: var(--ink-soft); font-size: 1rem; }

@media (max-width: 820px) {
  .steps { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; row-gap: 2.2rem; }
}

/* --- Plans --------------------------------------------------------------- */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 3vw, 2rem);
  align-items: stretch;
}

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.7rem 1.7rem;
  box-shadow: var(--shadow-soft);
  text-align: center;
}

.plan-card.featured {
  border-color: var(--rose);
  box-shadow: var(--shadow);
}

.plan-flag {
  position: absolute;
  top: -0.85rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--rose);
  color: var(--cream);
  font-family: var(--font-label);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  white-space: nowrap;
}

.plan-name { font-size: 1.4rem; margin-bottom: 0.2rem; }

.plan-price {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 600;
  color: var(--rose-deep);
  line-height: 1;
  margin: 0.5rem 0 0.1rem;
}

.plan-price small {
  font-size: 1rem;
  font-family: var(--font-label);
  font-weight: 600;
  color: var(--ink-soft);
}

.plan-sub { font-family: var(--font-label); font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 1rem; }

.plan-card ul {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 1rem 0 0;
  border-top: 1px dashed var(--line);
  font-size: 0.98rem;
  color: var(--ink-soft);
  flex: 1;
}
.plan-card li { padding: 0.28rem 0; }

@media (max-width: 820px) {
  .plan-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; row-gap: 2rem; }
}

/* --- Referral band ------------------------------------------------------- */
.referral {
  background: var(--bark-deep);
  color: var(--cream);
  padding: clamp(3rem, 7vw, 5rem) 0;
}

.referral h2, .referral h3 { color: var(--cream); }
.referral .eyebrow { color: #cdd6bd; }

.referral .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (max-width: 860px) { .referral .wrap { grid-template-columns: 1fr; } }

.referral-steps { list-style: none; margin: 1.4rem 0 0; padding: 0; }

.referral-steps li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 0.75rem 0;
}

.referral-steps .dot {
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(251, 247, 238, 0.15);
  border: 1px solid rgba(251, 247, 238, 0.4);
  font-family: var(--font-display);
  font-weight: 700;
}

.referral-steps p { margin: 0; color: #ecefe2; }
.referral-steps strong { color: var(--cream); }

.referral-card {
  background: var(--cream);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 2rem 1.8rem;
  box-shadow: var(--shadow);
  text-align: center;
}

.referral-code-demo {
  display: inline-block;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.14em;
  background: var(--paper-deep);
  border: 2px dashed var(--gold);
  border-radius: 8px;
  padding: 0.7rem 1.4rem;
  margin: 0.8rem 0 1rem;
}

.referral-fineprint { font-family: var(--font-label); font-size: 0.78rem; color: var(--ink-soft); margin: 0.8rem 0 0; }

/* --- Editor's/assumption note (visible only in source, or subtle) -------- */
.demo-note {
  background: rgba(176, 139, 71, 0.12);
  border: 1px solid rgba(176, 139, 71, 0.4);
  border-radius: var(--radius);
  font-family: var(--font-label);
  font-size: 0.85rem;
  color: var(--ink-soft);
  padding: 0.8rem 1.1rem;
  margin: 1.2rem 0 0;
}

/* --- Footer -------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: #d8cfc4;
  padding: clamp(2.5rem, 6vw, 4rem) 0 2rem;
  font-size: 1rem;
}

.site-footer .wrap {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.site-footer h3 {
  color: var(--cream);
  font-size: 1.3rem;
}

.site-footer h4 {
  color: var(--cream);
  font-family: var(--font-label);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}

.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { padding: 0.25rem 0; }
.site-footer a { color: #d8cfc4; text-decoration: none; }
.site-footer a:hover { color: var(--cream); text-decoration: underline; }

.footer-bottom {
  margin-top: 2.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(216, 207, 196, 0.25);
  font-family: var(--font-label);
  font-size: 0.8rem;
  color: #a89c8e;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

@media (max-width: 760px) {
  .site-footer .wrap { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Shop page
   ========================================================================== */

.shop-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: start;
}

@media (max-width: 900px) {
  .shop-layout { grid-template-columns: 1fr; }
  .order-summary { position: static; }
}

.shop-panel {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2rem);
  box-shadow: var(--shadow-soft);
  margin-bottom: 1.6rem;
}

.shop-panel h2 {
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.shop-panel h2 .step-num {
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bark);
  color: var(--cream);
  font-size: 1.05rem;
}

/* Plan picker (radio cards) */
.picker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; }
@media (max-width: 640px) { .picker-grid { grid-template-columns: 1fr; } }

.picker-option { position: relative; }

.picker-option input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}

.picker-option label {
  display: block;
  height: 100%;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 1.1rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.picker-option input:hover + label { border-color: var(--gold); }
.picker-option input:checked + label {
  border-color: var(--rose);
  background: rgba(184, 104, 94, 0.07);
}
.picker-option input:focus-visible + label {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.picker-option .p-name { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; display: block; }
.picker-option .p-price { color: var(--rose-deep); font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; display: block; margin: 0.2rem 0; }
.picker-option .p-note { font-family: var(--font-label); font-size: 0.75rem; color: var(--ink-soft); display: block; }

/* Recipient toggle (self vs gift) */
.picker-grid.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .picker-grid.two { grid-template-columns: 1fr; } }

/* Forms */
.field { margin-bottom: 1.1rem; }
.field label {
  display: block;
  font-family: var(--font-label);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.35rem;
}

.field input, .field textarea, .field select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
}

.field textarea { resize: vertical; min-height: 5.5rem; }

.field .hint { font-family: var(--font-label); font-size: 0.78rem; color: var(--ink-soft); margin-top: 0.3rem; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .field-row { grid-template-columns: 1fr; } }

.field-error {
  display: none;
  font-family: var(--font-label);
  font-size: 0.8rem;
  color: var(--rose-deep);
  margin-top: 0.3rem;
}
.field.invalid .field-error { display: block; }
.field.invalid input, .field.invalid textarea { border-color: var(--rose-deep); }

/* Referral apply row */
.code-row { display: flex; gap: 0.8rem; align-items: stretch; }
.code-row input { flex: 1; text-transform: uppercase; letter-spacing: 0.08em; }
.code-row .btn { flex: none; }
@media (max-width: 480px) { .code-row { flex-direction: column; } }

.code-status {
  font-family: var(--font-label);
  font-size: 0.85rem;
  margin: 0.6rem 0 0;
  display: none;
}
.code-status.ok { display: block; color: var(--bark-deep); }
.code-status.err { display: block; color: var(--rose-deep); }

/* Order summary */
.order-summary {
  position: sticky;
  top: 5.5rem;
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2rem);
  box-shadow: var(--shadow);
}

.order-summary h2 { color: var(--cream); font-size: 1.5rem; }

.summary-lines { list-style: none; margin: 1.2rem 0; padding: 0; font-size: 1rem; }

.summary-lines li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px dashed rgba(251, 247, 238, 0.25);
}

.summary-lines .value { font-family: var(--font-label); font-weight: 600; text-align: right; }
.summary-lines .discount-line { color: #cfdcae; }
.summary-lines .discount-line .value { color: #cfdcae; }

.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.9rem 0 0.3rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
}

.summary-total .amount { font-size: 2rem; color: #f2c98a; }

.summary-note { font-family: var(--font-label); font-size: 0.78rem; color: #b7ab9c; margin: 0.6rem 0 1.2rem; }

.order-summary .btn { width: 100%; text-align: center; }

/* Confirmation */
.confirmation {
  background: var(--cream);
  border: 2px solid var(--bark);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 4vw, 2.6rem);
  box-shadow: var(--shadow);
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}

.confirmation .seal { margin-bottom: 1rem; }

.your-code {
  display: inline-block;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.16em;
  background: var(--paper-deep);
  border: 2px dashed var(--gold);
  border-radius: 8px;
  padding: 0.8rem 1.6rem;
  margin: 0.6rem 0 0.9rem;
}

.copy-feedback { font-family: var(--font-label); font-size: 0.85rem; color: var(--bark-deep); min-height: 1.4em; margin: 0.4rem 0 0; }

[hidden] { display: none !important; }

/* --- Page hero (interior pages) ------------------------------------------ */
.page-hero {
  padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
}
.page-hero .lede { margin-inline: auto; }

/* ==========================================================================
   About page
   ========================================================================== */

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-grid .art-plate { max-width: 420px; margin-inline: auto; }
}

.about-copy p { color: var(--ink-soft); }
.about-copy p strong { color: var(--ink); }

blockquote.pull {
  font-family: var(--font-script);
  /* Petal & Quill is already slanted; italic on top would be a synthetic
     double-slant. Also runs small for its point size, hence the bump. */
  font-style: normal;
  font-size: clamp(1.75rem, 3.8vw, 2.4rem);
  line-height: 1.25;
  color: var(--rose-deep);
  border-left: 3px solid var(--gold);
  margin: 2rem 0;
  padding: 0.4rem 0 0.4rem 1.4rem;
  line-height: 1.4;
}

blockquote.pull cite {
  display: block;
  font-family: var(--font-label);
  font-style: normal;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 0.6rem;
}

/* ==========================================================================
   Session 3 additions — narrow pages, FAQ, collections, notices, contact
   ========================================================================== */

.wrap-narrow { max-width: 720px; }

.plan-grid.two-up { max-width: 760px; margin-inline: auto; }

/* --- Notice: used wherever something isn't live yet. Deliberately calm
   rather than alarming — it's an honest status, not an error. --- */
.notice {
  background: var(--cream);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
}
.notice p { margin: 0 0 0.5rem; font-size: 1rem; }
.notice p:last-of-type { margin-bottom: 0.9rem; }
.notice-wide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.4rem;
  margin-bottom: 2.4rem;
}
.notice-wide p { margin: 0; flex: 1 1 22rem; }
.notice-wide .btn { margin: 0; }

/* --- FAQ --- */
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 2.4rem 1.15rem 0;
  position: relative;
  font-family: var(--font-display);
  font-size: 1.28rem;
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: var(--rose);
  line-height: 1;
}
.faq-item[open] summary::after { content: "–"; }
.faq-item summary:hover { color: var(--rose-deep); }
.faq-answer { padding: 0 2.4rem 1.3rem 0; color: var(--ink-soft); }
.faq-answer p { margin: 0; font-size: 1.02rem; }

/* --- Shop collections --- */
/* Two across, never four.
   `auto-fit` with a 240px minimum filled a wide screen with as many columns as
   would go — four on a desktop — which made each collection a thumbnail and
   the shelf look like a catalogue page. Two gives each photograph room to be
   looked at, and you scroll for the rest. That is the trade a small shop wants:
   fewer things, seen properly.

   One column on a phone, so the photograph stays square and large rather than
   shrinking to fit a second beside it. */
.collection-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.6rem, 4vw, 2.6rem);
}
@media (min-width: 680px) {
  .collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* On a very wide monitor two columns would make each card enormous, so the
   shelf stops growing and centres instead. */
.collection-grid { max-width: 1000px; margin-inline: auto; }
.collection-card h3 { margin: 1rem 0 0.35rem; font-size: 1.3rem; }
.collection-card p { margin: 0; color: var(--ink-soft); font-size: 0.98rem; }
.collection-status {
  margin-top: 0.7rem !important;
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bark-deep);
}

/* --- Join summary --- */
.summary-panel { align-self: start; position: sticky; top: 1.5rem; }
.summary { margin: 0 0 1.4rem; }
.summary > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px dashed var(--line);
}
.summary dt {
  font-family: var(--font-label);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.summary dd { margin: 0; text-align: right; }

/* --- Contact --- */
.contact-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem;
  text-align: center;
}
.contact-card h2 { margin-top: 0; }
.contact-email { font-size: 1.35rem; margin: 0.4rem 0 1rem; }
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.8rem;
  margin-top: 2.6rem;
}
.contact-grid h3 { font-size: 1.15rem; margin-bottom: 0.3rem; }
.contact-grid p { color: var(--ink-soft); font-size: 0.98rem; margin: 0; }

/* --- Sign in --- */
.signin-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem;
}
.signin-card input:disabled {
  background: var(--paper-deep);
  cursor: not-allowed;
  opacity: 0.7;
}
.signin-card .btn[disabled] { opacity: 0.5; pointer-events: none; }

/* --- Join: penpal details panel --------------------------------------------- */
.penpal-panel .field-row { gap: 0.9rem; }

/* --- About: Hannah's origin story ------------------------------------------
   Set a touch larger than body copy and on cream, because it is the most
   personal thing on the site and should read like a letter rather than a page. */
.origin {
  background: var(--cream);
  border-block: 1px solid var(--line);
}
.origin p {
  font-size: 1.18rem;
  line-height: 1.7;
  margin-bottom: 1.1em;
}
/* --- Real photographs ------------------------------------------------------
   Every photo is 960x1280 portrait. Rather than force them into landscape
   frames and lose the composition, each context gets an aspect ratio that
   suits it and the image covers that box. */
.art-plate img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}
.art-plate {
  margin: 0;
  overflow: hidden;
}
.art-plate figcaption,
.carousel figcaption.carousel-caption {
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  padding-top: 0.6rem;
}

/* The square set is 800x800 (Hannah's own crops), so every frame below is 1:1
   and nothing is ever cut off. If a non-square photo is ever dropped into one
   of these slots, change its rule rather than letting `cover` trim it. */
.hero-photo img { aspect-ratio: 1 / 1; height: auto; }
.inside .art-plate img { aspect-ratio: 1 / 1; height: auto; }

/* Shoppe cards: consistent height so the grid stays tidy whatever the photo. */
/* Shoppe photographs are square, the way a listing on Etsy is square — which is
   what Hannah shoots for and what buyers expect from a product grid.

   This rule used to say 3/4, and because a carousel slide also carries
   .art-plate it was MORE specific than the 1/1 below and quietly won. So every
   square photograph she uploaded was being cropped to a portrait letterbox
   inside the Shoppe, and nowhere else on the site. `object-fit: cover` on
   .art-plate img means anything not square crops from the centre rather than
   stretching. */
.collection-card .art-plate img { aspect-ratio: 1 / 1; height: auto; }

/* Carousel slides */
.carousel-slide img { aspect-ratio: 1 / 1; height: auto; }

/* --- Legal pages -----------------------------------------------------------
   Denser and plainer than the rest of the site. These are read to find one
   answer, not enjoyed, so the priority is scanning: clear headings, tight
   lists, nothing decorative in the way. */
.legal h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.75rem);
  margin-top: 2.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.legal h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.legal h3 {
  font-size: 1.15rem;
  margin-top: 1.8rem;
  margin-bottom: 0.3rem;
}
.legal p, .legal li { font-size: 1.02rem; line-height: 1.65; }
.legal ul { padding-left: 1.2rem; margin-bottom: 1.2em; }
.legal li { margin-bottom: 0.45em; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal-updated {
  font-family: var(--font-label);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

/* Pull quote inside Hannah's letter. NOT the script face — Petal & Quill is
   lovely for three words and unreadable for twenty-five. Display serif italic,
   with a rule above rather than a left border, so it reads as a breath in the
   text rather than an aside beside it. */
.letter-pull {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.45rem, 3vw, 1.95rem);
  line-height: 1.3;
  color: var(--rose-deep);
  text-align: center;
  border-left: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.6rem 0;
  margin: 2.4rem 0;
  max-width: 26em;
  margin-inline: auto;
}

/* Emphasis inside the letter — enough to catch the eye, not enough to shout. */
.origin p strong {
  font-weight: 600;
  color: var(--ink);
}

/* Portrait on the About page, presented as a photograph laid on the page
   rather than a cropped tile: cream mat, hairline, soft shadow, and the
   caption written on the mat itself. The tilt is tiny on purpose — enough to
   read as "placed by hand", not enough to look like a gimmick.
   The image keeps its native 3:4, so nothing is ever cut off. */
.portrait-plate {
  max-width: 320px;
  margin: 0 auto 1.8rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: var(--shadow);
  padding: 0.85rem;
  overflow: visible;
  transform: rotate(-1.4deg);
}
.portrait-plate img {
  aspect-ratio: 1 / 1;   /* the photograph's true shape — no crop */
  height: auto;
  border-radius: 2px;
}

/* Opening paragraph of the letter, set larger with a drop cap so the page
   begins the way a letter does rather than simply starting. */
.origin p.opening {
  font-size: 1.34rem;
  line-height: 1.55;
}
.origin p.opening::first-letter {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  float: left;
  font-size: 4.1rem;
  line-height: 0.82;
  padding: 0.06em 0.1em 0 0;
  color: var(--rose-deep);
}

.origin .sign-off {
  margin-top: 2rem;
  margin-bottom: 0.2em;
}
.origin .signature {
  font-family: var(--font-script);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--rose-deep);
  margin-top: 0;
}

/* Fine print. Was borrowing .referral-fineprint, which only existed for a
   section that no longer exists. */
.fineprint {
  font-family: var(--font-label);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0.8rem 0 0;
}

/* --- Welcome page: what happens next ---------------------------------------
   Deliberately NOT reusing .referral-steps: those were coloured for a dark
   background, so on cream paper the text came out white on white. */
.next-steps {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
}
.next-steps li {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  padding: 1rem 0;
  border-bottom: 1px dashed var(--line);
}
.next-steps li:last-child { border-bottom: none; }
.next-steps .num {
  flex: none;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--rose);
  min-width: 2.2rem;
}
.next-steps h3 { margin: 0 0 0.25rem; font-size: 1.22rem; }
.next-steps p { margin: 0; color: var(--ink-soft); font-size: 1.02rem; }

.welcome-follow {
  margin-top: 2.6rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.8rem;
}
.welcome-follow p { color: var(--ink-soft); margin-bottom: 1rem; }
.follow-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.follow-row .btn { margin: 0; }

/* --- Shoppe order summary (order.html) --------------------------------------
   A receipt, so it is quiet: no colour, no emphasis, nothing competing with
   the thank-you above it. Rows are a two-column flex rather than a table so a
   long product name wraps instead of squashing the price. */
.order-summary {
  margin-top: 1.6rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
}
.order-summary h2 {
  margin: 0 0 0.8rem;
  font-size: 1.18rem;
}
.order-items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.order-items li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px dashed var(--line);
}
.order-items li:last-child { border-bottom: none; }
.order-item-name { color: var(--ink); }
.order-item-qty {
  font-family: var(--font-label);
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.order-item-price {
  flex: none;
  font-family: var(--font-label);
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}
.order-total {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.9rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-label);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --- Next-delivery banner ---------------------------------------------------
   Sits directly under the sticky header. The month is injected by main.js so
   there is exactly one place to edit it each month. */
.delivery-banner {
  background: var(--bark-deep);
  color: var(--cream);
  font-family: var(--font-label);
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  text-align: center;
}
.delivery-banner p {
  /* margin-block only — a blanket `margin: 0` would clobber the
     `margin-inline: auto` that .wrap relies on to centre itself. */
  margin-block: 0;
  padding-block: 0.65rem;
}
.delivery-banner strong {
  color: #f0dcae;
  font-weight: 700;
}

/* --- Photo carousel (Join page) --------------------------------------------
   Scroll-snap rather than a JS slider: it works with a trackpad, a touchscreen,
   and arrow keys without us reimplementing any of that. Buttons just scroll. */
.carousel { margin: 0 0 2rem; }
.carousel-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 0.4rem;
  scrollbar-width: thin;
}
.carousel-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  margin: 0;
}
.carousel-controls {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.6rem;
}
.carousel-btn {
  font-family: var(--font-label);
  font-size: 1rem;
  line-height: 1;
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  width: 2.4rem;
  height: 2.4rem;
  cursor: pointer;
  transition: background 0.2s ease;
}
.carousel-btn:hover { background: var(--paper-deep); }
.carousel-caption {
  font-family: var(--font-label);
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 0.7rem;
  line-height: 1.5;
}

/* --- Giveaways (admin) ------------------------------------------------------ */
.give-form {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem;
  max-width: 46rem;
}
.give-form h3 { margin-top: 0; }
.give-form input[type="text"], .give-form input[type="email"] { width: 100%; }
/* Explains what the button actually does, below the button rather than above —
   it is reassurance for afterwards, not an instruction for before. */
.give-note { max-width: 46rem; margin-top: 1.4rem; }
.post-count.is-ok { color: var(--rose-deep); }
.post-count.is-bad { color: #a4423a; }

/* --- Shoppe listings (admin) ----------------------------------------------- */
.list-form {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem;
  max-width: 46rem;
}
.list-form h3 { margin-top: 0; }
.list-row { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.list-row .field { flex: 1 1 10rem; margin-bottom: 1rem; }
.list-form input[type="text"], .list-form textarea { width: 100%; }

.list-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.8rem;
}
/* A hidden listing should look hidden at a glance, not read as normal. */
.list-item.is-hidden { opacity: 0.62; border-style: dashed; }
.list-item-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}
.list-price { font-family: var(--font-label); font-size: 0.9rem; }
.list-member { color: var(--rose-deep); font-size: 0.78rem; }
.list-item .hint { margin: 0.3rem 0 0; }
.list-problems {
  margin: 0.6rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.8rem;
  color: #a4423a;
}
/* Photographs on a listing. The first one is what the Shoppe card shows, so it
   is labelled rather than left for her to work out by trial. */
.list-photos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.8rem;
}
.list-photo {
  position: relative;
  margin: 0;
  width: 72px;
}
.list-photo img {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--line);
}
.list-photo.is-first img { border-color: var(--rose-deep); border-width: 2px; }
.list-photo figcaption {
  font-family: var(--font-label);
  font-size: 0.6rem;
  text-align: center;
  color: var(--rose-deep);
  margin-top: 0.15rem;
}
.list-photo-x {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 1.15rem;
  height: 1.15rem;
  line-height: 1;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0;
}
.list-photo-x:hover { background: var(--rose-deep); color: #fff; border-color: var(--rose-deep); }
.list-photo-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border: 2px dashed var(--line);
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font-label);
  font-size: 0.68rem;
  color: var(--ink-soft);
  text-align: center;
}
.list-photo-add:hover { border-color: var(--rose-deep); color: var(--rose-deep); }
.list-photo-status {
  font-family: var(--font-label);
  font-size: 0.72rem;
  color: var(--ink-soft);
  align-self: center;
}

.list-item-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.7rem;
  font-family: var(--font-label);
  font-size: 0.78rem;
}
.list-stock { width: 4.5rem; }

/* --- Posting day: two groups ------------------------------------------------
   Membership deliveries and Shoppe orders are separate jobs at the bench, so
   they get separate tables rather than a mixed list with a column to squint at. */
.post-group { margin-bottom: 2.4rem; }
.post-group h3 {
  font-size: 1.05rem;
  margin: 0 0 0.3rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--rose-deep);
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.post-group-n {
  font-family: var(--font-label);
  font-size: 0.78rem;
  color: #fff;
  background: var(--rose-deep);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  line-height: 1.5;
}
.post-group .hint { margin: 0 0 0.6rem; }
/* Shoppe orders sit in a tinted panel so the eye can tell the two apart from
   across the room, not just by reading the heading. */
.post-group[data-group="order"] h3 { border-bottom-color: var(--gold); }
.post-group[data-group="order"] .post-group-n { background: var(--gold); }

/* Each batch is a self-contained job: download at the top, mark posted at the
   bottom, its own rows in between. The heading and its download button share a
   line so the button is never separated from the count it refers to. */
.post-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem 1.2rem;
}
.post-group-head h3 { flex: 1 1 14rem; margin-bottom: 0; }
.post-group-head .post-dl { flex: none; margin: 0 0 0.4rem; }
.post-group-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.9rem;
}

/* --- The weight box --------------------------------------------------------
   Small and quiet. It already holds the right answer, so it should read as a
   number Hannah can correct rather than a field demanding to be filled in. */
.post-weight { white-space: nowrap; }
.post-weight-in {
  width: 4.4rem;
  padding: 0.28rem 0.4rem;
  font-family: var(--font-label);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink-soft);
}
/* A weight she actually measured is worth more than a calculated one, so it
   stops looking provisional. */
.post-weight-in.is-byhand {
  color: var(--ink);
  font-weight: 700;
  border-color: var(--bark);
}
.post-weight-in:focus { outline: 2px solid var(--rose-deep); outline-offset: 1px; }
.post-weight-state {
  display: block;
  font-family: var(--font-label);
  font-size: 0.7rem;
  color: var(--ink-soft);
  margin-top: 0.15rem;
}
.post-weight-state.is-ok { color: var(--bark); }
.post-weight-state.is-bad { color: var(--rose-deep); }
.post-weight-fixed {
  font-family: var(--font-label);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

/* --- Flags -----------------------------------------------------------------
   Two visual weights, because the two kinds of flag mean different things.
   A derived flag is a fact ("this is the first one"); a set flag is Hannah's
   instruction. And "gift wrap" is louder than both, because getting that one
   wrong means a promise made at checkout is broken. */
.flag {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  line-height: 1;
  padding: 0.28rem 0.5rem;
  border-radius: 999px;
  margin: 0 0.25rem 0.25rem 0;
  white-space: nowrap;
  cursor: help;
}
/* Worked out by the system. */
.flag.is-derived { background: var(--cream); color: var(--ink-soft); border: 1px solid var(--line); }
/* Typed by Hannah. */
.flag.is-set { background: transparent; color: var(--rose-deep); border: 1px solid var(--rose-deep); }
/* The one that changes what goes in the envelope. */
.flag.is-strong {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
  font-weight: 700;
}
tr.has-strong-flag td { background: rgba(176, 139, 71, 0.07); }

.post-flags, .mem-flags { min-width: 8rem; }

.flag-edit {
  font-family: var(--font-label);
  font-size: 0.68rem;
  background: none;
  border: 1px dashed var(--line);
  border-radius: 999px;
  padding: 0.28rem 0.55rem;
  cursor: pointer;
  color: var(--ink-soft);
}
.flag-edit:hover { border-style: solid; border-color: var(--rose-deep); color: var(--rose-deep); }

.flag-editor {
  position: relative;
  margin-top: 0.6rem;
  padding: 0.9rem;
  background: var(--cream);
  border: 1px solid var(--rose-deep);
  border-radius: var(--radius);
  min-width: 20rem;
  white-space: normal;
}
.flag-editor-who { font-size: 0.8rem; margin: 0 0 0.6rem; }
.flag-picks { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.7rem; }
.flag-pick {
  font-family: var(--font-label);
  font-size: 0.68rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.28rem 0.55rem;
  cursor: pointer;
  color: var(--ink);
}
.flag-pick.is-on { background: var(--rose-deep); border-color: var(--rose-deep); color: #fff; }
.flag-n { opacity: 0.6; font-size: 0.62rem; }
.flag-add-label {
  display: block;
  font-family: var(--font-label);
  font-size: 0.7rem;
  color: var(--ink-soft);
  margin-bottom: 0.25rem;
}
.flag-add { width: 100%; font-size: 0.85rem; }
.flag-editor-actions { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.7rem; }

/* --- Database panel (admin) -------------------------------------------------
   A working screen for looking, not editing. Plain and dense on purpose. */
.db-where {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin-bottom: 1.4rem;
}
.db-name {
  font-family: var(--font-label);
  font-size: 1.05rem;
  margin: 0 0 0.3rem;
}
.db-where .hint { margin: 0.2rem 0 0; }

.db-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.7rem;
  margin-bottom: 1.8rem;
}
.db-table {
  text-align: left;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.8rem 0.9rem;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.db-table:hover { background: var(--cream); border-color: var(--rose-deep); }
.db-table.is-open { background: var(--cream); border-color: var(--rose-deep); border-width: 2px; }
.db-table-name {
  display: block;
  font-family: var(--font-label);
  font-size: 0.92rem;
  margin-bottom: 0.15rem;
}
.db-table-count {
  display: block;
  font-family: var(--font-label);
  font-size: 0.75rem;
  color: var(--rose-deep);
}
.db-table-about {
  display: block;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--ink-soft);
  margin-top: 0.4rem;
}

.db-open h3 { font-size: 1.1rem; margin-bottom: 0.2rem; }
.db-open .db-table-count { display: inline; }
.db-redacted { border-left: 3px solid var(--gold); padding-left: 0.7rem; }

/* Wide tables scroll sideways rather than squeezing every column to nothing. */
.db-scroll { overflow-x: auto; margin-top: 0.9rem; }
.db-table-rows { font-size: 0.78rem; white-space: nowrap; min-width: 100%; }
.db-table-rows th { font-size: 0.72rem; }
.db-null { color: var(--ink-soft); font-style: italic; opacity: 0.6; }

.db-pager {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1rem;
}
.db-pager button[disabled] { opacity: 0.45; cursor: default; }

/* The "your browser blocked the tab" line under the PitneyShip button. */
.post-dl-note { color: #a4423a; }

/* --- Photos panel (admin) --------------------------------------------------
   Hannah's end of the photo pipeline. Deliberately plain: this is a working
   screen, not a showcase, and the photographs supply all the colour it needs. */
.pho-season-bar {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin-bottom: 1.4rem;
}
.pho-season-bar .field { margin: 0; }
.pho-season-bar select { max-width: 18rem; }

/* The two order pickers sit under the season pin, separated by a rule: same
   box because they're all "how the site behaves", not "what's in it". */
.pho-orders {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.pho-orders .field { margin: 0; }
.pho-orders select { max-width: 14rem; }
.pho-orders .hint { flex: 1 1 100%; margin: 0; }

.pho-upload { margin-bottom: 2rem; }
.pho-upload select { max-width: 14rem; }
.pho-upload-row { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.pho-upload-row .field { margin: 0; }

/* Pool headings sit above the four season headings inside them, so they need
   to read as a level up rather than competing. */
.pho-place { margin-bottom: 2.6rem; }
.pho-place > h2 {
  font-size: 1.3rem;
  margin-bottom: 0.3rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--rose-deep);
}
.pho-place .pho-season { margin-bottom: 1.4rem; }
.pho-place .pho-season h3 { font-size: 0.95rem; }

.pho-drop {
  display: block;
  text-align: center;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.2rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.pho-drop:hover, .pho-drop.is-over {
  border-color: var(--rose-deep);
  background: var(--cream);
}
.pho-drop-main {
  display: block;
  font-family: var(--font-label);
  margin-bottom: 0.3rem;
}
.pho-drop .hint { margin: 0; }

.pho-queue:not(:empty) { margin-top: 1rem; }
.pho-queue-row {
  font-family: var(--font-label);
  font-size: 0.85rem;
  margin: 0.2rem 0;
  color: var(--ink-soft);
}
.pho-queue-name { color: var(--ink); }
.pho-queue-row.is-ok .pho-queue-state { color: var(--rose-deep); }
.pho-queue-row.is-bad .pho-queue-state { color: #a4423a; }

.pho-nudge {
  background: var(--cream);
  border-left: 3px solid var(--gold);
  padding: 0.8rem 1rem;
  font-size: 0.9rem;
  margin-bottom: 1.4rem;
}

.pho-season { margin-bottom: 2rem; }
.pho-season h3 {
  font-size: 1.05rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.4rem;
  margin-bottom: 0.9rem;
}
.pho-count {
  font-family: var(--font-label);
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.pho-now, .pho-thin {
  font-family: var(--font-label);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pho-now { color: var(--rose-deep); }
.pho-thin { color: var(--ink-soft); text-transform: none; letter-spacing: 0; }

.pho-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.9rem;
}
.pho-card {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--cream);
}
.pho-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.pho-card figcaption {
  padding: 0.5rem 0.6rem 0.6rem;
  font-size: 0.75rem;
  line-height: 1.4;
}
.pho-card-alt { display: block; color: var(--ink-soft); margin-bottom: 0.4rem; }
.pho-undescribed { color: #a4423a; font-style: italic; }
.pho-card.is-undescribed { border-color: #d9b9b5; }
.pho-card-btn {
  font-family: var(--font-label);
  font-size: 0.72rem;
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  cursor: pointer;
  color: var(--ink);
}
.pho-card-btn:hover { background: var(--paper-deep); }
.pho-card-btn[disabled] { opacity: 0.5; cursor: default; }

.pho-archive { margin-top: 1.5rem; }
.pho-archive summary {
  font-family: var(--font-label);
  cursor: pointer;
  padding: 0.4rem 0;
}

/* --- Season slideshows ------------------------------------------------------
   Photo slots on the homepage. Before the slideshow loads, a slot holds the
   single photograph that is in the markup; after, it holds a carousel. Both
   states have to look right, because the first one is what a visitor on a slow
   connection actually sees. */
.photo-slot .carousel { margin: 0; }
.photo-slot .carousel-track {
  /* The frame already rounds its corners; without this the scroll container
     clips them square at the edges of the track. */
  border-radius: var(--radius);
  /* No scrollbar. On the Join page's browsable reel a visible bar is a useful
     affordance; under a photograph that advances by itself it is just a grey
     stripe sitting beneath the picture, and it was the least crisp thing on
     the homepage. Swiping and scrolling still work — only the bar is gone. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 0;
}
.photo-slot .carousel-track::-webkit-scrollbar { display: none; }
.photo-slot .carousel-slide img { aspect-ratio: 1 / 1; height: auto; }

/* The controls float over the foot of the photograph rather than sitting under
   it: in the hero they would otherwise push the headline and the Join button
   out of alignment with the picture beside them. */
.photo-carousel { position: relative; }
.photo-carousel .carousel-controls {
  position: absolute;
  right: 0.7rem;
  bottom: 0.7rem;
  margin-top: 0;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.photo-carousel:hover .carousel-controls,
.photo-carousel:focus-within .carousel-controls { opacity: 1; }

/* Touch has no hover, so the controls have to be permanently visible there or
   they are undiscoverable. */
@media (hover: none) {
  .photo-carousel .carousel-controls { opacity: 1; }
}

.photo-carousel .carousel-btn {
  width: 2.1rem;
  height: 2.1rem;
  font-size: 0.85rem;
  background: rgba(251, 247, 238, 0.92);
  backdrop-filter: blur(4px);
  box-shadow: 0 1px 4px rgba(65, 58, 51, 0.18);
}

/* The second slot, under the plans. */
.studio-band .photo-slot { max-width: 520px; margin-inline: auto; }
.studio-band .section-header { margin-bottom: 1.6rem; }

/* Someone who has asked for reduced motion gets no smooth scrolling either —
   the slideshow doesn't advance itself for them, but the arrows still work and
   should jump rather than glide. */
@media (prefers-reduced-motion: reduce) {
  .photo-slot .carousel-track { scroll-behavior: auto; }
}

/* --- Founder section -------------------------------------------------------
   Mirrors the "Inside every delivery" grid, flipped: words on the left,
   photograph on the right, so the two sections don't read as the same slab
   twice. Same breakpoint behaviour — photo above the words on a phone, which
   is the order Hannah asked for everywhere else on the site. */
.founder .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 800px) {
  .founder .wrap { grid-template-columns: 1fr; }
  .founder .art-plate { max-width: 480px; margin-inline: auto; }
  /* Photograph first on a phone, matching the hero and the inside section. */
  .founder .wrap > div:last-child { order: -1; }
}
.founder .art-plate img { aspect-ratio: 1 / 1; height: auto; }

/* The sign-off. The name is set in the script face so it reads as a signature
   rather than another line of body copy. */
.signoff {
  margin-top: 1.4rem;
  line-height: 1.5;
}
.signoff-name {
  font-family: var(--font-script);
  font-size: 1.9rem;
  color: var(--rose-deep);
  line-height: 1;
  display: inline-block;
  margin-top: 0.2rem;
}

/* A quieter secondary link than a button — this is an invitation to read more,
   not a competing call to action next to "Join the Society". */
.link-quiet {
  font-family: var(--font-label);
  font-size: 0.85rem;
  color: var(--rose-deep);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.link-quiet:hover { color: var(--ink); }

/* Where the paper actually comes from. Deliberately small and factual: it is
   reassurance, not a claim. Note the wording is "originally painted" and
   "thoughtfully prepared" — never "handmade", because the paper is printed. */
.trust-line {
  font-family: var(--font-label);
  font-size: 0.76rem;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-top: 1.6rem;
}
.trust-line.center { text-align: center; max-width: 40rem; margin-inline: auto; }

/* --- Testimonials ----------------------------------------------------------- */
.said-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1.2rem, 3vw, 2.2rem);
}
.said {
  margin: 0;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.7rem;
  position: relative;
}
.said p {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.7;
}
/* An opening quotation mark, set large and pale behind the text. */
.said::before {
  content: "\201C";
  position: absolute;
  top: 0.1rem;
  left: 0.6rem;
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.35;
}

/* --- Secure checkout note --------------------------------------------------- */
.secure-note {
  text-align: center;
  font-family: var(--font-label);
  font-size: 0.76rem;
  color: var(--ink-soft);
  margin-top: 0.9rem;
}

/* --- Contact form ---------------------------------------------------------- */
.contact-form {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem;
}
.contact-form select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
}
.contact-form :disabled { opacity: 0.65; cursor: not-allowed; }
.contact-form .btn[disabled] { opacity: 0.5; pointer-events: none; }

/* --- Footer social --------------------------------------------------------- */
.social-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.social-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: #d8cfc4;
}
.social-list a:hover { color: var(--cream); }
.social-list svg { flex: none; }

@media (max-width: 860px) {
  .site-footer .wrap { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .site-footer .wrap { grid-template-columns: 1fr; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   Lightbox — click any photograph to see it large
   --------------------------------------------------------------------------
   Hannah's paintings are the product, and a 340px tile can't show a brush
   stroke. Every photo in an .art-plate opens full-screen; tapping the open
   photo zooms to its native pixels so the watercolour detail is visible.
   Built with no library: it is ~120 lines of JS and one overlay element.
   ========================================================================== */
.art-plate img { cursor: zoom-in; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(28, 23, 18, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s;
}
.lightbox[data-open="true"] { opacity: 1; visibility: visible; }

/* The stage scrolls once the photo is zoomed past the viewport. */
.lightbox-stage {
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.5rem, 3vw, 2.5rem);
  -webkit-overflow-scrolling: touch;
}
.lightbox-stage img {
  display: block;
  max-width: 94vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  cursor: zoom-in;
  transition: max-width 0.25s ease, max-height 0.25s ease;
}
.lightbox[data-zoomed="true"] .lightbox-stage img {
  max-width: none;
  max-height: none;
  cursor: zoom-out;
}

/* Controls. Generous hit areas — these get used with a thumb. */
.lightbox button {
  position: absolute;
  border: 1px solid rgba(251, 247, 238, 0.35);
  background: rgba(28, 23, 18, 0.55);
  color: var(--cream);
  border-radius: 999px;
  width: 46px;
  height: 46px;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.lightbox button:hover { background: rgba(184, 104, 94, 0.85); border-color: transparent; }
.lightbox button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.lightbox-close { top: clamp(0.6rem, 2vw, 1.4rem); right: clamp(0.6rem, 2vw, 1.4rem); }
.lightbox-prev  { left:  clamp(0.4rem, 2vw, 1.4rem); top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: clamp(0.4rem, 2vw, 1.4rem); top: 50%; transform: translateY(-50%); }
.lightbox[data-single="true"] .lightbox-prev,
.lightbox[data-single="true"] .lightbox-next { display: none; }

.lightbox-hint {
  position: absolute;
  bottom: clamp(0.6rem, 2vw, 1.3rem);
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(251, 247, 238, 0.7);
  pointer-events: none;
}

/* Stop the page behind from scrolling while the lightbox is open. */
body.lightbox-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox-stage img { transition: none; }
}

/* ==========================================================================
   Sign in & account
   ========================================================================== */
.signin-status {
  font-family: var(--font-label);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-soft);
  background: var(--cream);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin: 1.2rem 0 0;
}
.signin-status.is-sent  { border-left-color: var(--bark); color: var(--ink); }
.signin-status.is-error { border-left-color: var(--rose); color: var(--rose-deep); }

.delivery-list { list-style: none; margin: 1rem 0 0; padding: 0; }
.delivery-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
}
.delivery-row:last-child { border-bottom: none; }
.delivery-state {
  font-family: var(--font-label);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  white-space: nowrap;
}
.delivery-state.is-shipped { color: var(--bark-deep); font-weight: 600; }
.delivery-state.is-skipped { color: var(--rose-deep); }

.account-address {
  font-style: normal;
  line-height: 1.7;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  margin: 1rem 0;
}

/* The waiting screen: code shown while the emailed link is opened elsewhere. */
.signin-wait { text-align: center; }
.signin-code {
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(2rem, 7vw, 2.8rem);
  letter-spacing: 0.16em;
  color: var(--rose-deep);
  background: var(--cream);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 0.8rem 0.5rem;
  margin: 0;
  /* Selectable, since reading it aloud or copying it is a reasonable thing
     to want to do. Never typed in, so no input to pair it with. */
  user-select: all;
}

/* Shoppe cards carry their own carousel, so the frame needs to sit inside the
   card rather than span a column like the Join page's single reel. */
.collection-card .carousel { margin-bottom: 1.1rem; }
.collection-card .carousel-controls { margin-top: 0.5rem; }
.collection-card .carousel-btn[hidden] { display: none; }
/* Sits directly under the title now, so it needs to carry that position:
   larger, darker, and on its own line rather than tucked into a paragraph. */
.collection-price {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0.15rem 0 0.6rem !important;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.55rem;
  line-height: 1.2;
}
.collection-price .was { color: var(--ink-soft); font-size: 0.9em; }

/* Both prices are shown to everyone. The member price is greyed until you're
   signed in, so it reads as something to unlock rather than withheld. */
.collection-price .public-price {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--ink);
}
/* Given a tinted pill so it reads as a badge — a second number sitting in
   plain text beside the first is the quickest way to make a shopper wonder
   which one they'll actually be charged. */
.collection-price .member-price {
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--rose-deep);
  background: var(--cream);
  border: 1px solid var(--rose-deep);
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
  white-space: nowrap;
}
/* Not signed in: the same pill, drained of colour. Visible, legible, clearly
   not yours yet — which is the point. Greying it out entirely would read as
   "unavailable" rather than "join and this is what you pay". */
.collection-price .member-price.is-locked {
  color: var(--ink-soft);
  border-color: var(--line);
  background: transparent;
}
.shop-member-note {
  text-align: center;
  font-family: var(--font-label);
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-top: 1.6rem;
}
.collection-card.is-sold-out .carousel { opacity: 0.55; }
.collection-card.is-sold-out .collection-status { color: var(--rose-deep); font-weight: 600; }

/* ==========================================================================
   Basket — header button and slide-out drawer
   ========================================================================== */
.basket-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.45rem 0.8rem;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--font-label);
  font-size: 0.9rem;
  font-weight: 600;
}
.basket-btn:hover { border-color: var(--rose); color: var(--rose-deep); }
.basket-count {
  background: var(--rose);
  color: var(--cream);
  border-radius: 999px;
  min-width: 1.35rem;
  padding: 0 0.3rem;
  font-size: 0.78rem;
  line-height: 1.35rem;
  text-align: center;
}

.basket-drawer {
  position: fixed;
  inset: 0;
  z-index: 180;
  background: rgba(28, 23, 18, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s;
}
.basket-drawer[data-open="true"] { opacity: 1; visibility: visible; }

.basket-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(24rem, 100%);
  background: var(--cream);
  border-left: 1px solid var(--line);
  box-shadow: -12px 0 40px rgba(59, 49, 40, 0.18);
  padding: 1.5rem 1.4rem 2rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.26s ease;
}
.basket-drawer[data-open="true"] .basket-panel { transform: none; }

.basket-head { display: flex; align-items: baseline; justify-content: space-between; }
.basket-head h2 { font-size: 1.6rem; margin: 0; }
.basket-close {
  background: none; border: none; cursor: pointer;
  font-size: 1.8rem; line-height: 1; color: var(--ink-soft); padding: 0 0.2rem;
}
.basket-close:hover { color: var(--rose-deep); }

.basket-list { list-style: none; margin: 1.4rem 0 0; padding: 0; }
.basket-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  padding: 0.9rem 0; border-bottom: 1px solid var(--line);
}
.basket-name { display: block; font-family: var(--font-display); font-size: 1.1rem; }
.basket-each { display: block; font-family: var(--font-label); font-size: 0.78rem; color: var(--ink-soft); }
.basket-empty { color: var(--ink-soft); padding: 1rem 0; }

.basket-qty { display: flex; align-items: center; gap: 0.55rem; flex: none; }
.basket-qty button {
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  border: 1px solid var(--line); background: var(--paper);
  cursor: pointer; font-size: 1rem; line-height: 1; color: var(--ink);
}
.basket-qty button:hover:not(:disabled) { border-color: var(--rose); color: var(--rose-deep); }
.basket-qty button:disabled { opacity: 0.35; cursor: default; }
.basket-qty span { font-family: var(--font-label); min-width: 1.1rem; text-align: center; }

.basket-total { font-family: var(--font-display); font-size: 1.4rem; margin: 1.2rem 0 0.4rem; }
.basket-note { font-family: var(--font-label); font-size: 0.85rem; color: var(--rose-deep); margin: 0 0 0.6rem; }
.basket-go { width: 100%; }
.basket-fineprint { font-family: var(--font-label); font-size: 0.78rem; color: var(--ink-soft); margin-top: 0.8rem; text-align: center; }

body.basket-open { overflow: hidden; }

.qty-picker {
  display: flex; align-items: center; gap: 0.6rem;
  margin: 0 0 0.8rem;
  font-family: var(--font-label); font-size: 0.85rem; color: var(--ink-soft);
}
.qty-picker select {
  font-family: var(--font-label); font-size: 0.9rem;
  padding: 0.35rem 0.5rem; border: 1px solid var(--line);
  border-radius: 8px; background: var(--cream); color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .basket-drawer, .basket-panel { transition: none; }
}
.shop-loading {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--ink-soft);
  font-family: var(--font-label);
  font-size: 0.95rem;
  padding: 2rem 0;
}

/* The basket button adds width the header didn't budget for, and between
   roughly 760px and 1200px the navigation wraps onto two lines with the
   "Join the Society" pill colliding with it. Tighten the gaps and shrink the
   basket rather than dropping links: everything in that bar earns its place. */
@media (min-width: 761px) and (max-width: 1200px) {
  .site-nav ul { gap: 0.85rem; }
  .site-nav a { font-size: 0.86rem; letter-spacing: 0.02em; }
  .nav-cta { padding: 0.5rem 0.85rem !important; }
  .basket-btn { padding: 0.4rem 0.6rem; }
  .brand-name { font-size: 1.5rem; }
}

/* Never let the navigation wrap — a two-line header looks broken rather than
   dense, and the labels are short enough to stay on one line at every width
   where the full nav is shown at all. */
.site-nav ul { flex-wrap: nowrap; }
.site-nav a { white-space: nowrap; }

@media (max-width: 760px) {
  /* On a phone the nav collapses behind the toggle, so the basket sits beside
     it rather than inside the collapsed menu — you should always be able to
     reach your basket in one tap. */
  .site-nav ul { flex-wrap: wrap; }
  .basket-btn { order: -1; margin-left: auto; margin-right: 0.5rem; }
}
.basket-qty button[data-remove] { font-size: 1.1rem; }
/* The signed-in label is longer than "Sign in", so give it room to breathe
   without pushing the rest of the navigation around. */
.site-nav a.is-signed-in { color: var(--rose-deep); }
@media (min-width: 761px) and (max-width: 1200px) {
  .site-nav a.is-signed-in { font-size: 0.8rem; }
}
/* The dispatch promise. Deliberately plain and near the price — it is a
   commitment, not a flourish, and the FTC rule turns on it being visible. */
.collection-ships {
  font-family: var(--font-label);
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin: -0.4rem 0 0.9rem;
}
.basket-ships {
  font-family: var(--font-label);
  font-size: 0.82rem;
  color: var(--ink-soft);
  text-align: center;
  margin: 0.7rem 0 0;
}

/* Posting day: a working table, not a designed one. It is read on a busy
   morning with a hundred envelopes on the table. */
.post-actions { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.post-count { font-family: var(--font-label); font-size: 0.85rem; color: var(--ink-soft); }
.post-help { font-family: var(--font-label); font-size: 0.85rem; color: var(--ink-soft); max-width: 46em; margin-bottom: 1.6rem; }
.post-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.post-table th {
  text-align: left; font-family: var(--font-label); font-size: 0.75rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft);
  border-bottom: 1px solid var(--line); padding: 0.5rem 0.6rem;
}
.post-table td { padding: 0.7rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.post-table tr:hover td { background: var(--cream); }
.post-what { font-family: var(--font-label); font-size: 0.8rem; color: var(--ink-soft); white-space: nowrap; }
.post-empty { color: var(--ink-soft); padding: 2rem 0.6rem; }

/* Posting day reads as three steps, because that is what it is: fetch the
   file, print the batch, tell everyone. Numbered so a busy morning doesn't
   have to remember the order. */
.post-steps { list-style: none; margin: 0 0 2rem; padding: 0; max-width: 46em; }
.post-steps li { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.post-steps li:last-child { border-bottom: none; }
.post-step-n {
  flex: none;
  width: 1.9rem; height: 1.9rem;
  border-radius: 50%;
  background: var(--paper-deep);
  color: var(--bark-deep);
  font-family: var(--font-label); font-size: 0.85rem; font-weight: 700;
  display: grid; place-items: center;
}
.post-steps p {
  font-family: var(--font-label); font-size: 0.85rem; color: var(--ink-soft);
  margin: 0.5rem 0 0;
}
.post-steps strong { font-family: var(--font-label); font-size: 0.95rem; }

/* --- Posting page: to post / already sent ------------------------------- */
.post-tabs {
  display: flex;
  gap: 0.4rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.6rem;
}
.post-tabs button {
  font-family: var(--font-label);
  font-size: 0.86rem;
  letter-spacing: 0.03em;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--ink-soft);
  padding: 0.6rem 0.9rem;
  cursor: pointer;
  margin-bottom: -1px;
}
.post-tabs button[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--rose-deep);
}
.post-tabs button:hover { color: var(--ink); }

.sent-search { margin-bottom: 1rem; max-width: 26rem; }
.sent-search label {
  display: block;
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.35rem;
}
.sent-search input {
  width: 100%;
  padding: 0.6rem 0.7rem;
  font: inherit;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--paper);
}
.sent-when { white-space: nowrap; font-family: var(--font-label); font-size: 0.84rem; }
.sent-email { font-size: 0.8rem; color: var(--ink-soft); }
.post-what-shop {
  background: color-mix(in srgb, var(--gold) 18%, transparent);
}

/* --- Renewals (admin) ---------------------------------------------------- */
.renew-counts { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1.6rem; }
.renew-count {
  flex: 1 1 8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  background: var(--paper);
}
.renew-count strong { display: block; font-family: var(--font-display); font-size: 1.9rem; line-height: 1; }
.renew-count span {
  font-family: var(--font-label); font-size: 0.74rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft);
}
/* The one card that should catch the eye across a room. */
.renew-count.is-bad { border-color: var(--rose-deep); background: color-mix(in srgb, var(--rose) 14%, var(--paper)); }
.renew-count.is-bad strong { color: var(--rose-deep); }

.renew-alert {
  border: 1px solid var(--rose-deep);
  border-left-width: 4px;
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.6rem;
  background: color-mix(in srgb, var(--rose) 10%, var(--paper));
}
.renew-alert h3 { margin: 0 0 0.4rem; font-size: 1.15rem; }
.renew-alert p { margin: 0 0 0.8rem; font-size: 0.95rem; }
.renew-alert ul, .renew-list { list-style: none; margin: 0; padding: 0; }
.renew-alert li, .renew-list li { padding: 0.45rem 0; border-top: 1px solid var(--line); }
.renew-why { display: block; font-family: var(--font-label); font-size: 0.8rem; color: var(--ink-soft); }
.renew-clear {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.2rem; margin-bottom: 1.6rem; color: var(--ink-soft);
}
.renew-more { margin-bottom: 1.4rem; }
.renew-more summary {
  cursor: pointer; font-family: var(--font-label);
  font-size: 0.84rem; color: var(--ink-soft); padding: 0.5rem 0;
}
.renew-more h4 {
  margin: 1.2rem 0 0.3rem; font-family: var(--font-label);
  font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft);
}
.renew-hint { font-family: var(--font-label); font-size: 0.82rem; color: var(--ink-soft); }

.renew-lastrun {
  flex: 1 0 100%;
  margin: 0 0 0.2rem;
  font-family: var(--font-label);
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.renew-lastrun.is-stale { color: var(--rose-deep); font-weight: 600; }

/* --- Shop settings (admin) ----------------------------------------------- */
.set-form { max-width: 34rem; }
.set-form .field { margin-bottom: 1.1rem; }
.set-form label { display: block; font-family: var(--font-label); font-size: 0.82rem;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.35rem; }
.set-form .opt { text-transform: none; letter-spacing: 0; font-style: italic; }
.set-form input[type="text"], .set-form input[type="date"], .set-form textarea {
  width: 100%; padding: 0.6rem 0.7rem; font: inherit;
  border: 1px solid var(--line); border-radius: 3px; background: var(--paper);
}
.set-form .hint { font-family: var(--font-label); font-size: 0.8rem;
  color: var(--ink-soft); margin: 0.35rem 0 0; }

.set-away { border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.2rem 0.4rem; margin: 0 0 1.4rem; }
.set-away legend { padding: 0 0.4rem; }
/* Same panel treatment for any other grouped settings, so the postage weights
   don't float loose at the bottom of the form. */
.set-group { border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.2rem 0.4rem; margin: 0 0 1.4rem; }
.set-group legend { padding: 0 0.4rem; }
.set-group .list-row { display: flex; flex-wrap: wrap; gap: 0 1.2rem; }
.set-group .list-row .field { flex: 1 1 10rem; }
/* The one-off instruction above the two batches. Not a step in a numbered
   list any more, because both batches follow the same instruction. */
.post-how { margin-bottom: 1.8rem; }
.set-toggle { display: flex; align-items: center; gap: 0.5rem;
  margin: 0; cursor: pointer; text-transform: none; letter-spacing: 0;
  font-size: 1rem; color: var(--ink); }
.set-toggle input { width: auto; }

/* The preview is the feature, not decoration: it shows the sentence a buyer
   will be held to, rather than making Hannah infer it from the checkboxes. */
.set-preview { border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 0.9rem 1.1rem; margin-bottom: 1.3rem; background: var(--paper-deep); }
.set-preview h4 { margin: 0 0 0.5rem; font-family: var(--font-label);
  font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.set-preview p { margin: 0 0 0.4rem; }
.set-preview-warn { color: var(--rose-deep); font-weight: 600; }
.set-preview-ships { font-family: var(--font-label); font-size: 0.86rem; color: var(--ink-soft); }

/* --- Shoppe: away notice (buyer-facing) ---------------------------------- */
.shop-away {
  border: 1px solid var(--rose-deep); border-left-width: 4px;
  border-radius: var(--radius); padding: 1rem 1.3rem; margin: 0 0 2rem;
  background: color-mix(in srgb, var(--rose) 10%, var(--paper));
}
.shop-away p { margin: 0; }
.shop-away p + p { margin-top: 0.4rem; font-family: var(--font-label);
  font-size: 0.85rem; color: var(--ink-soft); }

/* --- Account: renewal toggle and address form ---------------------------- */
.linklike {
  background: none; border: 0; padding: 0; font: inherit;
  color: var(--rose-deep); text-decoration: underline; cursor: pointer;
}
.linklike:hover { color: var(--bark-deep); }

.toggle-row { margin: 0.6rem 0 0.5rem; }
.switch { display: flex; align-items: center; gap: 0.7rem; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  flex: 0 0 auto; width: 46px; height: 26px; border-radius: 999px;
  background: var(--line); position: relative; transition: background 0.18s ease;
}
.switch-track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--paper); box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: transform 0.18s ease;
}
.switch input:checked + .switch-track { background: var(--rose-deep); }
.switch input:checked + .switch-track::after { transform: translateX(20px); }
/* Visible focus ring — this control changes whether someone gets charged. */
.switch input:focus-visible + .switch-track {
  outline: 2px solid var(--bark-deep); outline-offset: 2px;
}
.switch input:disabled + .switch-track { opacity: 0.55; }
.switch-label { font-size: 1rem; }

.address-form { margin: 0.8rem 0 0; max-width: 30rem; }
.address-form .field { margin-bottom: 0.9rem; }
.address-form label {
  display: block; font-family: var(--font-label); font-size: 0.78rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 0.3rem;
}
.address-form .opt { text-transform: none; letter-spacing: 0; font-style: italic; }
.address-form input {
  width: 100%; padding: 0.55rem 0.7rem; font: inherit;
  border: 1px solid var(--line); border-radius: 3px; background: var(--paper);
}
.field-row { display: flex; gap: 0.7rem; }
.field-row .field { flex: 1 1 auto; }
.field-row .field-sm { flex: 0 0 5.5rem; }
.address-form .hint,
#address-hint {
  font-family: var(--font-label); font-size: 0.85rem; color: var(--ink-soft);
}
.form-error {
  color: var(--rose-deep); font-size: 0.9rem; margin: 0.4rem 0 0.6rem;
}
@media (max-width: 480px) {
  .field-row { flex-wrap: wrap; }
  .field-row .field-sm { flex: 1 1 6rem; }
}

/* --- Contact form --------------------------------------------------------- */
.contact-form { max-width: 34rem; margin: 0 auto 2rem; }
.contact-form .field { margin-bottom: 1.15rem; }
.contact-form label {
  display: block; font-family: var(--font-label); font-size: 0.8rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 0.32rem;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%; padding: 0.62rem 0.75rem; font: inherit;
  border: 1px solid var(--line); border-radius: 3px; background: var(--paper);
}
.contact-form textarea { resize: vertical; min-height: 8rem; }
.contact-form .hint {
  font-family: var(--font-label); font-size: 0.8rem;
  color: var(--ink-soft); margin: 0.32rem 0 0;
}
/* The honeypot. Off-screen rather than display:none — some bots skip anything
   that is explicitly hidden, but happily fill a field that merely sits out of
   view. aria-hidden keeps it away from screen readers either way. */
.hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* --- "A member since…" ---------------------------------------------------- */
.member-since {
  margin: 0.9rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-label);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

/* --- Admin link on the account page --------------------------------------- */
.admin-block { padding-top: 0.2rem; }
.admin-block p { margin: 0 0 0.4rem; }
.admin-block .hint {
  font-family: var(--font-label); font-size: 0.82rem; color: var(--ink-soft);
}

/* Temporary: comes off the day Stripe goes live. */
.demo-note { opacity: 0.75; font-size: 0.85em; }

/* The "equivalent to …" line under each price. Quieter than the price itself,
   because it's a reassurance rather than the number people compare on. */
.plan-equiv {
  margin: -0.35rem 0 0.9rem;
  font-family: var(--font-label);
  font-size: 0.8rem;
  color: var(--ink-soft);
}

/* Words Hannah asked to pick out inside a pull quote. The quote is already set
   in the script face, so emphasis here has to come from colour rather than
   font — using the same gold that marks the quote's own left edge. */
/* Hannah asked for the quotes to stay one colour — the words she picked out
   are still marked up, so emphasis can be reintroduced later without editing
   the copy, but they inherit the quote's own rose rather than switching. */
.hero-word { color: inherit; }

.quote-band { padding-top: 1rem; padding-bottom: 1rem; }
.quote-band blockquote.pull { margin-block: 1rem; }

/* A quote band carries almost no padding of its own, so the air around it comes
   from its neighbours — and two full section paddings stacked either side left
   the quote marooned. Both rules below close that gap from the outside.

   After the hero, the hero's own generous bottom padding is already the breath
   the quote needs; adding to it just pushes the prices further down the page. */
.hero + .quote-band { padding-top: 0; }

/* And a quote introduces whatever follows it — the plans on the homepage, the
   closing invitation further down. Roughly half the usual section padding keeps
   the two reading as one thought rather than two unrelated screens. */
.quote-band + .section { padding-top: clamp(2rem, 4.5vw, 3.5rem); }

/* Hannah's three membership benefits, under the Join lede. */
.join-benefits {
  list-style: none;
  /* Lives in the checkout summary now — the value you're getting, read at the
     moment you decide to pay. Narrower column, so a little smaller. */
  margin: 0 0 1.2rem;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--line);
  font-size: 0.94rem;
  text-align: left;
}
.join-benefits li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
}
.join-benefits li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

/* "Guests are welcome at the Shoppe" — the <em> gets the same script-face
   accent that headings use, which is what Hannah means by hero font. */
.guest-note { text-align: center; font-size: 1.05rem; margin: 0.9rem 0 0; }
.guest-note em {
  font-family: var(--font-script);
  font-style: normal;
  font-size: 1.15em;
  color: var(--rose-deep);
}
.guest-band { padding-top: 0; padding-bottom: 0.5rem; }

/* --- Script-face accents in the header ------------------------------------ */
/* "The Shoppe" and a signed-in member's own name, in the same face the
   headings use for emphasis. Sized up slightly because the script runs small. */
.site-nav a.nav-script,
.nav-name {
  font-family: var(--font-script);
  font-style: normal;
  font-size: 1.2em;
  letter-spacing: 0.01em;
}


/* --- Icons beside each thing in a delivery -------------------------------- */
.inside-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}
.inside-list .item-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 0.15em;      /* optical alignment with the first line of text */
  color: var(--rose-deep);
}

/* A member we can't post to — the one thing on the list worth noticing. */
.mem-warn { color: var(--rose-deep); font-weight: 600; }