/* ============================================================
   Sugar by Lelia — site styles ("scrapbook" redesign)
   ------------------------------------------------------------
   The look: warm cream pages, deep berry-brown text, a bright
   raspberry accent, and little handmade touches — softly tilted
   photos held up by "tape", handwritten captions, and squiggly
   underlines.

   Colors are set once here so they are easy to change.
   --accent is the main brand color (buttons, links, highlights).
   To try a different one, change --accent and --accent-hover
   (the hover one should be a slightly darker version).
   Some nice options: #C0266C (raspberry, current), #B23A5C
   (softer berry), #C4682E (warm orange), #7E8A5A (sage green).
   --script is the color of the handwriting; keep it a softer
   cousin of the accent so the two feel related.

   The site also has a dark look. It turns on automatically when
   a visitor's device is set to dark mode, and the moon/sun button
   in the menu bar lets them flip it by hand.
   ============================================================ */

/* ------------------------------------------------------------
   UPDATE — section rhythm (option 1b: bolder alternating bands)
   - Strict cream/blush alternation down the homepage:
     welcome → blush, featured → cream, what-i-make → blush,
     why → cream, kind words → blush, journey → cream.
   - Light blush deepened (#FAEBF0 → #F8E2EB) so bands read.
   - Dark bands lifted (#2C1A23 → #36202C, ≈1.4:1 vs the page);
     dark cards/borders lifted to match; CTA warmed (#5C3644)
     and footer darkened (#1A0D12) so the page ends in steps
     instead of one dark mass.
   ------------------------------------------------------------ */

:root {
  color-scheme: light;
  --accent: #C0266C;          /* main brand color (raspberry) */
  --accent-hover: #A81F5C;    /* buttons darken to this on hover */
  --script: #9C4A63;          /* the handwriting color */
  --cream: #FFF8F2;           /* page background */
  --text: #4A2B33;            /* deep berry-brown text */
  --text-soft: #5C3D47;       /* bigger paragraphs (a touch lighter) */
  --text-muted: #7E5A66;      /* small print and captions */
  --eyebrow: #8A5A68;         /* tiny UPPERCASE labels (review names…) */
  --card: #FFFFFF;            /* white cards and panels */
  --blush: #F8E2EB;           /* soft pink section background (deepened so bands read) */
  --border: #EFD3DD;          /* light pink borders */
  --border-strong: #D9B8C2;   /* darker pink: outlined buttons, underlines */
  --tape: rgba(243, 198, 216, 0.75);  /* the "washi tape" on photos */
  --placeholder-bg: #F6E3EA;  /* photo placeholder fill */
  --placeholder-line: #D9B8C2;/* photo placeholder dashed border */
  --placeholder-text: #8A5A68;/* photo placeholder label */
  --header-bg: rgba(255, 248, 242, 0.96);  /* see-through menu bar */
  --toggle-knob: #6E4A57;     /* circle on the light/dark switch */
  --cta-bg: #43272E;          /* dark "order now" band (dark in both themes) */
  --footer-bg: #3A2129;       /* footer band (dark in both themes) */
  --danger: #B3261E;          /* "something's missing" red on the order form */
}

/* ---------- Dark theme colors ----------
   Same idea as the light colors, shifted to a cozy deep-plum night
   look. The first block turns on automatically when the visitor's
   device prefers dark mode (unless they picked light with the
   button). The second turns on when they pick dark with the button.
   KEEP THE TWO BLOCKS IDENTICAL. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --accent: #E0679C;
    --accent-hover: #EB7FAD;
    --script: #D98BA4;
    --cream: #241419;
    --text: #F7E9EE;
    --text-soft: #E3C9D3;
    --text-muted: #CFA9B7;
    --eyebrow: #C79BAB;
    --card: #3E2734;       /* lifted to sit on the lighter band */
    --blush: #36202C;      /* lifted so bands are visible on the page */
    --border: #523546;     /* lifted with the band */
    --border-strong: #75495C;  /* lifted with the band */
    --tape: rgba(224, 103, 156, 0.30);
    --placeholder-bg: #33202B;
    --placeholder-line: #6B4456;
    --placeholder-text: #B58EA0;
    --header-bg: rgba(36, 20, 25, 0.95);
    --toggle-knob: #FFFFFF;
    --cta-bg: #5C3644;          /* lifted further so it stands apart from the sections above */
    --footer-bg: #1A0D12;       /* darkest band ends the page */
    --danger: #FF9089;          /* "something's missing" red, lightened for dark mode */
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --accent: #E0679C;
  --accent-hover: #EB7FAD;
  --script: #D98BA4;
  --cream: #241419;
  --text: #F7E9EE;
  --text-soft: #E3C9D3;
  --text-muted: #CFA9B7;
  --eyebrow: #C79BAB;
  --card: #3E2734;       /* lifted to sit on the lighter band */
  --blush: #36202C;      /* lifted so bands are visible on the page */
  --border: #523546;     /* lifted with the band */
  --border-strong: #75495C;  /* lifted with the band */
  --tape: rgba(224, 103, 156, 0.30);
  --placeholder-bg: #33202B;
  --placeholder-line: #6B4456;
  --placeholder-text: #B58EA0;
  --header-bg: rgba(36, 20, 25, 0.95);
  --toggle-knob: #FFFFFF;
  --cta-bg: #5C3644;          /* lifted further so it stands apart from the sections above */
  --footer-bg: #1A0D12;       /* darkest band ends the page */
  --danger: #FF9089;          /* "something's missing" red, lightened for dark mode */
}

/* ---------- Basic page resets ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: 'Nunito Sans', 'Nunito', sans-serif;
  line-height: 1.6;
  /* Keep the footer pinned to the bottom of the window, even on short pages */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* Sections that center themselves (margin auto) would otherwise shrink to
   fit their content inside the flex body — keep them full width instead */
body > * { width: 100%; }
.site-footer { margin-top: auto; }

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

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

/* Small reusable helpers */
.muted { color: var(--text-muted); margin: 0; }
.small { font-size: 15px; }
.center { text-align: center; }

/* The handwriting used for captions and little notes */
.script,
.brand-script {
  font-family: 'Caveat', cursive;
  font-weight: 700;
}

/* A centred column of a comfortable reading width, used by most sections.
   The top/bottom space starts at 48px on phones and grows to 76px on big
   screens — the same rhythm as the welcome band, so sections feel evenly
   spaced when they stack on a small screen. */
.section {
  max-width: 1140px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 76px) 20px;
}
.section-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 76px) 20px;
}
.center-row {
  display: flex;
  justify-content: center;
  gap: 14px;              /* breathing room when there's more than one button */
  flex-wrap: wrap;
  margin-top: 34px;
}

/* Shared heading styles */
.heading,
.section-title,
.hero-title,
.service-name,
.cta-title {
  font-family: 'Young Serif', serif;
  font-weight: 400;
}
.section-title {
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.15;
  margin: 0 0 28px;
}
.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  margin-bottom: 36px;
}
.section-head .section-title { margin: 0; }
.heading { font-size: 30px; margin: 0; }

/* A hand-drawn squiggle under centred titles. The squiggle is a
   tiny drawing (SVG) used as a stencil, so it always takes on the
   accent color — in light and dark mode. */
.section-head .section-title::after,
.section-title.center::after {
  content: '';
  display: block;
  width: 140px;
  height: 12px;
  margin: 12px auto 0;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 12'><path d='M4 8 C16 2 28 10 40 6 C52 2 64 10 76 6 C88 2 100 10 112 6 C122 3 132 7 136 6' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/></svg>") center / 140px 12px no-repeat;
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 12'><path d='M4 8 C16 2 28 10 40 6 C52 2 64 10 76 6 C88 2 100 10 112 6 C122 3 132 7 136 6' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/></svg>") center / 140px 12px no-repeat;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: inherit;
  text-decoration: none;
  font-weight: 800;
  font-size: 16px;
  padding: 14px 28px;
  border-radius: 999px;
  cursor: pointer;
  border: 1.5px solid transparent;
}
.btn-primary {
  background: var(--accent);
  color: #FFFFFF;
  box-shadow: 0 3px 12px rgba(192, 38, 108, 0.30);
}
.btn-primary:hover { background: var(--accent-hover); }

/* Outlined buttons for the quieter actions */
.btn-secondary,
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--border-strong);
  font-weight: 700;
}
.btn-secondary:hover,
.btn-ghost:hover {
  border-color: var(--text);
  background: color-mix(in srgb, var(--text) 5%, transparent);
}

/* Underlined text links, e.g. "More about me →" */
.text-link {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  font-weight: 700;
}
.text-link:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* ============ 1. NAVIGATION ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.nav {
  max-width: 1140px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
/* The brand: "Sugar" in the serif font, "by Lelia" handwritten */
.brand {
  font-family: 'Young Serif', serif;
  font-size: 21px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.brand .brand-script {
  font-size: 23px;
  color: var(--script);
  margin-left: 2px;
}
.nav-links {
  display: flex;
  flex: 1;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}
.nav-link {
  color: var(--text);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
}
.nav-link:hover { color: var(--accent); }

/* The "Order" link is a little filled pill so it stands out from the other menu links */
.nav-link.nav-link-order {
  background: var(--accent);
  color: #FFFFFF;
  padding: 8px 18px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(192, 38, 108, 0.28);
}
.nav-link.nav-link-order:hover { background: var(--accent-hover); color: #FFFFFF; }
.nav-link.nav-link-order[aria-current="page"] { background: var(--accent-hover); color: #FFFFFF; }

/* Hamburger button — hidden on desktop, shown on phones */
.hamburger {
  display: none;
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 18px;
  color: var(--text);
  cursor: pointer;
  min-width: 48px;
  min-height: 44px;
}

/* The light/dark switch: a little pill with a sliding moon/sun knob */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.theme-toggle {
  position: relative;
  width: 48px;
  height: 26px;
  flex: none;
  border: none;
  border-radius: 999px;
  background: var(--border);   /* the track */
  cursor: pointer;
  padding: 0;
}
.theme-toggle::before {        /* the sliding knob (light is the default: moon, left) */
  content: '🌙';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--toggle-knob);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  transition: left 0.2s ease;
}
.theme-toggle:hover { background: var(--border-strong); }
.theme-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* In dark mode the knob slides right and shows the sun.
   (Same two-block pattern as the colors above — keep them identical.) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle::before { content: '☀️'; left: 25px; }
}
:root[data-theme="dark"] .theme-toggle::before { content: '☀️'; left: 25px; }

/* Mobile dropdown — hidden until opened (and only on phones) */
.mobile-menu { display: none; }
.mobile-menu-link {
  padding: 13px 24px;
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  border-bottom: 1px solid var(--border);
}
/* In the phone menu, "Order" gets the same filled-button treatment */
.mobile-menu-link.mobile-menu-link-order {
  margin: 12px 24px;
  padding: 12px 24px;
  background: var(--accent);
  color: #FFFFFF;
  text-align: center;
  border-radius: 999px;
  border-bottom: none;
  box-shadow: 0 2px 8px rgba(192, 38, 108, 0.28);
}
.mobile-menu-link.mobile-menu-link-order:hover { background: var(--accent-hover); }
.mobile-menu-link.mobile-menu-link-order[aria-current="page"] { background: var(--accent-hover); color: #FFFFFF; }

/* Switch to the phone-style menu when the window is under 1000px —
   below that, the full row of menu links doesn't fit on one line. */
@media (max-width: 999px) {
  .nav-links { display: none; }
  .hamburger { display: inline-flex; align-items: center; justify-content: center; }
  .mobile-menu.is-open {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border);
    background: var(--cream);
    padding: 8px 0;
  }
}

/* ============ 2. HERO ============ */
/* Phones: one column, so the blocks stack in page order (heading, photo, text). */
.hero {
  max-width: 1140px;
  margin: 0 auto;
  /* A touch less on phones (40px top, 48px bottom) so the hero sits in
     the same spacing rhythm as the sections below it */
  padding: clamp(40px, 6vw, 48px) 20px clamp(48px, 8vw, 64px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: center;
}
/* Wide screens: heading and text on the left, photo on the right. */
@media (min-width: 860px) {
  .hero {
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-areas:
      "head photo"
      "text photo";
    column-gap: 56px;
    padding-top: 64px;
  }
  .hero-head { grid-area: head; align-self: end; }
  .hero-text { grid-area: text; align-self: start; }
  .hero-frame { grid-area: photo; }
}
.hero-head,
.hero-text {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;   /* let this column shrink so long lines wrap instead of overflowing */
}
/* The big two-part title: "Sugar" printed, "by Lelia" handwritten */
.hero-title {
  font-size: clamp(48px, 9vw, 88px);
  line-height: 0.95;
  margin: 0;
}
.hero-title-sub {
  display: block;
  width: max-content;
  max-width: 100%;
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 0.74em;
  color: var(--script);
  margin: -0.06em 0 0 1.1em;   /* nudge it under and to the right of "Sugar" */
  transform: rotate(-2deg);
}
/* The little tagline under the big heading */
.badge {
  align-self: flex-start;
  max-width: 100%;
  color: var(--text-muted);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.5;
  margin-top: -4px;           /* hug the heading above it */
}
@media (max-width: 600px) {
  .badge { font-size: 15px; }
}
.hero-lead {
  font-size: clamp(16px, 2.5vw, 18px);
  line-height: 1.65;
  color: var(--text-soft);
  margin: 0;
  max-width: 46ch;
}
.button-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 6px;
}
/* The little "Serving Covington..." line under the buttons */
.hero-note {
  margin-top: -8px;
}

/* ---------- Tilted photos ---------- */
/* .photo-frame is a little wrapper around a photo. It tilts the photo
   ever so slightly, like a snapshot laid on a page. (It used to add two
   strips of pink "tape" as well — removed by request. The note cards in
   "Kind words" still have their tape; that lives at .quote::before.) */
.photo-frame { position: relative; }

/* The big photo of me on the homepage */
.hero-frame {
  width: min(100%, 450px);
  justify-self: center;
  margin-top: 16px;              /* headroom for the "that's me!" doodle */
  transform: rotate(1.6deg);
}
img.hero-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 22px;
  box-shadow: 0 18px 44px rgba(74, 43, 51, 0.18), 0 4px 12px rgba(74, 43, 51, 0.10);
}
/* The handwritten "that's me!" note with its curly arrow */
.hero-doodle {
  position: absolute;
  top: -34px;
  left: -14px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  color: var(--script);
  transform: rotate(-7deg);
  pointer-events: none;
}
.hero-doodle svg { margin: 2px 0 0 26px; }
@media (max-width: 600px) {
  .hero-doodle { left: 2px; font-size: 23px; }
}

/* ---------- Photo placeholders ---------- */
/* These dashed boxes show where real photos will go. When you have a
   photo, replace the whole box with, e.g.:  <img src="images/cake.jpg" alt="Rainbow cake"> */
.photo-placeholder {
  background: var(--placeholder-bg);
  border: 2px dashed var(--placeholder-line);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}
.photo-placeholder span {
  color: var(--placeholder-text);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.05em;
}

/* ============ 3. WELCOME ============ */
.welcome { background: var(--blush); }
.welcome-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 64px) 20px;
  display: flex;
  gap: 36px;
  align-items: center;
  flex-wrap: wrap;
}
/* A small tilted snapshot of me */
img.welcome-photo {
  flex: 0 0 210px;
  width: 210px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 20%;
  border-radius: 18px;
  border: 4px solid var(--card);   /* the little printed-photo frame, same as the menu thumbnails */
  transform: rotate(-2deg);
  box-shadow: 0 12px 30px rgba(74, 43, 51, 0.16);
}
.photo-placeholder.welcome-photo { flex: 0 0 210px; width: 210px; aspect-ratio: 4 / 5; border-radius: 18px; padding: 12px; }
.welcome-photo span { font-size: 12px; }
.welcome-text {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.welcome-text .muted { color: var(--text-soft); font-size: 17px; }
.welcome-text .text-link { align-self: flex-start; }

/* ============ 4. FEATURED CAKES ============ */
.featured-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px 26px;
}
/* The featured tiles arrange themselves so there's never a lonely
   leftover photo: one row of four on desktop, two per row below that */
.cake {
  margin: 0;
  flex: 1 1 240px;
  max-width: 262px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cake-photo {
  border-radius: 16px;
  aspect-ratio: 1 / 1;
}
.photo-placeholder.cake-photo { padding: 16px; }
.cake-photo span { font-size: 13px; }
/* Real cake photo tiles: fill the square neatly, cropping to fit */
img.cake-photo {
  width: 100%;
  object-fit: cover;
  box-shadow: 0 6px 18px rgba(74, 43, 51, 0.10);
}
/* Handwritten captions, each tilted a tiny bit differently */
.cake-caption,
.gallery-caption {
  font-family: 'Caveat', cursive;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  color: var(--text-muted);
  text-align: left;
  padding-left: 6px;
}
.cake:nth-child(odd) .cake-caption { transform: rotate(-1deg); }
.cake:nth-child(even) .cake-caption { transform: rotate(0.7deg); }
/* Below desktop width, four across won't fit — go to two per row
   (a tidy 2×2 with four featured treats), capping the tile size so a
   pair never looks oversized on tablets */
@media (max-width: 1139px) {
  .cake { flex-basis: calc(50% - 13px); max-width: 420px; }
}
/* On phones: tighter gaps between the tiles */
@media (max-width: 600px) {
  .featured-grid { gap: 20px 14px; }
  .cake { flex-basis: calc(50% - 7px); }
}
@media (max-width: 639px) {
  .cake-caption,
  .gallery-caption { font-size: 19px; }
}

/* ============ 5. WHAT I MAKE ============ */
/* NEW: now a blush band, so Featured (cream) and this section
   no longer blur together. */
.what-i-make { background: var(--blush); }
/* ("What I make" sits right on the cream page background — the white
   cards with their borders do the separating, like in the design.) */
/* Tiny UPPERCASE label that sits above a title */
.eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--eyebrow);
  margin-bottom: 8px;
}
/* (On the homepage, "What I make" borrows the .why-inner split layout
   and .trust-grid rows from the "Why order from me?" section below.)
   The white cards below are still used by the About page:
   stacked on phones, 2×2 on medium screens, 4 across on wide. */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
@media (min-width: 620px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;   /* every card the same height */
  }
  /* With an odd number of cards, stretch the leftover last card
     across the full row so it doesn't sit alone in a corner */
  .services-grid > .service-card:nth-child(odd):last-child { grid-column: 1 / -1; }
}
@media (min-width: 1030px) {
  .services-grid { grid-template-columns: repeat(4, 1fr); }
}
.service-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 4px 14px rgba(74, 43, 51, 0.06);
}
.service-name { font-size: 21px; margin: 0; }
.service-card .muted { font-size: 15.5px; }
/* The little hand-drawn picture at the top of each fact card (About page).
   It borrows the text color, so it adjusts to dark mode on its own. */
.service-icon {
  width: 44px;
  height: 44px;
  color: var(--text);
  margin-bottom: 2px;
}
.service-icon svg { width: 100%; height: 100%; }
/* When an eyebrow label sits inside a centred section head, the head's
   own spacing is enough — drop the label's extra gap */
.section-head .eyebrow { margin-bottom: 0; }

/* ============ 6. WHY ORDER FROM ME ============ */
/* A soft pink band: intro text on the left, and a 2×2 grid of
   benefits on the right (everything stacks on phones). */
.why { background: transparent; }  /* CHANGED: was blush — now rests on the cream page */
.why-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media (min-width: 900px) {
  .why-inner {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 64px;
  }
}
.why-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.why-intro .section-title { margin: 0 0 12px; }
.why-intro p {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-soft);
  max-width: 40ch;
}
/* The little doodle + handwritten note that fills the space under
   the intro in the two split sections. The drawing borrows the text
   color, so it adjusts to light/dark mode on its own. */
.why-doodle {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
  color: var(--text);
  transform: rotate(-2deg);
}
.why-doodle svg { flex: none; }
.why-doodle p {
  margin: 0;
  font-family: 'Caveat', cursive;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  color: var(--script);
  max-width: 240px;
}
.trust-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px 36px;
}
@media (min-width: 620px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Each benefit: hand-drawn picture on the left, words on the right.
   The pictures use the text color, so they adjust to light/dark
   mode on their own (pink accents are set right on the drawing). */
.trust-point {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.trust-icon {
  width: 44px;
  height: 44px;
  flex: none;
  color: var(--text);
}
.trust-icon svg { width: 100%; height: 100%; }
.trust-text { display: flex; flex-direction: column; gap: 3px; }
.trust-point strong { font-size: 16.5px; }
.trust-point span { font-size: 15px; line-height: 1.55; }

/* ============ 7. KIND WORDS ============ */
/* CHANGED: now a blush band — the white taped note cards still pop. */
.kind-words { background: var(--blush); }
/* ("Kind words" sits on the cream background — the white taped note
   cards pop on their own, like in the design.) */
/* A "masonry" layout: each review card keeps its own natural height,
   and the cards stack into up-to-3 columns like notes pinned to a
   corkboard — no stretching to match the tallest card. */
.quotes-grid {
  columns: 3 250px;   /* up to 3 columns, each at least 250px wide */
  column-gap: 28px;
}
/* Centered note cards: used on the homepage always, and on the Reviews
   page when there are only a few reviews (script.js adds the class for
   3 cards or less) — so two cards look just as balanced as three. With
   more reviews, the corkboard columns above take over. */
.kind-words .quotes-grid,
.quotes-grid--centered {
  columns: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 28px;
}
/* 340px so three cards still fit side by side in the 1100px column */
.kind-words .quote,
.quotes-grid--centered .quote { flex: 0 1 340px; margin: 0; }
/* The "email me your review" invitation under the review cards —
   a bit bigger than small print, with the site's underlined-link look
   in the accent color so it invites a click */
.review-invite {
  margin: 38px auto 0;
  max-width: 620px;
  text-align: center;
  font-size: 18px;
  color: var(--text-soft);
}
.review-invite a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.review-invite a:hover { text-decoration-color: var(--accent); }
/* Each review looks like a little taped-up note card, and every
   card leans a slightly different way — like notes on a corkboard. */
.quote {
  position: relative;
  margin: 0 0 28px;        /* the space below each card in its stack */
  break-inside: avoid;     /* never split one card across two columns */
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 34px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 8px 22px rgba(74, 43, 51, 0.08);
}
/* The tape strip on top of each card. It sits in the card's normal
   content flow and is pulled upward, so it pokes out over the top
   edge. (Don't use position: absolute here — that mis-paints inside
   the column layout above.) */
.quote::before {
  content: '';
  align-self: center;
  flex: none;
  width: 88px;
  height: 24px;
  margin: -46px 0 -12px;   /* pull it up over the card's top edge */
  background: var(--tape);
  border-radius: 2px;
  transform: rotate(-2deg);
  pointer-events: none;
}
.quote:nth-child(3n+1) { transform: rotate(-1.2deg); }
.quote:nth-child(3n+2) { transform: rotate(0.8deg); }
.quote:nth-child(3n+2)::before { transform: rotate(2deg); }
.quote:nth-child(3n) { transform: rotate(-0.6deg); }
/* The review itself — the same handwriting as the photo captions,
   with roomy line spacing so it stays easy to read */
.quote p {
  margin: 0;
  font-family: 'Caveat', cursive;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.5;
  color: var(--text);
}
.quote blockquote { margin: 0; }
.quote figcaption {
  margin-top: auto;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--eyebrow);
}

/* ============ 8. MY BAKING JOURNEY ============ */
/* A compact pink band with the journey story. The mixer doodle and
   its handwritten note sit in one small row underneath, above a
   dashed divider — a wink, not a whole section. */
.journey-band { background: transparent; }  /* CHANGED: was blush — now rests on the cream page */
.journey-story {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  max-width: 760px;
}
.journey-story .section-title { margin: 0; }
.journey-story .lead {
  margin: 0 0 8px;
  font-size: 17px;
  color: var(--text-soft);
  max-width: 50ch;
}
/* The words of the story (label, title, intro, button) stay grouped */
.journey-story-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
/* Lelia today, next to the story — only on wide screens; on phones the
   photo is hidden so this section stays short and snappy */
.journey-story-photo {
  display: none;
  width: min(100%, 300px);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(74, 43, 51, 0.12);
  transform: rotate(1.4deg);
}
/* Wide screens: words on the left, photo on the right, and the mixer
   teaser strip spanning the full width underneath */
@media (min-width: 860px) {
  .journey-story {
    /* Widen past the 760px story column, but keep the same 1140px cap
       as every other section so widescreen monitors don't stretch the
       words and photo to opposite edges of the screen */
    max-width: 1140px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 26px 48px;
  }
  .journey-story-text { flex: 1 1 380px; max-width: 640px; }
  .journey-story-photo {
    display: block;
    /* Fluid width, like the timeline photos: scales with the row */
    flex: 0 0 clamp(240px, 30%, 320px);
    width: clamp(240px, 30%, 320px);
  }
  .team-teaser { flex-basis: 100%; }
}
.team-teaser {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-self: stretch;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dashed var(--border-strong);
  color: var(--text);   /* the mixer drawing borrows this color */
}
.team-teaser svg { flex: none; }
.equipment-line {
  margin: 0;
  font-family: 'Caveat', cursive;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  color: var(--text-muted);
}

/* ============ 10. CALL TO ACTION ============ */
/* This band stays dark and cozy in both light and dark mode. */
.cta { background: var(--cta-bg); color: #FFF3E9; }
.cta-inner {
  max-width: 800px;
  margin: 0 auto;
  /* Slightly roomier than a normal section (it's the big closing moment),
     but scaled down on phones so it doesn't tower over the other bands */
  padding: clamp(52px, 9vw, 84px) 20px clamp(56px, 9vw, 88px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
/* A little scatter of sprinkles above the heading */
.cta-inner::before {
  content: '';
  width: 200px;
  height: 40px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40'><g stroke-width='4' stroke-linecap='round' fill='none'><path d='M14 26 L23 19' stroke='%23F3C6D8'/><path d='M40 14 L51 17' stroke='%23E0679C'/><path d='M66 28 L74 19' stroke='%23FFF3E9'/><path d='M92 15 L102 21' stroke='%23F3C6D8'/><path d='M118 27 L127 19' stroke='%23E0679C'/><path d='M144 14 L154 18' stroke='%23FFF3E9'/><path d='M170 27 L178 18' stroke='%23F3C6D8'/></g></svg>") center / contain no-repeat;
}
.cta-title { font-size: clamp(30px, 5vw, 46px); margin: 0; color: #FFF3E9; }
.cta-text { margin: 0; color: #E8C9D4; font-size: 17px; }
.cta-btn {
  background: #C9296F;
  color: #FFFFFF;
  font-size: 17px;
  padding: 15px 34px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.cta-btn:hover { background: #E0407F; }
/* A quieter, outlined partner button for the dark CTA band */
.cta .button-row { justify-content: center; margin-top: 0; }
.cta-btn-ghost {
  background: transparent;
  color: #FFF3E9;
  border-color: rgba(255, 243, 233, 0.55);
  font-size: 17px;
  padding: 15px 34px;
}
.cta-btn-ghost:hover { background: rgba(255, 243, 233, 0.10); border-color: #FFF3E9; }
.cta-email { margin: 6px 0 0; color: #C9A2AF; font-size: 15px; }
.cta-email a { color: #F3C6D8; font-weight: 700; }
.cta-email a:hover { color: #FFFFFF; }

/* ============ 11. FOOTER ============ */
.site-footer {
  background: var(--footer-bg);
  color: #B08894;
  border-top: 1px solid rgba(255, 243, 233, 0.12);
}
.footer-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 36px 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;      /* small — each link carries its own padding below */
  justify-content: center;
}
/* Each link gets padding all around, so the spot you can tap is a
   comfortable finger-sized target (~44px tall) instead of bare text. */
.footer-links a {
  color: #D9B8C2;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 8px;
}
.footer-links a:hover { color: #FFFFFF; }
.footer-meta {
  text-align: center;
  font-size: 13.5px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.footer-meta a { color: #D9B8C2; }
.footer-meta a:hover { color: #FFFFFF; }

/* ============ GALLERY PAGE (see all my cakes) ============ */
.gallery-intro {
  max-width: 640px;
  margin: 0 auto;
}
/* Two photos across on phones; from tablets up, as many 250px-or-wider
   columns as fit — which tops out at a comfortable 4 across on desktop,
   so the photos never shrink into tiny tiles */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 14px;
}
@media (min-width: 640px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 30px 26px;
  }
}
.gallery-item {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gallery-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(74, 43, 51, 0.10);
}

/* ---------- Tappable photos ---------- */
/* script.js marks every photo it wires to the pop-up viewer — the
   gallery grid AND the homepage "Treats I've made" tiles — with the
   "is-zoomable" class. All the tap/hover feedback hangs off that. */
.is-zoomable img {
  cursor: zoom-in;   /* hints that you can click to enlarge */
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.is-zoomable img:hover {
  transform: translateY(-3px) rotate(-0.5deg);
  box-shadow: 0 10px 24px rgba(74, 43, 51, 0.18);
}
.is-zoomable img:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
/* Pressing (or clicking) a photo squishes it down a touch — instant
   "yes, that did something" feedback, especially on phones. */
.is-zoomable img:active {
  transform: scale(0.96);
  box-shadow: 0 3px 10px rgba(74, 43, 51, 0.12);
}
/* A little magnifier badge in the corner of each photo, so it's
   clear the photos open up bigger. On phones and tablets (no mouse,
   so no hover) it's always shown; on computers it appears on hover. */
.is-zoomable {
  position: relative;   /* the badge below is placed relative to this */
}
.is-zoomable::after {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(58, 33, 41, 0.60) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='10.5' cy='10.5' r='5.5' fill='none' stroke='%23FFF3E9' stroke-width='2'/><path d='M15 15 L19.5 19.5' stroke='%23FFF3E9' stroke-width='2' stroke-linecap='round'/><path d='M10.5 8.2 L10.5 12.8 M8.2 10.5 L12.8 10.5' stroke='%23FFF3E9' stroke-width='1.8' stroke-linecap='round'/></svg>") center / 18px 18px no-repeat;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  pointer-events: none;   /* taps pass straight through to the photo */
  opacity: 0;
  transition: opacity 0.15s ease;
}
@media (hover: hover) {
  .is-zoomable:hover::after,
  .is-zoomable:focus-within::after { opacity: 1; }
}
@media (hover: none) {
  .is-zoomable::after { opacity: 1; }
}
/* (Gallery captions share the handwritten style set with .cake-caption above.) */
.gallery-item:nth-child(odd) .gallery-caption { transform: rotate(-1deg); }
.gallery-item:nth-child(even) .gallery-caption { transform: rotate(0.7deg); }

/* ---------- Pop-up photo viewer (lightbox) ---------- */
.lightbox {
  display: none;                 /* hidden until a cake is clicked */
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(58, 33, 41, 0.93);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
}
.lightbox.is-open { display: flex; }
.lightbox-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.lightbox-img {
  max-width: min(92vw, 900px);
  max-height: 82vh;
  width: auto;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.lightbox-caption {
  color: #FFF3E9;
  font-family: 'Caveat', cursive;
  font-weight: 600;
  font-size: 24px;
  text-align: center;
}
.lightbox-close {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 243, 233, 0.15);
  color: #FFF3E9;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.lightbox-close:hover { background: rgba(255, 243, 233, 0.32); }
/* Left/right arrows for flipping through the photos */
.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 243, 233, 0.15);
  color: #FFF3E9;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}
.lightbox-arrow:hover { background: rgba(255, 243, 233, 0.32); }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }

/* ============================================================
   SHARED BITS FOR THE INNER PAGES
   (about, menu, order, reviews, faq, journey, equipment)
   ============================================================ */

/* ------------------------------------------------------------
   UPDATE — section rhythm (option 1b: bolder alternating bands)
   - Strict cream/blush alternation down the homepage:
     welcome → blush, featured → cream, what-i-make → blush,
     why → cream, kind words → blush, journey → cream.
   - Light blush deepened (#FAEBF0 → #F8E2EB) so bands read.
   - Dark bands lifted (#2C1A23 → #36202C, ≈1.4:1 vs the page);
     dark cards/borders lifted to match; CTA warmed (#5C3644)
     and footer darkened (#1A0D12) so the page ends in steps
     instead of one dark mass.
   ------------------------------------------------------------ */

/* Highlight the link for the page you're currently on */
.nav-link[aria-current="page"] { color: var(--accent); }
.mobile-menu-link[aria-current="page"] { color: var(--accent); }

/* A comfortable column of text */
.prose { max-width: 680px; margin: 0 auto; }
.prose p { color: var(--text-soft); font-size: 17px; line-height: 1.7; }
.lead-text { font-size: 18px; color: var(--text-soft); }

/* Little note used to flag things you still need to fill in */
.placeholder-note {
  background: #FFF7E8;
  border: 1px dashed #E4C58A;
  border-radius: 12px;
  padding: 12px 16px;
  color: #8A6D3B;
  font-size: 14px;
}

/* Two-column split (photo + text), stacks on phones */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 44px;
  align-items: center;
}
/* The tilted, taped photo on the About page */
.about-frame {
  transform: rotate(-1.4deg);
  max-width: 420px;
  justify-self: center;
  width: 100%;
}
img.about-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 18%;
  border-radius: 22px;
  box-shadow: 0 16px 40px rgba(74, 43, 51, 0.16);
}

/* ---------- Menu & prices ---------- */
.menu-list { max-width: 760px; margin: 0 auto; }
.menu-group { margin-bottom: 44px; }
.menu-group-title {
  font-family: 'Young Serif', serif;
  font-weight: 400;
  font-size: 26px;
  margin: 0 0 4px;
}
.menu-group-note { margin: 0 0 14px; color: var(--text-muted); font-size: 15px; }
/* A small taped-photo thumbnail next to a menu category title (photos come from the gallery) */
.menu-group-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
.menu-group-head .menu-group-note { margin-bottom: 0; }
.menu-group-photo {
  width: 76px;
  height: 76px;
  flex: none;
  object-fit: cover;        /* fill the square by cropping, never by stretching */
  object-position: center;  /* crop evenly around the middle of the photo */
  border-radius: 12px;
  border: 3px solid var(--card);
  box-shadow: 0 2px 8px rgba(74, 43, 51, 0.20);
  transform: rotate(-2deg);
}
/* On wider screens there's room for a bigger photo */
@media (min-width: 768px) {
  .menu-group-photo { width: 110px; height: 110px; }
}
/* Every other photo tilts the opposite way, like photos taped in an album */
.menu-group:nth-child(even) .menu-group-photo { transform: rotate(2deg); }
.menu-item {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--border-strong);
  align-items: baseline;
}
.menu-item-name { font-weight: 700; }
.menu-item-desc { color: var(--text-muted); font-size: 14.5px; margin: 2px 0 0; }
.menu-price { font-weight: 800; color: var(--accent); white-space: nowrap; }

/* ---------- Order form ---------- */
.form {
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-weight: 700; font-size: 15px; }
.form-field input,
.form-field select,
.form-field textarea {
  font-family: inherit;
  font-size: 16px;
  padding: 12px 14px;
  border: 1.5px solid var(--border-strong);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.form-field textarea { resize: vertical; min-height: 120px; }
/* When a required field is left empty and the form is submitted, the
   page scrolls to that field and shows a note. This keeps the field
   (and its label) clear of the sticky menu bar, so the note isn't
   half-hidden behind it. */
.form-field input,
.form-field select,
.form-field textarea {
  scroll-margin-top: 110px;
}
/* A required field that was left empty: red outline plus a short note
   underneath. (script.js adds these itself, because iPhones don't
   show the browser's own "please fill out this field" message.) */
.form-field .field-error,
.form-field .field-error:focus {
  border-color: var(--danger);
}
.field-error-note {
  margin: 0;
  color: var(--danger);
  font-size: 14px;
  font-weight: 700;
}
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.form .btn { align-self: flex-start; border: none; }
.form-note { margin: 0; color: var(--text-muted); font-size: 15px; }

/* ---------- FAQ (open/close questions) ---------- */
.faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq details {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 2px 20px;
  box-shadow: 0 4px 14px rgba(74, 43, 51, 0.05);
}
.faq summary {
  cursor: pointer;
  font-weight: 800;
  font-size: 17px;
  padding: 16px 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  color: var(--accent);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}
.faq details[open] summary::after { content: '\2013'; }
.faq details > p { margin: 0 0 16px; color: var(--text-muted); }

/* ---------- Journey timeline ---------- */
.timeline {
  max-width: 720px;
  margin: 0 auto;
  padding-left: 30px;
  border-left: 3px solid var(--border-strong);
  display: flex;
  flex-direction: column;
  gap: 34px;
}
.timeline-item { position: relative; }
.timeline-item::before {
  content: '';
  position: absolute;
  left: -39px;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--cream);
}
.timeline-year {
  font-weight: 800;
  color: var(--eyebrow);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.timeline-item h2 {
  font-family: 'Young Serif', serif;
  font-weight: 400;
  font-size: 23px;
  margin: 4px 0 8px;
}
.timeline-item p { margin: 0; color: var(--text-muted); }
/* A snapshot with each timeline story — tilted a touch, like the gallery
   captions. On phones it sits below the words; see the wide-screen rules
   underneath for the side-by-side layout. */
.timeline-photo {
  width: min(100%, 280px);
  border-radius: 16px;
  border: 4px solid var(--card);   /* the little printed-photo frame, same as the menu thumbnails */
  margin-top: 16px;
  box-shadow: 0 6px 18px rgba(74, 43, 51, 0.12);
  transform: rotate(-1.2deg);
}
.timeline-item:nth-child(even) .timeline-photo {
  transform: rotate(1.2deg);
  margin-left: auto;      /* every other photo slides to the right side */
}
/* Wide screens: words fill one side, photo fills the other, and they swap
   sides on every entry — so each row reads full and balanced. */
@media (min-width: 860px) {
  .timeline { max-width: 920px; }
  .timeline-item {
    display: flex;
    align-items: center;
    gap: 38px;
  }
  /* Center the pink dot on the row, level with the words beside it */
  .timeline-item::before { top: calc(50% - 8px); }
  .timeline-text { flex: 1; }
  .timeline-photo {
    /* Fluid width: ~36% of the row, never smaller than 260px or bigger
       than 330px — so there's no size jump right at the breakpoint */
    flex: 0 0 clamp(260px, 36%, 330px);
    width: clamp(260px, 36%, 330px);
    margin: 0;            /* the flex row handles the placement now */
  }
  /* Every other entry flips: photo on the left, words on the right */
  .timeline-item:nth-child(even) { flex-direction: row-reverse; }
}

/* ---------- Meet my equipment (team cards) ---------- */
/* Same balanced pattern again: 1, 2×2, or 4 across, equal heights */
.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 620px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
  }
}
@media (min-width: 1030px) {
  .team-grid { grid-template-columns: repeat(4, 1fr); }
}
.team-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 14px rgba(74, 43, 51, 0.06);
}
/* Little snapshots of the team, each tilted its own way */
.team-photo {
  width: 140px;
  height: 140px;
  border-radius: 16px;
}
.photo-placeholder.team-photo { padding: 10px; }
.team-photo span { font-size: 12px; }
img.team-photo {
  object-fit: cover;
  box-shadow: 0 6px 16px rgba(74, 43, 51, 0.14);
}
.team-card:nth-child(odd) img.team-photo { transform: rotate(-2deg); }
.team-card:nth-child(even) img.team-photo { transform: rotate(2deg); }
.team-name { font-family: 'Young Serif', serif; font-weight: 400; font-size: 21px; margin: 0; }
.team-role {
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--eyebrow);
}
.team-card p { margin: 0; color: var(--text-muted); font-size: 15px; }

/* ---------- Order form: the little * on must-fill fields ---------- */
.req { color: var(--accent); font-weight: 800; }
.form-required-note { margin-top: 6px; }

/* ---------- Order form: the "one more step" note after sending ---------- */
.form-sent {
  max-width: 620px;
  margin: 24px auto 0;
  background: var(--blush);
  border: 1.5px solid var(--border-strong);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.form-sent[hidden] { display: none; }
.form-sent:focus { outline: none; }   /* it's focused for screen readers; no ring needed */
.form-sent p { margin: 0; }
.form-sent-copy {
  font-family: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border: 1.5px solid var(--border-strong);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  resize: vertical;
}
.form-sent-actions { display: flex; align-items: center; gap: 12px; }
.form-sent-actions .btn { border: none; }
.form-sent-copied { color: var(--accent); font-weight: 800; }

/* ---------- "Skip to main content" link for keyboard users ---------- */
/* Sits off-screen until someone tabs to it, then drops into view. */
.skip-link {
  position: fixed;
  left: 14px;
  top: 12px;
  z-index: 200;                 /* above everything, even the photo pop-up */
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(74, 43, 51, 0.3);
  transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }

/* ---------- "Back to top" button ---------- */
/* A little round button that fades in at the bottom-right corner once
   you've scrolled down a long page, and glides you back to the top. */
.to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 90;                   /* above the page, below the photo pop-up */
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(74, 43, 51, 0.3);
  opacity: 0;                    /* starts invisible... */
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.to-top.is-visible {             /* ...and fades in after you scroll down */
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* The little hover lift only applies on devices with a mouse — on touch
   screens a hover effect would swallow the first tap (tap once to "hover",
   tap again to click), so phones skip it and taps work first time. */
@media (hover: hover) {
  .to-top:hover { transform: translateY(-2px); }
}
.to-top { touch-action: manipulation; }   /* also skips the double-tap-zoom pause */
.to-top:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }