/* ============================================================================
   Linda's Cooking Club, the members area.

   This is HER design system, read off her own live club page (2026-09-03),
   not a system we invented:

     script display   The Sweetest Thing, her own font file, 34-56px
     body             Josefin Sans 16px / 24px, #1C1A15
     UI chrome        Manrope 700-800, uppercase, 12-14px (nav + buttons only)
     backgrounds      exactly three: #FFFFFF, #FAF5EB cream, #1C1A15 warm black
     accent           gold #E6A22C
     photography      her own, from her media library

   TWO DELIBERATE DEPARTURES, both documented:

   1. GOLD CONTRAST. Her gold on cream measures 2.02:1, which fails even the
      3:1 large-text minimum, and her members are 40s to 70s. So the SAME gold
      is deepened to #A26B17 (4.15:1) wherever script sits on cream or white,
      and her true #E6A22C is kept on the dark band and over photographs where
      it measures 7.9:1 and looks exactly like her site. Same hue, same
      saturation, readable at every size.
   2. ACTIONS ARE SAGE, NOT GOLD. Gold at button size fails contrast in any
      shade light enough to read as gold. Her sage is promoted to the single
      action colour at #5E7F50, which is 4.54:1 under white text.

   One light theme, locked, because the brand is cream. One radius: 12px.
   ========================================================================= */

/* Her own script face, copied from her media library by sync-brand-assets.php */
@font-face {
  font-family: 'The Sweetest Thing';
  src: url('/assets/font/the-sweetest-thing.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

:root {
  --white: #FFFFFF;
  --cream: #FAF5EB;
  --dark: #1C1A15;
  --ink: #1C1A15;
  --muted: #5F594C;

  --gold: #E6A22C;        /* her true gold: dark backgrounds and photos only */
  --gold-deep: #A26B17;   /* the same gold, for LARGE script (needs 3:1) */
  --gold-text: #8F5C12;   /* deeper still, for the 15px kicker (needs 4.5:1) */
  --sage: #5E7F50;        /* the one action colour */
  --sage-dark: #4C6841;
  --line: #E6DECB;
  --danger: #8C3324;

  --radius: 12px;
  --shell: 1080px;
  --measure: 62ch;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: 'Josefin Sans', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

p { max-width: var(--measure); }

/* ---- the script, her signature. Never at body size, never for money. ---- */
.script {
  font-family: 'The Sweetest Thing', 'Josefin Sans', cursive;
  font-weight: 400;
  line-height: 1.08;
  color: var(--gold-deep);
  margin: 0 0 14px;
  letter-spacing: 0.01em;
}
h1.script { font-size: clamp(34px, 5.2vw, 52px); }
h2.script { font-size: clamp(28px, 3.8vw, 40px); }
.on-dark .script, .hero .script { color: var(--gold); }
.hero .script { color: #fff; }

/* ---- the kicker, her "A New Experience from Chef Linda" line ---- */
.kicker {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin: 0 0 8px;
}
.on-dark .kicker { color: var(--gold); }
/* over photography the kicker is WHITE: gold measured 2.28:1 on a phone
   against a highlight in the image, and no scrim rescues it. */
.hero .kicker, .masthead .kicker { color: #FFFFFF; }

/* ---- chrome ---- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 16px 28px;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.site-header .logo img { display: block; height: 46px; width: auto; }
.footer-brand img { height: 58px; width: auto; }
.site-nav { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
.site-nav a {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border-bottom: 2px solid transparent;
  touch-action: manipulation;
}
.site-nav a:hover { border-bottom-color: var(--sage); }
.site-nav a.current { color: var(--sage-dark); border-bottom-color: var(--sage); }

main { flex: 1; }

/* the footer is defined in full further down, with its columns */

/* ---- bands: her three backgrounds, nothing else ---- */
.band { padding: 56px 28px; }
.band-white { background: var(--white); }
.band-cream { background: var(--cream); }
.band-dark { background: var(--dark); color: #F3EEE3; }
.band-dark p { color: #DDD5C6; }
.band-tight { padding: 36px 28px; }
.shell { max-width: var(--shell); margin: 0 auto; }
.shell-narrow { max-width: 680px; margin: 0 auto; }

/* ---- photographic hero, the shape of her own club page ---- */
.hero {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: flex-end;
  padding: 44px 28px 38px;
  background-size: cover;
  background-position: center 38%;
  color: #fff;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28,26,21,0.26) 0%, rgba(28,26,21,0.46) 38%, rgba(28,26,21,0.86) 76%, rgba(28,26,21,0.94) 100%);
}
.hero > * { position: relative; width: 100%; max-width: var(--shell); margin: 0 auto; }
.hero p { color: #F1EBDF; max-width: 52ch; }
.hero-short { min-height: 260px; }

/* ---- buttons: sage, the only action colour ---- */
.btn {
  display: inline-block;
  background: var(--sage);
  color: #fff;
  border: 0;
  border-radius: var(--radius);
  padding: 14px 30px;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s ease, transform .18s ease;
}
.btn:hover { background: var(--sage-dark); }
.btn:active { transform: translateY(1px); }
.btn-quiet {
  background: transparent;
  color: var(--sage-dark);
  border: 2px solid var(--sage);
}
.btn-quiet:hover { background: rgba(94,127,80,.10); color: var(--sage-dark); }
.btn-on-dark { background: var(--gold); color: var(--dark); }
.btn-on-dark:hover { background: #F0B045; }

a { color: var(--sage-dark); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--sage-dark);
  outline-offset: 3px;
  border-radius: 4px;
}
.band-dark a:focus-visible, .hero a:focus-visible { outline-color: var(--gold); }

/* ---- her leaf list. The glyph is the Font Awesome leaf her own site uses. ---- */
.leaf-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px 34px; }
@media (min-width: 720px) { .leaf-list.two-col { grid-template-columns: 1fr 1fr; } }
.leaf-list li { display: flex; align-items: flex-start; gap: 11px; }
.leaf-list svg { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 4px; fill: var(--sage); }
.band-dark .leaf-list svg { fill: var(--gold); }

/* ---- image + text split, her Barn section ---- */
.split { display: grid; gap: 32px; align-items: center; }
@media (min-width: 860px) {
  .split { grid-template-columns: 1fr 1fr; gap: 48px; }
  .split.narrow-media { grid-template-columns: 5fr 6fr; }
}
.split img { width: 100%; height: 100%; max-height: 460px; object-fit: cover; border-radius: var(--radius); display: block; }


/* ---- the month masthead: an issue cover, taller and quieter than a hero ---- */
.masthead {
  position: relative;
  min-height: min(58vh, 540px);
  display: flex;
  align-items: flex-end;
  padding: 72px 28px 0;
  background-size: cover;
  background-position: center 45%;
  color: #fff;
}
.masthead::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28,26,21,0.28) 0%, rgba(28,26,21,0.48) 38%, rgba(28,26,21,0.86) 76%, rgba(28,26,21,0.94) 100%);
}
.masthead-inner { position: relative; width: 100%; max-width: var(--shell); margin: 0 auto; }

.masthead .script { color: #fff; font-size: clamp(38px, 6vw, 62px); }
.masthead .lede { color: #F2ECE0; font-size: 18px; max-width: 56ch; }

/* ---- section heads: one place, consistent rhythm ---- */
.section-head { margin-bottom: 26px; }
.section-head p { color: var(--muted); margin: 0; }

/* ---- the month's video ---- */
.video-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--dark);
  aspect-ratio: 16 / 9;
  box-shadow: 0 18px 44px rgba(28,26,21,.16);
}
.video-frame iframe, .video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.caption { margin: 14px auto 0; text-align: center; font-size: 14px; color: var(--muted); max-width: 52ch; }

/* A month with no video yet. A 16:9 black rectangle here reads as a fault,
   so the waiting state is small, warm and says what is happening. */
.video-waiting {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 30px 28px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.video-waiting svg { flex: 0 0 auto; width: 18px; height: 18px; fill: var(--sage); }
.video-waiting p { margin: 0; max-width: 46ch; color: var(--muted); }

/* ---- the recipes ----
   Set as cards, not rows. A full-width row put 764px of dead space between the
   dish and its button and gave a 36px tap target; a card is the target, it is
   large, and six dishes read as a menu you want to cook from. ---- */
.recipe-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin-top: 26px;
}
@media (min-width: 620px) { .recipe-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .recipe-grid { grid-template-columns: repeat(3, 1fr); } }

.recipe-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 150px;
  padding: 22px 24px 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.recipe-card:hover {
  border-color: var(--sage);
  box-shadow: 0 10px 26px rgba(28,26,21,.10);
  transform: translateY(-2px);
}

.recipe-name {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  color: var(--ink);
}
.recipe-open {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--sage-dark);
}
.recipe-open svg { width: 13px; height: 13px; fill: var(--sage); }

/* ---- the four practical sheets, one tile each, no empty cells ---- */
.tiles { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .tiles { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .tiles { grid-template-columns: repeat(4, 1fr); } }
.tile {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 76px;
  padding: 18px 20px;
  background: var(--cream);
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  transition: border-color .18s ease, transform .18s ease;
}
.tile:hover { border-color: var(--sage); transform: translateY(-2px); }
.tile svg { flex: 0 0 auto; width: 17px; height: 17px; fill: var(--sage); }
.tile-label { font-size: 16px; font-weight: 600; flex: 1 1 auto; line-height: 1.3; }
.tile-meta { font-size: 13px; color: var(--muted); white-space: nowrap; }
.month-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.extra-head { font-family: 'Josefin Sans', sans-serif; font-size: 19px; font-weight: 600; margin: 34px 0 8px; }

/* ---- a plain file row, for anything that is neither ---- */
.file-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.file-row:last-of-type { border-bottom: 0; }
.file-row a { font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(94,127,80,.4); }
.file-row a:hover { border-bottom-color: var(--sage-dark); }
.file-row .size { font-size: 13px; color: var(--muted); white-space: nowrap; }

/* ⛔ NO scroll-reveal here. A view()-timeline reveal was tried and left whole
   sections stuck invisible below the fold. At motion 3, for members in their
   40s to 70s, a reveal earns nothing and risks hiding the month. Static. */

/* ---- past months ---- */
.past-months { display: grid; gap: 10px; margin-top: 16px; }
.past-months a {
  min-height: 52px;
  align-items: center;
  touch-action: manipulation;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
}
.past-months a:hover { border-color: var(--sage); }
.past-months .region { color: var(--muted); font-size: 14px; }

/* ---- prices ---- */
.plans { display: grid; gap: 20px; margin: 26px 0 0; }
@media (min-width: 720px) { .plans { grid-template-columns: 1fr 1fr; } }
.plan {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plan.featured { border: 2px solid var(--sage); }
.plan h3 {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.plan .price {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 42px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
}
.plan .price span { font-size: 16px; font-weight: 400; color: var(--muted); }
.plan p { margin: 0; font-size: 15px; color: var(--muted); }
/* auto pushes both buttons to the card floor so they line up across the pair,
   even though only the yearly card carries the saving badge */
.plan .btn { margin-top: auto; text-align: center; }
.saving {
  align-self: flex-start;
  background: var(--sage);
  color: #fff;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 5px 13px;
}

/* ---- forms ---- */
.form-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
}
.band-cream .form-card { background: var(--white); }
label {
  display: block;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 7px;
}
input[type="email"], input[type="text"] {
  width: 100%;
  padding: 14px 16px;
  font-size: 16px;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid #C9C0AB;
  border-radius: var(--radius);
}
input::placeholder { color: #6E6757; }

.notice, .error-note {
  border-radius: var(--radius);
  padding: 15px 19px;
  margin: 0 0 22px;
  font-size: 15px;
  max-width: var(--measure);
}
.notice { background: #F1EAD7; border: 1px solid var(--line); }
.error-note { background: #F7E9E5; border: 1px solid #D9B3A9; color: var(--danger); }

.muted { color: var(--muted); }
.small { font-size: 14px; }
.stack > * + * { margin-top: 14px; }

/* ---- admin: an internal tool, kept plain on purpose ---- */
.admin-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 18px;
}
.admin-card h2 { font-family: 'Josefin Sans', sans-serif; font-size: 19px; font-weight: 600; margin: 0 0 12px; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th, table.data td { text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data td a { display: inline-block; padding: 4px 0; }
table.data th { font-family: 'Manrope', sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.table-scroll { overflow-x: auto; }
.pill { display: inline-block; border-radius: 999px; padding: 3px 11px; font-family: 'Manrope', sans-serif; font-size: 12px; font-weight: 800; }
.pill.active { background: #E3EBDC; color: var(--sage-dark); }
.pill.past_due { background: #F4EBD2; color: #6F5310; }
.pill.canceled, .pill.refunded, .pill.disputed { background: #F0E5E2; color: var(--danger); }
.pill.pending { background: #EDE8DC; color: var(--muted); }


/* ---- Chef Linda's introduction ----
   ⛔ Not an avatar. Her photograph is a professional frame and a circle threw
   it away, so it is shown as a photograph: 4:5, generous, with a warm block
   offset behind it, and her name set in her own script like a signature.
   The page's opening words live here too, on solid ground, because body copy
   over a photograph cannot be read on a phone. ---- */
.chef { background: var(--white); padding: 46px 28px 10px; }
.chef-inner { display: grid; gap: 26px; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .chef-inner { grid-template-columns: 268px 1fr; gap: 44px; align-items: center; }
  .chef { padding: 54px 28px 12px; }
}

.chef-photo { position: relative; margin: 0; width: 190px; }
@media (min-width: 720px) { .chef-photo { width: 268px; } }
.chef-photo img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 16px 38px rgba(28,26,21,.18);
}
/* the warm block behind the frame: a made thing, not a floating cutout */
.chef-photo::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: 14px;
  top: 14px;
  right: -14px;
  bottom: -14px;
  border-radius: var(--radius);
  background: var(--gold);
  opacity: .22;
}

.chef-words .kicker { margin-bottom: 6px; }
.chef-name {
  font-family: 'The Sweetest Thing', 'Josefin Sans', cursive;
  font-size: clamp(32px, 4.4vw, 44px);
  line-height: 1.05;
  color: var(--gold-deep);
  margin: 0 0 14px;
}
.chef-lede {
  margin: 0;
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 56ch;
}
@media (max-width: 719px) {
  .chef { padding: 38px 28px 6px; }
  .chef-lede { font-size: 17px; }
}

/* ---- a fuller footer: how to reach a human, and where else she is ---- */
.site-footer { background: var(--dark); color: #EFE9DC; padding: 46px 28px 34px; text-align: left; }
.footer-shell { max-width: var(--shell); margin: 0 auto; }
.footer-top {
  display: grid;
  gap: 30px;
  grid-template-columns: 1fr;
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(239,233,220,.18);
}
@media (min-width: 760px) { .footer-top { grid-template-columns: 1.4fr 1fr 1fr; gap: 44px; } }
.footer-brand img { height: 58px; width: auto; margin-bottom: 10px; }
.footer-brand p { color: #C9C1B0; font-size: 14px; margin: 0; max-width: 34ch; }
.footer-col-title {
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 12px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 0; }
.footer-col a, .footer-col span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 2px 0;
  touch-action: manipulation;
}
.footer-col a, .footer-col span { color: #EFE9DC; text-decoration: none; font-size: 15px; }
.footer-col a:hover { color: var(--gold); text-decoration: underline; }
.footer-social { display: flex; gap: 12px; margin-top: 4px; }
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(239,233,220,.32);
  border-radius: 50%;
}
.footer-social a:hover { border-color: var(--gold); background: rgba(230,162,44,.12); }
.footer-social svg { width: 17px; height: 17px; fill: #EFE9DC; }
.footer-social a:hover svg { fill: var(--gold); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  justify-content: space-between;
  padding-top: 20px;
  font-size: 13px;
  color: #B7AF9E;
}
.footer-bottom a { color: #B7AF9E; }


/* ---- the recipes bento ----
   Six white cards of type is the "boring by default" failure: a feature cell
   carrying her own photograph of the month's world gives the grid something to
   look at, and the ghosted numeral gives each card its own surface. ---- */
.recipe-feature {
  grid-column: 1 / -1;
  position: relative;
  min-height: 190px;
  display: flex;
  align-items: flex-end;
  border-radius: var(--radius);
  overflow: hidden;
  background-size: cover;
  background-position: center 55%;
  box-shadow: 0 12px 30px rgba(28,26,21,.14);
}
@media (min-width: 620px) { .recipe-feature { min-height: 230px; } }
@media (min-width: 1000px) { .recipe-feature { min-height: 260px; } }
/* a soft inner edge so the photograph sits on the cream rather than floating */
.recipe-feature::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(28,26,21,.10);
}

/* the numeral becomes the card's surface, not a label sitting on empty space */
.recipe-card { position: relative; overflow: hidden; }
.recipe-card .recipe-no {
  position: absolute;
  right: 14px;
  bottom: 2px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 76px;
  font-weight: 600;
  line-height: 1;
  color: var(--gold-deep);
  opacity: .12;
  pointer-events: none;
}
.recipe-card .recipe-name, .recipe-card .recipe-open { position: relative; }
.recipe-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gold);
  opacity: 0;
  transition: opacity .2s ease;
}
.recipe-card:hover::after { opacity: .85; }

/* ---- materiality: warm shadows tinted to the ground, never flat black ---- */
.tile, .past-months a { box-shadow: 0 1px 2px rgba(28,26,21,.04); }
.tile:hover, .past-months a:hover { box-shadow: 0 8px 20px rgba(28,26,21,.10); }
.tile svg { width: 20px; height: 20px; color: var(--sage); fill: currentColor; }

/* ---- her sprig, as the divider between the page's movements ---- */
.sprig-rule {
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 6px 0 0;
}
.sprig-rule::before, .sprig-rule::after {
  content: '';
  height: 1px;
  width: min(120px, 18vw);
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.sprig-rule svg { width: 15px; height: 15px; fill: var(--sage); opacity: .75; }

/* ---- typographic craft ---- */
h1, h2, h3, .script { text-wrap: balance; }
.standfirst p, .section-head p { text-wrap: pretty; }

/* ---- print: these are recipes and they go into a kitchen ----
   Black on white, no photographs, no controls, nothing that wastes ink. A
   member printing the month should get the words and nothing else. ---- */
@media print {
  body { background: #fff; color: #000; font-size: 11.5pt; }

  .site-header, .site-footer, .site-nav, .no-print, .chef-photo, .recipe-open, .recipe-feature, .recipe-card .recipe-no, .sprig-rule,
  .video-frame, .video-waiting, .caption,
  .menu-get, .past-months, .btn { display: none !important; }

  /* the masthead becomes a plain title block */
  .masthead, .hero {
    min-height: 0;
    padding: 0 0 10pt;
    background: none !important;
    color: #000;
    display: block;
  }
  .masthead::before, .hero::before { display: none !important; }
  .masthead .script, .hero .script, .script { color: #000 !important; }
  .masthead .kicker, .hero .kicker, .kicker { color: #000 !important; }
  .masthead .lede, .hero p { color: #000 !important; }

  .band { padding: 0 0 12pt; background: #fff !important; color: #000 !important; }
  .band-dark, .band-dark p, .on-dark { background: #fff !important; color: #000 !important; }
  /* everything prints against the same left edge */
  .shell, .shell-narrow, .masthead-inner { max-width: none; margin: 0; padding: 0; }
  .chef { padding: 0 0 10pt; }
  .chef-inner { display: block; }
  .chef-name { color: #000 !important; font-size: 15pt; }
  .chef-lede { font-size: 11.5pt; max-width: none; }
  .recipe-grid { display: block; }
  .recipe-card { min-height: 0; padding: 5pt 0; border: 0; border-bottom: 1px solid #ccc; border-radius: 0; break-inside: avoid; }
  .recipe-name { font-size: 13pt; }

  /* the recipe menu prints as a list of what is in the month */
  .menu-list li { padding: 6pt 0; border-bottom: 1px solid #ccc; break-inside: avoid; }
  .menu-item h3 { font-size: 13pt; }
  .menu-item .size, .tile-meta, .file-row .size { display: none; }
  .menu-item::before { color: #000; }

  .tiles { display: block; }
  .tile {
    display: block;
    padding: 4pt 0;
    background: none !important;
    border: 0;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    break-inside: avoid;
  }
  .tile svg, .leaf-list svg { fill: #000; }

  .split { display: block; }
  .split img { display: none; }

  a { color: #000; text-decoration: none; }
  h1, h2, h3 { break-after: avoid; }
}

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


/* ---- R2, the publishing screen -------------------------------------------
   Her one screen, once a month. Judged on whether a woman in her seventies can
   get a month out in ten minutes without ringing anybody, so: one column, big
   targets, plain words, and no step that can be taken in the wrong order.
   Deliberately plainer than the member pages. It is a workbench, not a shop
   window, and atmosphere here would only be in the way. ---- */

.field { display: block; margin: 0 0 18px; }
.field-label {
  display: block;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 7px;
}
select, textarea, input[type="number"] {
  width: 100%;
  min-height: 44px;
  padding: 14px 16px;
  font-size: 16px;
  font-family: 'Josefin Sans', sans-serif;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid #C9C0AB;
  border-radius: var(--radius);
}
textarea { resize: vertical; min-height: 92px; line-height: 1.5; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.row-form { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.row-form .field { margin: 0; min-width: 240px; flex: 1 1 240px; }

.flash {
  border-radius: var(--radius);
  padding: 15px 19px;
  margin: 0 0 22px;
  font-size: 15px;
  max-width: var(--measure);
}
.flash.good { background: #E9F0E4; border: 1px solid #C3D4B8; color: #34492B; }
.flash.bad { background: #F7E9E5; border: 1px solid #D9B3A9; color: var(--danger); }
.bad-text { color: var(--danger); }

.back-link { text-decoration: none; }

/* The drop target. A dashed rectangle is the one place a wireframe look is
   right: it has to read as a hole you put things into. */
.dropzone {
  border: 2px dashed #C0B79F;
  border-radius: var(--radius);
  background: #FCFAF4;
  padding: 26px 22px;
  text-align: center;
  transition: background .15s ease, border-color .15s ease;
}
.dropzone.over { background: #EFF3EB; border-color: var(--sage); }
.dropzone p { margin: 0 0 6px; }
.dz-lead { font-size: 17px; font-weight: 600; }
/* A standalone control, so it carries a real target: 44px is the floor for
   anything that is not a link inside a sentence. */
.link-button {
  background: none;
  border: 0;
  padding: 12px 2px;
  min-height: 44px;
  font: inherit;
  color: var(--sage-dark);
  text-decoration: underline;
  cursor: pointer;
}
.link-button.danger { color: var(--danger); }

.uploads { margin-top: 18px; }
.upload-row { border-top: 1px solid var(--line); padding: 14px 0 4px; }
.upload-row:first-child { border-top: 0; }
.upload-name { margin: 0 0 8px; font-weight: 600; word-break: break-word; }
.upload-row .bar {
  height: 10px;
  background: #EDE7D8;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
}
.upload-row .bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--sage);
  transition: width .25s ease;
}
.upload-row.done .bar span { background: var(--sage-dark); }
.upload-state { margin: 0 0 6px; }

.files-table input[type="text"] { padding: 11px 12px; min-height: 44px; min-width: 200px; }
.files-table select { padding: 11px 12px; min-height: 44px; min-width: 170px; }
.reorder { display: inline-flex; gap: 4px; }
.move {
  width: 44px;
  height: 44px;
  border: 1.5px solid #C9C0AB;
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.move:hover { background: #F1EAD7; }

.drop-folder { margin-top: 20px; }
.drop-folder summary { cursor: pointer; padding: 8px 0; color: var(--sage-dark); }
.drop-folder p { margin: 6px 0 0; max-width: var(--measure); color: var(--muted); font-size: 14px; }
.drop-folder code { background: #F1EAD7; border-radius: 6px; padding: 2px 7px; font-size: 13px; }

.promises { list-style: none; margin: 0; padding: 0; max-width: var(--measure); }
.promises li { display: flex; gap: 11px; align-items: baseline; padding: 7px 0; }
.promises .tick { width: 18px; flex: none; text-align: center; font-weight: 700; }
.promises li.have .tick { color: var(--sage-dark); }
.promises li.missing { color: var(--muted); }
.promises li.missing .tick { color: #B3AB97; }
.have-line { display: flex; gap: 10px; align-items: baseline; margin: 0 0 8px; flex-wrap: wrap; }
.have-line .tick { color: var(--sage-dark); font-weight: 700; }

.publish-bar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 6px; }
.publish-note { margin: 12px 0 0; max-width: var(--measure); }
.hide-form { margin-top: 22px; }

.month-list { list-style: none; margin: 0; padding: 0; }
.month-list li + li { border-top: 1px solid var(--line); }
.month-link {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  align-items: baseline;
  padding: 14px 4px;
  text-decoration: none;
}
.month-link:hover { background: #FCFAF4; }
.month-name { font-size: 18px; font-weight: 600; color: var(--ink); }
.month-note { color: var(--muted); font-size: 14px; }

@media (max-width: 720px) {
  .grid-2 { grid-template-columns: 1fr; }
  .publish-bar .btn { width: 100%; text-align: center; }

  /* ⛔ A five-column table on a phone is a sideways scroll where only the first
     column is ever visible and the Remove button sits off the screen entirely.
     Each file becomes its own card, and every cell carries the heading it lost
     when the header row went away. */
  .files-table, .files-table tbody, .files-table tr, .files-table td { display: block; width: 100%; }
  .files-table tr:first-child { display: none; }
  .files-table tr {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 6px 12px 12px;
    margin-bottom: 14px;
    background: #FCFAF4;
  }
  .files-table td { border: 0; padding: 8px 0; }
  .files-table td::before {
    content: attr(data-label);
    display: block;
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 5px;
  }
  .files-table td[data-label=""]::before { display: none; }
  .files-table input[type="text"], .files-table select { width: 100%; min-width: 0; }
  .table-scroll { overflow-x: visible; }
}

/* ---- the past_due banner ----
   Warm, not alarming: the member still has access (that is the point of the
   grace period), so this reads as a nudge, in the site palette, never red. */
.billing-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: baseline;
  justify-content: center;
  background: #F4EBD2;
  color: #6F5310;
  padding: 13px 20px;
  font-size: 15px;
  text-align: center;
}
.billing-banner a { color: #6F5310; font-weight: 600; white-space: nowrap; }