/* ============================================================
   Sugar by Lelia — site styles
   ------------------------------------------------------------
   Colors are set once here so they are easy to change.
   The "accent" color is the main brand color used on buttons
   and links. To try a different one, just change --accent below.
   Some nice options: #B23A5C (raspberry, current), #C4682E
   (warm orange), #6B4226 (chocolate), #7E8A5A (sage green).

   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.
   ============================================================ */

:root {
  color-scheme: light;
  --accent: #B23A5C;          /* main brand color */
  --cream: #FBF6EE;           /* page background */
  --text: #3B2A1E;            /* dark brown text */
  --text-muted: #6B5442;      /* softer brown for paragraphs */
  --card: #FFFFFF;            /* white cards and panels */
  --peach: #F6E9DA;           /* warm section background */
  --border: #EADFCE;          /* light borders */
  --placeholder-bg: #E7E0D5;  /* photo placeholder fill */
  --placeholder-line: #C9BEAC;/* photo placeholder dashed border */
  --placeholder-text: #8A7C68;/* photo placeholder label */
  --badge-bg: #F6E3D0;        /* pill behind the tagline + icon circles */
  --badge-text: #9E4F1D;
  --header-bg: rgba(251, 246, 238, 0.95);  /* see-through menu bar */
  --cta-bg: #3B2A1E;          /* dark "order now" band (dark in both themes) */
  --footer-bg: #2C1F16;       /* footer band (dark in both themes) */
}

/* ---------- Dark theme colors ----------
   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: #D4547B;
    --cream: #201811;
    --text: #F3EADF;
    --text-muted: #C4B2A0;
    --card: #2C221A;
    --peach: #292019;
    --border: #423428;
    --placeholder-bg: #2C221A;
    --placeholder-line: #55432F;
    --placeholder-text: #A28D77;
    --badge-bg: #43301F;
    --badge-text: #EFAF7A;
    --header-bg: rgba(32, 24, 17, 0.95);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --accent: #D4547B;
  --cream: #201811;
  --text: #F3EADF;
  --text-muted: #C4B2A0;
  --card: #2C221A;
  --peach: #292019;
  --border: #423428;
  --placeholder-bg: #2C221A;
  --placeholder-line: #55432F;
  --placeholder-text: #A28D77;
  --badge-bg: #43301F;
  --badge-text: #EFAF7A;
  --header-bg: rgba(32, 24, 17, 0.95);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: 'Nunito', sans-serif;
  line-height: 1.6;
}

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

/* A centred column of a comfortable reading width, used by most sections */
.section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 20px;
}
.section-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 20px;
}
.center-row {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

/* 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(26px, 4vw, 34px);
  margin: 0 0 28px;
}
.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  margin-bottom: 28px;
}
.section-head .section-title { margin: 0; }
.heading { font-size: 28px; margin: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  text-decoration: none;
  font-weight: 800;
  font-size: 16px;
  padding: 14px 26px;
  border-radius: 999px;
  cursor: pointer;
  border: 2px solid transparent;
}
.btn-primary {
  background: var(--accent);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(178, 58, 92, 0.30);
}
.btn-primary:hover { filter: brightness(0.93); }

.btn-secondary {
  background: var(--card);
  color: var(--text);
  border: 2px solid var(--border);
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

.btn-ghost {
  background: var(--card);
  color: var(--text);
  border: 2px solid var(--border);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* Underlined text links, e.g. "More about me →" */
.text-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 800;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
}

/* ============ 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: 1100px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  font-family: 'Young Serif', serif;
  font-size: 20px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.nav-links {
  display: flex;
  flex: 1;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.nav-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
}
.nav-link:hover { color: var(--accent); }

/* Hamburger button — hidden on desktop, shown on phones */
.hamburger {
  display: none;
  background: none;
  border: 1px solid var(--border);
  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: 58px;
  height: 30px;
  flex: none;
  border: none;
  border-radius: 999px;
  background: var(--border);   /* the track */
  cursor: pointer;
  padding: 0;
}
.theme-toggle::before {        /* the sliding knob */
  content: '🌙';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  transition: left 0.2s ease;
}
.theme-toggle:hover { background: var(--placeholder-line); }
.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: 31px; }
}
:root[data-theme="dark"] .theme-toggle::before { content: '☀️'; left: 31px; }

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

/* Switch to the phone layout on narrow screens */
@media (max-width: 859px) {
  .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 ============ */
.hero {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 20px 56px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 36px;
  align-items: center;
}
.hero-text {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;   /* let this column shrink so long lines wrap instead of overflowing */
}
.badge {
  align-self: flex-start;
  max-width: 100%;            /* wrap instead of overflowing on small screens */
  background: var(--badge-bg);
  color: var(--badge-text);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 999px;
}
.hero-title {
  font-size: clamp(34px, 6vw, 54px);
  line-height: 1.1;
  margin: 0;
}
.hero-title-sub {
  display: block;
  font-size: 0.6em;
  color: var(--text-muted);
}
.hero-lead {
  font-size: clamp(17px, 2.5vw, 20px);
  color: var(--text-muted);
  margin: 0;
  max-width: 44ch;
}
.button-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* ---------- 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;
}
.hero-photo {
  border-radius: 24px;
  aspect-ratio: 4 / 3.4;
}
/* Real hero photo: fill the box neatly */
img.hero-photo {
  width: 100%;
  object-fit: cover;
}

/* ============ 3. WELCOME ============ */
.welcome {
  background: var(--card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.welcome-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 20px;
  display: flex;
  gap: 32px;
  align-items: center;
  flex-wrap: wrap;
}
.welcome-photo {
  flex: 0 0 170px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
}
.photo-placeholder.welcome-photo { padding: 12px; }
.welcome-photo span { font-size: 12px; }
/* Real round photo of me: fill the circle, framed near the top so my face shows */
img.welcome-photo {
  object-fit: cover;
  object-position: center 20%;
}
.welcome-text {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.welcome-text .text-link { align-self: flex-start; }

/* ============ 4. FEATURED CAKES ============ */
.featured-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.cake {
  margin: 0;
  flex: 0 1 300px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cake-photo {
  border-radius: 18px;
  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 2px 8px rgba(59, 42, 30, 0.06);
}
.cake-caption {
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  text-align: center;
}
/* On phones, show only the first 3 cakes here (the hidden ones aren't loaded) */
@media (max-width: 600px) {
  .cake--extra { display: none; }
}

/* ============ 5. WHAT I MAKE ============ */
.what-i-make { background: var(--peach); }
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
}
.service-card {
  background: var(--card);
  border-radius: 18px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(59, 42, 30, 0.06);
}
.service-name { font-size: 19px; margin: 0; }

/* ============ 6. WHY ORDER FROM ME ============ */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
}
.trust-point {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 12px;
}
.trust-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--badge-bg);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
}
.trust-point strong { font-size: 16px; }
.trust-point span { font-size: 14px; }

/* ============ 7. KIND WORDS ============ */
.kind-words {
  background: var(--card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.quotes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
}
.quote {
  margin: 0;
  background: var(--cream);
  border-radius: 18px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.quote p { margin: 0; font-size: 16px; color: var(--text); }
.quote footer {
  font-weight: 800;
  color: var(--accent);
  font-size: 14px;
}

/* ============ 8. JOURNEY TEASER ============ */
.journey {
  max-width: 800px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.journey .section-title { margin: 0; font-size: clamp(24px, 4vw, 32px); }
.journey .lead { font-size: 17px; max-width: 50ch; }

/* ============ 9. EQUIPMENT TEASER ============ */
.equipment-teaser {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px 56px;
  text-align: center;
}
.equipment-card {
  background: var(--peach);
  border-radius: 18px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.equipment-line { margin: 0; font-size: 16px; color: var(--text); font-weight: 700; }

/* ============ 10. CALL TO ACTION ============ */
.cta { background: var(--cta-bg); color: #FBF6EE; }
.cta-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 64px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.cta-title { font-size: clamp(28px, 5vw, 40px); margin: 0; }
.cta-text { margin: 0; color: #E4D2BC; font-size: 17px; }
.cta-btn {
  background: var(--accent);
  color: #FFFFFF;
  font-size: 17px;
  padding: 15px 32px;
}
.cta-btn:hover { filter: brightness(1.1); }
.cta-email { margin: 8px 0 0; color: #E4D2BC; font-size: 15px; }
.cta-email a { color: #FBF6EE; font-weight: 700; }

/* ============ 11. FOOTER ============ */
.site-footer { background: var(--footer-bg); color: #C9BEAC; }
.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 36px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  justify-content: center;
}
.footer-links a {
  color: #C9BEAC;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
}
.footer-links a:hover { color: #FBF6EE; }
.footer-meta {
  text-align: center;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.footer-meta a { color: #FBF6EE; }

/* ============ GALLERY PAGE (see all my cakes) ============ */
.gallery-intro {
  max-width: 640px;
  margin: 0 auto;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 22px;
}
.gallery-item {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gallery-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 2px 8px rgba(59, 42, 30, 0.06);
  cursor: zoom-in;   /* hints that you can click to enlarge */
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.gallery-item img:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(59, 42, 30, 0.16);
}
.gallery-item img:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.gallery-caption {
  font-weight: 700;
  font-size: 15px;
  text-align: center;
  color: var(--text);
}

/* ---------- Pop-up photo viewer (lightbox) ---------- */
.lightbox {
  display: none;                 /* hidden until a cake is clicked */
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(44, 31, 22, 0.92);
  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: #FBF6EE;
  font-weight: 700;
  font-size: 16px;
  text-align: center;
}
.lightbox-close {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(251, 246, 238, 0.15);
  color: #FBF6EE;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.lightbox-close:hover { background: rgba(251, 246, 238, 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(251, 246, 238, 0.15);
  color: #FBF6EE;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}
.lightbox-arrow:hover { background: rgba(251, 246, 238, 0.32); }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }

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

/* 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-muted); }
.lead-text { font-size: 18px; color: var(--text-muted); }

/* 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: 36px;
  align-items: center;
}
img.about-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 18%;
  border-radius: 24px;
  box-shadow: 0 6px 20px rgba(59, 42, 30, 0.12);
}

/* ---------- Menu & prices ---------- */
.menu-list { max-width: 760px; margin: 0 auto; }
.menu-group { margin-bottom: 40px; }
.menu-group-title {
  font-family: 'Young Serif', serif;
  font-size: 24px;
  margin: 0 0 4px;
}
.menu-group-note { margin: 0 0 14px; color: var(--text-muted); font-size: 15px; }
.menu-item {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--border);
  align-items: baseline;
}
.menu-item-name { font-weight: 700; }
.menu-item-desc { color: var(--text-muted); font-size: 14px; 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: 2px solid var(--border);
  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; }
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.form .btn { align-self: flex-start; border: none; }

/* ---------- 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 2px 8px rgba(59, 42, 30, 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);
  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(--accent);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.timeline-item h2 {
  font-family: 'Young Serif', serif;
  font-size: 22px;
  margin: 4px 0 8px;
}
.timeline-item p { margin: 0; color: var(--text-muted); }

/* ---------- Meet my equipment (team cards) ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}
.team-card {
  background: var(--card);
  border-radius: 18px;
  padding: 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-shadow: 0 2px 8px rgba(59, 42, 30, 0.06);
}
.team-photo {
  width: 130px;
  height: 130px;
  border-radius: 50%;
}
.photo-placeholder.team-photo { padding: 10px; }
.team-photo span { font-size: 12px; }
img.team-photo { object-fit: cover; }
.team-name { font-family: 'Young Serif', serif; font-size: 20px; margin: 0; }
.team-role {
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
}
.team-card p { margin: 0; color: var(--text-muted); font-size: 15px; }