/* MilkMom — retro-modern dairy. Cream/milk base, sage dairy-door green,
   butter yellow, milk-bottle blue. Fraunces display (softened via the SOFT
   and WONK variable axes, Sol's pick 09-14) + Nunito body. */

:root {
  --cream: #FFF5D2;
  --milk: #FFFBEF;
  --ink: #40372B;
  --ink-soft: #75684F;
  --sun: #FFD45E;
  --sun-deep: #F0BE3F;
  --sun-pale: #FFEAAE;
  --sun-wash: #FFEAAE;
  --amber: #A67C1A;
  --amber-deep: #7E5D10;
  --butter: #FFD45E;
  --butter-tint: #FFEAAE;
  --blue: #6E93B4;
  --blue-tint: #E3ECF3;
  --line: #EFDFB4;
  --radius-card: 18px;
  --shadow: 0 2px 10px rgba(88, 70, 45, 0.10);
  font-size: 18px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  /* softens Fraunces everywhere; unknown axes are ignored by Nunito */
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
  line-height: 1.6;
}

h1, h2, h3, .brand-word {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  line-height: 1.12;
  margin: 0 0 0.45em;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.22rem; font-weight: 600; }

p { margin: 0 0 1em; max-width: 62ch; }

a { color: var(--amber); }

img { max-width: 100%; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---------- header ---------- */

/* the header is sticky and 69px tall, so a jump link would otherwise land its
   target heading underneath it - 125 anchor links across the guides, and the
   answer-box pattern depends on them landing on the heading she asked for */
html { scroll-padding-top: 88px; }

.site-head {
  background: var(--milk);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}

.site-head .wrap {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 68px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}

.brand svg { display: block; }

.brand-word { font-size: 1.5rem; font-weight: 600; }
.brand-word em { font-style: italic; color: var(--amber); }

.nav { display: flex; gap: 26px; align-items: center; }

.nav a {
  text-decoration: none;
  color: var(--ink-soft);
  font-weight: 700;
  font-size: 1.1rem;
}

.nav a.active, .nav a:hover { color: var(--amber); }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  border-radius: 999px;
  padding: 12px 26px;
  font-weight: 700;
  font-size: 1rem;
  font-family: inherit;
  text-decoration: none;
  border: 2px solid var(--amber);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.btn-solid { background: var(--sun); border-color: var(--sun); color: var(--ink); }
.btn-solid:hover { background: var(--sun-deep); border-color: var(--sun-deep); }
.btn-ghost { background: transparent; color: var(--amber); }
.btn-ghost:hover { background: var(--sun-pale); }
.btn-butter { background: var(--sun); border-color: var(--sun); color: var(--ink); }
.btn-butter:hover { filter: brightness(1.05); }
.btn-small { padding: 11px 24px; font-size: 1.02rem; }
.btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* ---------- hero ---------- */

.hero { background: var(--cream); }

.hero .wrap {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 44px;
  align-items: center;
  padding-top: 34px;
  padding-bottom: 36px;
}

.hero h1 em { font-style: italic; color: var(--amber); }

.hero .lede { font-size: 1.15rem; color: var(--ink-soft); }

.hero-ctas { display: flex; gap: 14px; margin: 18px 0 22px; flex-wrap: wrap; }
.hero-ctas .btn { padding: 15px 32px; font-size: 1.14rem; }

/* desktop type bump - the landing got it first (Sol 09-14), the rest of the
   site joined it 09-15 so every page reads at the same size */
@media (min-width: 900px) {
  :root { font-size: 19.5px; }
}

/* headings Sol wants on a single line at desktop widths */
@media (min-width: 900px) {
  .section-head h2.oneline { font-size: clamp(1.45rem, 2.3vw, 1.8rem); white-space: nowrap; }
}

.chips { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; list-style: none; }

.chips li {
  background: var(--sun-pale);
  color: var(--amber);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.88rem;
  font-weight: 700;
}

/* ---------- photo frames ---------- */

.ph {
  position: relative;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,253,248,0.85), transparent 55%),
    linear-gradient(160deg, var(--sun-pale), var(--butter-tint) 70%);
}

.ph::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 56px;
  height: 110px;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 44' fill='%23A67C1A' opacity='0.28'%3E%3Cpath d='M8 2h8v3l3 8v27a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V13l3-8z'/%3E%3C/svg%3E");
}

.ph img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ph.noimg img { display: none; }

.arch { border-radius: 220px 220px 26px 26px; }
.round { border-radius: var(--radius-card); }
.circle { border-radius: 50%; }

.hero .ph { height: 380px; }

/* ---------- scalloped cream-line divider ----------
   Bumps of the colour ABOVE descending into the section below.
   Set --above to the upper section's background. */

.scallop {
  height: 22px;
  background-image: radial-gradient(ellipse 17px 22px at 50% -6px, var(--above, var(--milk)) 60%, transparent 62%);
  background-size: 34px 22px;
  background-repeat: repeat-x;
}

/* ---------- sections ---------- */

.section { padding: 28px 0; }
.section-milk { background: var(--cream); }
.section-sage { background: var(--sun-wash); }
.section-head { max-width: 640px; margin-bottom: 16px; }
.section-head .kicker {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  color: var(--amber);
  font-size: 1.05rem;
  margin-bottom: 4px;
}

/* ---------- how it works ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  padding: 0;
  margin: 0 0 12px;
  list-style: none;
  counter-reset: step;
}

.steps li {
  counter-increment: step;
  background: var(--milk);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 22px 22px 18px;
}

.steps li::before {
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--butter);
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.steps h3 { margin-bottom: 4px; }
.steps p { font-size: 1rem; color: var(--ink-soft); margin: 0; }

.steps-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  color: var(--amber-deep);
  margin: 22px 0 12px;
  font-size: 1.7rem;
}

.steps-label::before,
.steps-label::after {
  content: "";
  height: 1px;
  flex: 1 1 auto;
  max-width: 200px;
  background: var(--line);
}

.steps-label:first-of-type { margin-top: 8px; }

/* ---------- listing cards ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 22px;
}

.listing-card {
  background: var(--milk);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--ink);
}

.listing-card .ph { height: 120px; }
.listing-card .ph::before { width: 30px; height: 58px; }

.lc-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }

.lc-title { font-weight: 800; font-size: 1.06rem; line-height: 1.3; }

.lc-meta { font-size: 0.94rem; color: var(--ink-soft); }

.lc-price { font-family: 'Fraunces', Georgia, serif; font-size: 1.3rem; font-weight: 600; }
.lc-price span { font-family: 'Nunito', sans-serif; font-size: 0.85rem; color: var(--ink-soft); font-weight: 600; }

.stars { color: #D9A23B; letter-spacing: 1px; font-size: 0.9rem; }
.stars .n { color: var(--ink-soft); letter-spacing: 0; }

.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }

.badge {
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 3px 11px;
}

.badge-id { background: var(--blue-tint); color: #3E617E; }
.badge-screened { background: #DDEAF4; color: #33587A; }
.badge-top { background: var(--butter-tint); color: #8A6614; }
.badge-donate { background: #F3E3EC; color: #92527A; }
.badge-wanted { background: #EFE9DE; color: var(--ink-soft); }

.lane-chip {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ink-soft);
}

/* ---------- lanes ---------- */

.lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.lane {
  background: var(--milk);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.lane .ph { height: 170px; }
.lane-body { padding: 20px 22px 24px; }
.lane-body p { font-size: 0.95rem; color: var(--ink-soft); }

/* ---------- market layout ---------- */

.market {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 34px;
  align-items: start;
  padding: 40px 0 72px;
}

.filters {
  background: var(--milk);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 20px;
  position: sticky;
  top: 88px;
}

.filters h3 { font-size: 1.05rem; margin-bottom: 12px; }

.fgroup { margin-bottom: 20px; }

.fgroup .flabel { font-weight: 800; font-size: 0.85rem; margin-bottom: 8px; }

.fchip-row { display: flex; flex-wrap: wrap; gap: 7px; }

.fchip {
  border: 1.5px solid var(--line);
  background: var(--cream);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
  font-family: inherit;
}

.fchip[aria-pressed="true"] {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--milk);
}

.fnote { font-size: 0.8rem; color: var(--ink-soft); }

/* ---------- listing detail ---------- */

.listing-page { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; padding: 40px 0 72px; align-items: start; }

.listing-gallery .ph { height: 380px; }

.disclosure {
  background: var(--milk);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  margin-top: 28px;
  overflow: hidden;
}

.disclosure h3 { padding: 18px 22px 0; }
.disclosure .dnote { padding: 0 22px; font-size: 0.9rem; color: var(--ink-soft); }

.disclosure table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }

.disclosure td {
  padding: 10px 22px;
  border-top: 1px solid var(--line);
  vertical-align: top;
}

.disclosure td:first-child { font-weight: 800; width: 38%; color: var(--ink-soft); }

.buy-box {
  background: var(--milk);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 24px;
  position: sticky;
  top: 88px;
  box-shadow: var(--shadow);
}

.buy-box .lc-price { font-size: 1.9rem; }

.qty-row { display: flex; align-items: center; gap: 12px; margin: 16px 0; }

.qty-row input {
  width: 90px;
  padding: 10px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font: inherit;
  background: var(--cream);
}

.escrow-note {
  background: var(--blue-tint);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 0.9rem;
  color: #3E617E;
  margin: 16px 0;
}

.seller-card {
  display: flex;
  gap: 14px;
  align-items: center;
  background: var(--milk);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 16px 18px;
  margin-top: 20px;
}

.avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--sun-pale);
  color: var(--amber);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.review {
  border-top: 1px solid var(--line);
  padding: 16px 0;
}

.review .who { font-weight: 800; font-size: 0.92rem; }
.review p { font-size: 0.95rem; color: var(--ink-soft); margin: 6px 0 0; }

/* ---------- escrow milk run ---------- */

.milkrun {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 30px 0;
  padding: 0;
  list-style: none;
  counter-reset: run;
}

.milkrun li {
  counter-increment: run;
  position: relative;
  text-align: center;
  padding: 0 14px;
}

.milkrun li::before {
  content: counter(run);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--milk);
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.25rem;
  position: relative;
  z-index: 1;
}

.milkrun li::after {
  content: '';
  position: absolute;
  top: 21px;
  left: calc(50% + 26px);
  width: calc(100% - 52px);
  border-top: 2px dashed var(--blue);
}

.milkrun li:last-child::after { display: none; }

.milkrun h3 { font-size: 1rem; font-family: 'Nunito', sans-serif; font-weight: 800; margin-bottom: 2px; }
.milkrun p { font-size: 0.87rem; color: var(--ink-soft); margin: 0; }

/* ---------- checkout ---------- */

.checkout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; padding: 40px 0 72px; align-items: start; }

.panel {
  background: var(--milk);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 26px;
  margin-bottom: 24px;
}

.panel h3 { margin-bottom: 14px; }

.payrow { display: flex; flex-direction: column; gap: 10px; }

.payopt {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 13px 16px;
  cursor: pointer;
  font-weight: 700;
}

.payopt input { accent-color: var(--amber); }
.payopt small { font-weight: 600; color: var(--ink-soft); }

.sumline { display: flex; justify-content: space-between; font-size: 0.98rem; padding: 7px 0; }
.sumline.total { border-top: 2px solid var(--ink); font-weight: 800; font-size: 1.15rem; margin-top: 8px; padding-top: 12px; }

.protect {
  background: var(--blue-tint);
  border-radius: var(--radius-card);
  padding: 22px 24px;
}

.protect h3 { color: #3E617E; }
.protect p { font-size: 0.92rem; color: #3E617E; margin-bottom: 0.6em; }

/* ---------- learn / advice ---------- */

.advice-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }

/* Right-hand column of the "first sellers" pitch - the CTA sits beside the
   copy rather than under it. align-self beats the grid's align-items:start. */
.side-cta { align-self: center; display: flex; justify-content: center; }

.advice {
  background: var(--milk);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 24px 26px;
}

.advice h2 { font-size: 1.6rem; }

.advice h3 { margin-top: 26px; }

.advice ul { padding-left: 20px; margin: 8px 0 0; }
.advice li { margin-bottom: 8px; font-size: 0.97rem; }
.advice li strong { font-weight: 800; }

.callout {
  border-left: 4px solid var(--butter);
  background: var(--butter-tint);
  border-radius: 0 12px 12px 0;
  padding: 14px 18px;
  font-size: 0.95rem;
  margin: 18px 0;
}

.callout-blue { border-left-color: var(--blue); background: var(--blue-tint); color: #3E617E; }

/* Affiliate disclosure. NOT .disclosure - that is the seller's disclosure
   sheet. Sits directly under the h1 on any page carrying /go/ links. */
.affnote {
  border: 1px dashed var(--line);
  background: var(--milk);
  border-radius: 12px;
  padding: 11px 16px;
  margin: 0 0 20px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.affnote strong { color: var(--ink); font-weight: 800; }

/* ---------- community ---------- */

.community { display: grid; grid-template-columns: 260px 1fr; gap: 34px; padding: 40px 0 72px; align-items: start; }

.groups { display: flex; flex-direction: column; gap: 10px; }

.group-link {
  background: var(--milk);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 16px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
  font-size: 0.95rem;
}

.group-link small { display: block; color: var(--ink-soft); font-weight: 600; }
.group-link:hover { border-color: var(--sun-deep); }

.post {
  background: var(--milk);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 20px 24px;
  margin-bottom: 18px;
}

.post-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.post-head .who { font-weight: 800; }
.post-head small { color: var(--ink-soft); }
.post p { margin-bottom: 0.5em; }
.post-actions { display: flex; gap: 18px; font-size: 0.88rem; color: var(--ink-soft); font-weight: 700; }

/* ---------- seller profile ---------- */

.profile-head { background: var(--milk); padding: 44px 0 38px; }

.profile-head .wrap { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }

.profile-photo {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  flex-shrink: 0;
}

.profile-photo::before { width: 30px; height: 58px; }

.profile-head h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 2px; }

.profile-loc { color: var(--ink-soft); font-weight: 700; }

.stat-row { display: flex; gap: 14px; flex-wrap: wrap; margin: 18px 0 0; }

.stat {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 18px;
  text-align: center;
}

.stat b { display: block; font-family: 'Fraunces', Georgia, serif; font-size: 1.35rem; font-weight: 600; }
.stat span { font-size: 0.8rem; color: var(--ink-soft); font-weight: 700; }

.profile-body { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 36px; padding: 44px 0 72px; align-items: start; }

.about-quote {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--amber);
  border-left: 4px solid var(--butter);
  padding-left: 18px;
  margin: 0 0 1.2em;
}

.ratingbar { display: grid; grid-template-columns: 44px 1fr 36px; gap: 10px; align-items: center; font-size: 0.9rem; margin-bottom: 7px; }
.ratingbar .track { height: 9px; border-radius: 999px; background: var(--cream); border: 1px solid var(--line); overflow: hidden; }
.ratingbar .fill { height: 100%; background: var(--butter); border-radius: 999px; }

@media (max-width: 900px) {
  .profile-body { grid-template-columns: 1fr; }
}

/* ---------- waitlist forms ---------- */

.wl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }

.wl-form {
  background: var(--milk);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 22px 26px;
  box-shadow: var(--shadow);
}

.wl-form h3 { margin-bottom: 4px; }
.wl-form > p { font-size: 0.95rem; color: var(--ink-soft); margin-bottom: 0.6em; }

.wl-form label { display: block; font-weight: 800; font-size: 0.88rem; margin: 10px 0 4px; }

.wl-form input[type="email"],
.wl-form input[type="text"],
.wl-form select {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font: inherit;
  background: var(--cream);
}

.wl-form input:focus-visible, .wl-form select:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 1px;
}

.wl-form button { margin-top: 14px; width: 100%; }

.wl-note { font-size: 0.8rem; color: var(--ink-soft); margin-top: 9px; margin-bottom: 0; }

/* ---------- newsletter bar (The Milk Round) ---------- */

.newsbar {
  background: var(--sun-wash);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 40px;
}

.newsbar h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 1.25rem; margin-bottom: 3px; }

.newsbar .nb-pitch { flex: 1.3; min-width: 260px; }
.newsbar .nb-pitch p { font-size: 0.97rem; color: var(--ink-soft); margin: 0; max-width: none; }

.newsbar form { flex: 1 1 260px; min-width: 0; display: flex; flex-wrap: wrap; gap: 10px; }

.newsbar input[type="email"] {
  flex: 1 1 170px;
  min-width: 0;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font: inherit;
  background: var(--milk);
}

.newsbar input[type="email"]:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; }

.newsbar button { white-space: nowrap; }

/* ---------- articles ---------- */

.article { max-width: 720px; margin: 0 auto; padding: 44px 24px 72px; }

.article h1 { font-size: clamp(2rem, 4.5vw, 2.8rem); }

.article .dek { font-size: 1.12rem; color: var(--ink-soft); margin-bottom: 1.6em; }

.article h2 { font-size: 1.45rem; margin-top: 1.6em; }

.article p, .article li { font-size: 1.02rem; line-height: 1.7; }

.article ul, .article ol { padding-left: 24px; }

.article li { margin-bottom: 0.5em; }

.article .callout { margin: 24px 0; }

.article table { width: 100%; border-collapse: collapse; font-size: 0.98rem; margin: 18px 0; }
.article td, .article th { border-top: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.article th { font-weight: 800; border-top: none; }

.crumb { font-size: 0.88rem; font-weight: 700; margin-bottom: 18px; }

.next-read {
  background: var(--sun-wash);
  border-radius: var(--radius-card);
  padding: 20px 24px;
  margin-top: 40px;
}
.next-read a { font-weight: 800; }

/* ---------- footer ---------- */

.site-foot {
  background: var(--amber-deep);
  color: #F3E8C8;
  padding: 48px 0 40px;
  margin-top: 0;
}

.site-foot .wrap { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 36px; }

.site-foot a { color: #F3E8C8; text-decoration: none; display: block; margin-bottom: 8px; font-size: 0.95rem; }

.foot-copy { font-size: 0.8rem; color: #D9C68F; margin-top: 10px; }
.site-foot a:hover { text-decoration: underline; }

.site-foot .brand-word { color: var(--milk); }

.foot-disclaimer {
  font-size: 0.83rem;
  color: #D9C68F;
  max-width: none;
  margin-top: 14px;
}

/* ---------- page hero strip ---------- */

.page-head { background: var(--sun-pale); padding: 44px 0 34px; }
.page-head p { color: var(--ink-soft); }

/* ---------- guide topics ---------- */

/* The guides hub is six topic cards, not a wall of every article, so a topic
   card is deliberately larger than a listing card: three across at full
   width, a taller picture and a serif title.
   min(300px, 100%) rather than a bare 300px - with auto-fill a bare minimum
   wider than the container produces one oversized track and overflows the
   320px phone. */
.topic-grid { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.topic-grid .listing-card .ph { height: 168px; }
.topic-grid .lc-count {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--amber);
}
.topic-grid .lc-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.32rem;
  font-weight: 600;
  line-height: 1.2;
}

/* the closing note under a topic's card grid - it sits AFTER the guides, not
   in front of them, so nothing delays the reader getting to a card */
.topic-intro { max-width: 640px; color: var(--ink-soft); margin-top: 26px; }

/* Every guide, A to Z. A text list, not 29 more picture cards - the hub still
   links the whole library on one page without going back to being a wall.
   column-width rather than a column count, so it collapses to one column on a
   phone with no media query. */
.guide-az {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  columns: 15rem;
  column-gap: 34px;
}
.guide-az li { break-inside: avoid; margin: 0 0 9px; font-size: 0.97rem; }
.guide-az a { font-weight: 700; text-decoration: none; color: var(--amber-deep); }
.guide-az a:hover { text-decoration: underline; }

/* the lateral row at the foot of a topic page: the other five topics, so a
   reader who picked the wrong door is one click from the right one */
.topic-more { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 0; }
.topic-more a {
  background: var(--milk);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 16px;
  font-weight: 800;
  font-size: 0.94rem;
  text-decoration: none;
  color: var(--amber-deep);
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .hero .wrap, .listing-page, .checkout, .advice-cols { grid-template-columns: 1fr; }
  .market, .community { grid-template-columns: 1fr; }
  .filters, .buy-box { position: static; }
  .steps, .lanes { grid-template-columns: 1fr; }
  .milkrun { grid-template-columns: repeat(2, 1fr); row-gap: 26px; }
  .milkrun li:nth-child(2)::after { display: none; }
  .site-foot .wrap { grid-template-columns: 1fr; }
  .side-cta { justify-content: flex-start; }
  .hero .ph { height: 300px; }
  .nav { gap: 14px; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* guide byline + shelf headings */
.byline {
  font-size: 0.86rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
  margin: 0 0 26px;
}
.byline .rev { font-style: italic; }
.byline a { font-weight: 700; }

.shelf-head {
  font-size: 1.5rem;
  margin-bottom: 4px;
}
.shelf-head + .shelf-dek {
  color: var(--ink-soft);
  font-size: 0.98rem;
  margin-bottom: 22px;
  max-width: 620px;
}
.card-grid + .shelf-head { margin-top: 52px; }

/* answer box + on-page FAQ */
.answerbox {
  background: var(--sun-pale);
  border-radius: var(--radius-card);
  padding: 22px 26px;
  margin: 0 0 30px;
}
.answerbox p:first-child { margin-top: 0; }
.answerbox p:last-of-type { margin-bottom: 12px; }
.answerbox .jump {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.94rem;
}
.answerbox .jump li { margin: 0; }
.answerbox .jump a { font-weight: 800; color: var(--amber-deep); }

.faq h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.12rem;
  margin-top: 1.4em;
}
.faq h3 + p { margin-top: 6px; }

/* sources list at the foot of a guide */
.sources {
  margin-top: 36px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.sources h2 {
  font-size: 1.05rem;
  margin: 0 0 8px;
}
.sources ul { margin: 0; padding-left: 20px; }
.sources li { margin: 5px 0; }
.sources a { font-weight: 700; overflow-wrap: break-word; }

/* phone: nothing scrolls sideways */
@media (max-width: 640px) {
  .wrap { padding: 0 18px; }
  .section { padding: 26px 0; }
  .page-head { padding: 32px 0 26px; }

  /* the two waitlist forms stack */
  .wl-grid { grid-template-columns: 1fr; gap: 22px; }
  .wl-form { padding: 22px 20px 24px; }

  /* newsletter bar: pitch over field over button */
  .newsbar { flex-direction: column; align-items: stretch; gap: 16px; padding: 22px 20px; }
  /* .newsbar flips to a column here, so every flex shorthand set for the row
     layout (nb-pitch flex:1.3, form flex:1 1 260px) is re-read as a HEIGHT
     basis - that 260px was showing up as dead space under the button */
  .newsbar .nb-pitch { min-width: 0; flex: 0 0 auto; }
  .newsbar form { min-width: 0; flex-direction: column; gap: 12px; flex: 0 0 auto; }
  /* the form turns into a column here, so the base flex: 1 1 170px would be
     read as a 170px HEIGHT basis and grow - the input ballooned to 196px */
  .newsbar input[type="email"] { min-width: 0; width: 100%; flex: 0 0 auto; }
  .newsbar button { width: 100%; }

  /* articles: tighter gutters, wide tables scroll inside their own box */
  .article { padding: 34px 18px 60px; }
  .article table { display: block; width: 100%; overflow-x: auto; }
  .article table th, .article table td { white-space: normal; }
  .answerbox { padding: 18px 20px; }

  .card-grid { gap: 16px; }
  .hero .ph { height: 240px; }
  .hero-ctas { gap: 10px; }
  .hero-ctas .btn { flex: 1 1 auto; text-align: center; }

  .nav { gap: 12px; }
  .nav a { font-size: 0.95rem; }
  .btn-small { padding: 7px 14px; font-size: 0.85rem; }
}

/* phone: wide tables become labelled blocks */
@media (max-width: 640px) {
  .article table.stack,
  .article table.stack tbody,
  .article table.stack tr,
  .article table.stack td { display: block; width: 100%; overflow: visible; }
  .article table.stack tr:first-child { display: none; }
  .article table.stack tr {
    border-top: 1px solid var(--line);
    padding: 12px 0 6px;
  }
  .article table.stack td { border: 0; padding: 5px 0; }
  .article table.stack td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-weight: 800;
    font-size: 0.8rem;
    color: var(--ink-soft);
    margin-bottom: 1px;
  }
  .article table.stack td:first-child {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.1rem;
    font-weight: 600;
    padding-bottom: 4px;
  }
}

/* nav: long labels on desktop, short on phones */
.nav-short { display: none; }
@media (max-width: 640px) {
  .nav-long { display: none; }
  .nav-short { display: inline; }
  .nav { gap: 14px; }
  .site-head .wrap { gap: 10px; }
}

/* nav: fit one row on phones */
@media (max-width: 640px) {
  .site-head .wrap { padding: 0 14px; gap: 8px; }
  /* the heart bottle carries the brand on phones so the four items fit one row */
  .brand { gap: 7px; padding: 6px 2px; }
  .brand svg { width: 20px; height: 36px; }
  .brand-word { display: none; }
  .nav { gap: 16px; flex-wrap: wrap; justify-content: flex-end; }
  .nav a { font-size: 0.95rem; }
  .nav .btn-small { padding: 8px 14px; font-size: 0.88rem; }
}

/* article lead image */
.article-lead {
  margin: 4px 0 30px;
}
.article-lead.ph {
  height: 260px;
  border-radius: var(--radius-card);
}
.article-lead.ph::before { width: 46px; height: 88px; }

@media (max-width: 640px) {
  .article-lead.ph { height: 180px; }
}

/* click-to-load video card */
.video-card {
  display: flex;
  gap: 20px;
  align-items: center;
  background: var(--milk);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 16px;
  margin: 26px 0;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.video-card:hover { border-color: var(--sun-deep); box-shadow: var(--shadow); }

.vc-thumb {
  position: relative;
  flex: 0 0 190px;
  height: 116px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(140deg, var(--sun) 0%, var(--sun-pale) 55%, var(--milk) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.vc-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vc-thumb::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--milk);
  opacity: 0.92;
}
.vc-play {
  position: relative;
  width: 0;
  height: 0;
  border-left: 22px solid var(--amber-deep);
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  margin-left: 6px;
}
.vc-body { display: flex; flex-direction: column; gap: 5px; }
.vc-title { font-weight: 800; font-size: 1.02rem; line-height: 1.35; }
.vc-meta { font-size: 0.95rem; color: var(--ink-soft); }
.vc-note { font-size: 0.82rem; color: var(--amber); font-weight: 700; }

.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 26px 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #000;
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 640px) {
  .video-card { flex-direction: column; align-items: stretch; gap: 14px; }
  .vc-thumb { flex: none; width: 100%; height: 150px; }
}

/* ---------- guide search (learn hub, client-side only) ---------- */

.guide-search { max-width: 560px; margin-top: 18px; position: relative; }
.guide-search input {
  width: 100%;
  padding: 12px 18px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font: inherit;
  background: var(--milk);
}
.guide-search input:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; }

.gs-results {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--milk);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.gs-results a {
  display: block;
  padding: 10px 16px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--line);
}
.gs-results a:last-child { border-bottom: 0; }
.gs-results a:hover, .gs-results a:focus-visible { background: var(--sun-pale); }
.gs-title { display: block; font-weight: 800; font-size: 0.98rem; }
.gs-dek {
  display: block;
  font-size: 0.85rem;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gs-none { padding: 12px 16px; margin: 0; font-size: 0.92rem; color: var(--ink-soft); }

/* ---------- the founder letter, set as an actual letter (09-14) ---------- */

/* 09-15: tighter top run-in - the masthead is the page's real opening */
.article.letter-page { padding-top: 26px; }
.article.letter-page .crumb { margin-bottom: 12px; }
.article.letter-page h1 { margin-bottom: 12px; }

.letter {
  position: relative;
  background: var(--milk);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  padding: 26px 46px 32px;
  margin: 0 0 40px;
}

.letter-head { text-align: center; margin-bottom: 6px; }
.letter-head svg { display: inline-block; }
.letter-head .lh-word {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  margin-top: 6px;
}
.letter-head .lh-line {
  display: block;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 2px;
}

.letter-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 16px;
  color: var(--amber);
}
.letter-rule::before,
.letter-rule::after {
  content: "";
  height: 1px;
  flex: 1 1 auto;
  background: var(--line);
}

.letter-body p {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.06rem;
  line-height: 1.75;
  margin-bottom: 1.1em;
}
.letter-body p.salute { margin-bottom: 0.9em; }
.letter-body p:nth-of-type(2)::first-letter {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 3.05em;
  float: left;
  line-height: 0.82;
  padding: 4px 8px 0 0;
  color: var(--amber);
}

.letter-sig {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}
.letter-sig .sig-text {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 1.12rem;
  line-height: 1.5;
}
.letter-sig .sig-text a { color: inherit; }

.letter-ps {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
}
.letter-ps p {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 0.99rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
}

@media (max-width: 640px) {
  .letter { padding: 24px 20px 22px; }
  .letter-body p { font-size: 1.02rem; }
}

/* full-width photo inside a landing section (added 09-09 - the landing had exactly one image on it) */
.section-figure.ph {
  height: 220px;
  margin: 14px 0 2px;
}
@media (max-width: 640px) {
  .section-figure.ph { height: 200px; }
}

/* ---------- share (added 09-15 - guide pages only, see tools/add_share.py) ---------- */

.share {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px dashed var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}

.share-label {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.04rem;
  color: var(--ink-soft);
}

.share-row { display: flex; flex-wrap: wrap; gap: 10px; }

.share-btn {
  display: inline-block;
  border-radius: 999px;
  padding: 7px 17px;
  font-family: inherit;
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  color: var(--amber);
  background: transparent;
  border: 2px solid var(--line);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

/* an author display: beats the UA [hidden] rule - without this the buttons
   share.js ships hidden would render anyway */
.share-btn[hidden] { display: none; }

.share-btn:hover { background: var(--sun-pale); border-color: var(--sun); }
.share-btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.share-btn.is-done { background: var(--sun-pale); border-color: var(--sun); color: var(--ink); }

@media (max-width: 640px) {
  .share { flex-direction: column; align-items: flex-start; gap: 12px; }
}


/* ---------- The Milk Round card (subscribe.js) ---------- */

/* a card that sits in from the corner, never a curtain: the page stays readable
   behind it and it is dismissed for good with one tap. It lifts well clear of the
   bottom edge so it reads as part of the page rather than a cookie bar, and on a
   wide screen it drifts in toward the middle as well - but only as far as the
   gutter beside the 720px reading column allows, so it never covers a word. Below
   about 1450px there is no such room and it stays in the corner. */
.subcard {
  position: fixed;
  right: clamp(24px, calc(50vw - 700px), 160px);
  bottom: clamp(24px, 13vh, 150px);
  z-index: 60;
  width: 350px;
  max-width: calc(100vw - 32px);
  background: var(--milk);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: 0 12px 34px rgba(88, 70, 45, 0.20);
  padding: 22px 24px 20px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* the same trick as .share-btn: an author display rule would beat the UA
   [hidden] rule, so the hidden state is spelled out */
.subcard[hidden] { display: none; }

.subcard.is-up { opacity: 1; transform: none; }

.subcard h3 { font-size: 1.15rem; margin-bottom: 6px; padding-right: 28px; }

.subcard p {
  font-size: 0.93rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0 0 16px;
  max-width: none;
}

.subcard form { display: flex; flex-direction: column; gap: 10px; }

.subcard input[type="email"] {
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font: inherit;
  background: var(--cream);
  min-width: 0;
}

.subcard input[type="email"]:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; }

.subcard .btn { width: 100%; padding: 11px 20px; }

.sc-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  line-height: 1;
  font-size: 1.5rem;
  font-family: inherit;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.sc-close:hover { background: var(--sun-pale); color: var(--ink); }
.sc-close:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; }

@media (max-width: 640px) {
  .subcard { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 20px 20px 18px; }
}