/* ==========================================================================
   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);
}

.brand svg { flex: none; }

.brand-name {
  font-family: var(--font-script);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: 0.01em;
}

.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; }
}

/* --- 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); }
.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 --- */
.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
}
.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. */
.collection-card .art-plate img { aspect-ratio: 3 / 4; 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; }

/* --- 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;
}

/* --- 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; }
}