/* ------------------------------------------------------------------
   Ryehaus Bullies — site stylesheet
   Bourbon palette, distillery-grade typography, mobile-first.
   ------------------------------------------------------------------ */

:root {
  /* Brand palette — pulled from Rye's coat */
  --cask:          #2E1A12;
  --single-barrel: #7A4226;
  --caramel:       #9B6743;
  --mash:          #C8907A;
  --wheat:         #E8D4B5;
  --bone:          #FBF5E6;

  /* Type stacks */
  --display: 'Bodoni Moda', 'Bodoni 72', Didot, 'Playfair Display', Georgia, serif;
  --body:    'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;

  /* Layout */
  --container: 1140px;
  --container-narrow: 760px;
  --gutter: 1.5rem;

  /* Type scale */
  --t-eyebrow: 0.78rem;
  --t-body:    1.05rem;
  --t-lede:    1.18rem;
  --t-h3:      1.35rem;
  --t-h2:      clamp(2.2rem, 4.6vw, 3.6rem);
  --t-display: clamp(3.6rem, 9vw, 6.4rem);

  --radius: 4px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--cask);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--cask); text-decoration-color: var(--caramel); text-underline-offset: 3px; }
a:hover { color: var(--single-barrel); }

p { margin: 0 0 1rem; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.container.narrow { max-width: var(--container-narrow); }

/* ---- Site nav ---------------------------------------------------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem var(--gutter);
  background: rgba(251, 245, 230, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 0.5px solid rgba(122, 66, 38, 0.18);
}

.nav-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--cask);
  text-transform: uppercase;
}

.nav-links {
  display: inline-flex;
  gap: 0.6rem;
  align-items: center;
}

/* Section links hide on mobile; the Follow CTA stays visible at all sizes
   so phone users can reach the Instagram CTA from the top nav. */
.nav-links a {
  text-decoration: none;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  color: var(--single-barrel);
  text-transform: uppercase;
  font-family: var(--body);
  display: none;
}

.nav-links a:hover { color: var(--cask); }

.nav-links a.nav-cta {
  display: inline-block;
  background: var(--cask);
  color: var(--bone);
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius);
  min-height: 44px;          /* touch target */
  line-height: 1.4;
}

.nav-links a.nav-cta:hover {
  background: var(--single-barrel);
  color: var(--bone);
}

@media (min-width: 720px) {
  .nav-links { gap: 1.6rem; }
  .nav-links a { display: inline-block; }
}

/* ---- Hero — full-bleed bourbon image with overlay text ---------- */
.hero {
  position: relative;
  min-height: 92vh;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background: var(--cask);
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('assets/photos/hero-rye-bourbon.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* MOBILE — swap to a portrait-friendly composite where Rye + glass are
   pushed together (the empty cellar middle removed). At 65vh and cover,
   center-crop math keeps both subjects visible across phone sizes. */
@media (max-width: 899px) {
  .hero {
    min-height: 65vh;
  }
  .hero-bg {
    background-image: url('assets/photos/hero-rye-bourbon-mobile.jpg');
  }
}

/* MOBILE — bottom band gradient + bottom-centered text. The image gets
   center-cropped on phones so the left/right edges aren't visible there,
   making bottom the only safe text zone for small screens. */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(20, 12, 8, 0.95) 0%,
    rgba(20, 12, 8, 0.85) 18%,
    rgba(20, 12, 8, 0.45) 38%,
    rgba(20, 12, 8, 0.10) 60%,
    rgba(20, 12, 8, 0.00) 80%
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 3rem var(--gutter) 2.5rem;
  color: var(--bone);
  text-align: center;
}

/* DESKTOP — text moves to LEFT column, sitting against the dark cellar
   wall behind/beside Rye for natural high-contrast backdrop. The
   gradient is now a left-side vignette: dark on the left, transparent
   across Rye and the glass. */
@media (min-width: 900px) {
  .hero { align-items: center; min-height: 92vh; }
  .hero-overlay {
    background: linear-gradient(
      to right,
      rgba(20, 12, 8, 0.92) 0%,
      rgba(20, 12, 8, 0.85) 18%,
      rgba(20, 12, 8, 0.65) 32%,
      rgba(20, 12, 8, 0.30) 46%,
      rgba(20, 12, 8, 0.00) 62%
    );
  }
  .hero-content {
    margin-left: 0;
    margin-right: auto;
    max-width: 500px;
    padding: 2rem 2rem 2rem clamp(4rem, 7vw, 7rem);
    text-align: left;
  }
}

/* Hero text — light on dark image overlay */
.hero-eyebrow {
  font-size: 0.74rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--mash);
  margin: 0 0 1.5rem;
}

.wordmark {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.8rem, 7.5vw, 5.4rem);
  line-height: 1;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  letter-spacing: 0.06em;
  color: var(--bone);
}

.wm-display { display: block; }

.wm-bullies-row {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.6rem;
}

.wm-rule {
  display: inline-block;
  width: 38px;
  height: 1px;
  background: var(--mash);
}

.wm-bullies {
  font-family: var(--body);
  font-size: clamp(0.85rem, 1.3vw, 1.05rem);
  letter-spacing: 0.62em;
  color: var(--mash);
  padding-left: 0.62em;
}

.tagline {
  font-style: italic;
  font-size: 1.18rem;
  color: var(--bone);
  margin: 1.6rem 0 0.5rem;
}

.star-bullet {
  display: inline-block;
  color: var(--mash);
  font-style: normal;
  font-size: 0.82em;
  margin: 0 0.35em;
  transform: translateY(-1px);
}

.hero-sub {
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--wheat);
  opacity: 0.85;
  margin: 0 0 2.2rem;
}

.cta-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
}

.cta-row .btn { width: 100%; text-align: center; }

@media (min-width: 480px) {
  .cta-row {
    flex-direction: row;
    justify-content: center;
    max-width: none;
  }
  .cta-row .btn { width: auto; }
}

/* On desktop, hero text left-aligns to match the left-column layout */
@media (min-width: 900px) {
  .wordmark { align-items: flex-start; }
  .cta-row { justify-content: flex-start; max-width: none; margin: 0; }
  .hero-eyebrow,
  .tagline,
  .hero-sub { text-align: left; }
}

/* Hero on dark image needs inverted button colors */
.hero .btn-primary {
  background: var(--bone);
  color: var(--cask);
  border-color: var(--bone);
}
.hero .btn-primary:hover {
  background: var(--mash);
  color: var(--cask);
  border-color: var(--mash);
}

.btn-ghost-light {
  background: transparent;
  color: var(--bone);
  border: 1px solid var(--bone);
}
.btn-ghost-light:hover {
  background: var(--bone);
  color: var(--cask);
}

.btn {
  display: inline-block;
  padding: 0.95rem 1.7rem;
  font-family: var(--body);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius);
  border: 1px solid var(--cask);
  cursor: pointer;
  min-height: 48px;          /* touch target meets WCAG */
  transition: background 0.18s ease, color 0.18s ease, transform 0.06s ease;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--cask);
  color: var(--bone);
  border-color: var(--cask);
}
.btn-primary:hover {
  background: var(--single-barrel);
  border-color: var(--single-barrel);
  color: var(--bone);
}

.btn-ghost {
  background: transparent;
  color: var(--cask);
  border-color: var(--cask);
}
.btn-ghost:hover {
  background: var(--cask);
  color: var(--bone);
}

.hero-portrait {
  margin: 0;
  max-width: 380px;
  justify-self: center;
}

.hero-portrait img {
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(46, 26, 18, 0.08);
}

.hero-portrait figcaption {
  font-style: italic;
  font-size: 0.88rem;
  color: var(--single-barrel);
  text-align: center;
  margin-top: 0.7rem;
}

@media (min-width: 900px) {
  .hero { padding: 5rem var(--gutter) 6rem; }
  .hero-frame {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 4rem;
    text-align: left;
  }
  .hero-content { text-align: left; }
  .hero-seal { margin-left: 0; margin-right: 0; }
  .wordmark { align-items: flex-start; }
  .cta-row { justify-content: flex-start; }
  .hero-portrait { max-width: 420px; justify-self: end; }
}

/* ---- Common section bits ---------------------------------------- */
section { scroll-margin-top: 80px; }

.eyebrow {
  font-size: var(--t-eyebrow);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--caramel);
  font-family: var(--body);
  margin: 0 0 1.4rem;
}

.section-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--cask);
  margin: 0 0 2rem;
}

.lede {
  font-size: clamp(1.1rem, 1.4vw, 1.28rem);
  line-height: 1.55;
  color: var(--cask);
  margin: 0 0 1.6rem;
  max-width: 640px;
}

/* ---- Story ------------------------------------------------------- */
.story {
  padding: 7rem 0 6rem;
  border-top: 0.5px solid rgba(122, 66, 38, 0.18);
}

.three-up {
  display: grid;
  gap: 2.5rem;
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 0.5px solid rgba(122, 66, 38, 0.22);
}

.three-up h3 {
  font-family: var(--display);
  font-size: var(--t-h3);
  font-weight: 500;
  margin: 0 0 0.5rem;
  color: var(--cask);
}

.three-up p { margin: 0; color: var(--cask); }

.value-mark {
  font-family: var(--body);
  font-size: 1.1rem;
  color: var(--single-barrel);
  margin: 0 0 0.4rem;
}

@media (min-width: 760px) {
  .three-up { grid-template-columns: repeat(3, 1fr); gap: 3rem; }
}

/* ---- Meet Rye --------------------------------------------------- */
.rye {
  padding: 7rem 0;
  background: rgba(232, 212, 181, 0.42);
  border-top: 0.5px solid rgba(122, 66, 38, 0.18);
  border-bottom: 0.5px solid rgba(122, 66, 38, 0.18);
}

.rye-head {
  max-width: 760px;
  margin: 0 auto 4rem;
  text-align: center;
}

.rye-head .lede {
  margin-left: auto;
  margin-right: auto;
}

/* Growth pair: 5 weeks → 6 months, side by side */
.rye-growth {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 0 auto 4rem;
  max-width: 900px;
}

.rye-stage { margin: 0; }

.rye-stage img {
  width: 100%;
  aspect-ratio: 1 / 1;          /* matching square so the captions align */
  object-fit: cover;
  object-position: center;      /* both photos centered; 7-month gets minor side trim, 5-week fills */
  border-radius: var(--radius);
  background: var(--cask);
  display: block;
}

.rye-stage figcaption {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  color: var(--cask);
  margin-top: 1rem;
  letter-spacing: 0.02em;
  text-align: center;
}

@media (min-width: 720px) {
  .rye-growth { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}

.split {
  display: grid;
  gap: 3.5rem;
  align-items: center;
}

.feature-photo { margin: 0; }

.feature-photo img {
  border-radius: var(--radius);
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  box-shadow: 0 1px 0 rgba(46, 26, 18, 0.08);
}

.feature-photo figcaption {
  font-style: italic;
  font-size: 0.88rem;
  color: var(--single-barrel);
  text-align: center;
  margin-top: 0.7rem;
}

.vital-stats {
  margin: 0 auto;
  max-width: 760px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem 1.5rem;
  border-top: 0.5px solid rgba(122, 66, 38, 0.32);
  padding-top: 1.2rem;
}

@media (min-width: 480px) {
  .vital-stats { grid-template-columns: 1fr 1fr; }
}

.vital-stats > div {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.vital-stats dt {
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--caramel);
}

.vital-stats dd {
  margin: 0;
  font-size: 1rem;
  color: var(--cask);
}

@media (min-width: 880px) {
  .split { grid-template-columns: 0.95fr 1.05fr; gap: 4rem; }
  .feature-photo img { max-width: 100%; }
}

/* ---- Photo band (full-bleed transition strip) -------------------- */
.photo-band {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  height: 360px;
  background: var(--cask);
}

.photo-band figure { margin: 0; overflow: hidden; }

.photo-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 720px) {
  .photo-band {
    grid-template-columns: repeat(4, 1fr);
    height: 280px;
  }
}

/* ---- Pedigree — Pluto + Mega side-by-side ----------------------- */
.lineage {
  padding: 7rem 0;
  border-top: 0.5px solid rgba(122, 66, 38, 0.18);
}

/* Centered intro block, mirrors .rye-head — keeps copy width
   intentional rather than arbitrary-left at 640px. */
.lineage-head {
  max-width: 760px;
  margin: 0 auto 4rem;
  text-align: center;
}

.lineage-head .lede {
  margin-left: auto;
  margin-right: auto;
}

.parents-grid {
  display: grid;
  gap: 3rem;
  margin-top: 0;
}

.parent { margin: 0; }

.parent img {
  width: 100%;
  aspect-ratio: 1 / 1;       /* force matching square so the captions align */
  object-fit: cover;
  object-position: center;   /* both photos now near-square; minimal crop either way */
  border-radius: var(--radius);
  background: var(--cask);
  display: block;
}

.parent figcaption {
  margin-top: 1.4rem;
}

.parent-role {
  font-size: 0.74rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--caramel);
  margin: 0 0 0.5rem;
}

.parent-name {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1.1;
  margin: 0 0 0.4rem;
  color: var(--cask);
  letter-spacing: 0.01em;
}

.parent-color {
  font-family: var(--body);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--single-barrel);
  margin: 0 0 0.9rem;
  padding-bottom: 0.9rem;
  border-bottom: 0.5px solid rgba(122, 66, 38, 0.22);
}

.parent-feature {
  font-style: italic;
  color: var(--cask);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0;
}

@media (min-width: 720px) {
  .parents-grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
}

/* ---- Releases — clean dark band, typography-led ------------------ */
.releases {
  background: var(--cask);
  color: var(--bone);
  padding: 9rem 0;
  text-align: left;
}

.releases .eyebrow { color: var(--mash); }

.releases .section-title {
  color: var(--bone);
  font-size: clamp(3rem, 6vw, 5.2rem);
}

.releases .lede { color: var(--wheat); max-width: 580px; }

.releases .btn { margin-top: 1.2rem; }

.releases .btn-primary {
  background: var(--bone);
  color: var(--cask);
  border-color: var(--bone);
}
.releases .btn-primary:hover {
  background: var(--mash);
  color: var(--cask);
  border-color: var(--mash);
}

/* ---- Gallery — masonry with natural aspect ratios --------------- */
.gallery {
  padding: 5rem 0;
  border-top: 0.5px solid rgba(122, 66, 38, 0.18);
}

.photo-grid {
  columns: 1;
  column-gap: 1rem;
  margin-top: 2.5rem;
}

@media (min-width: 600px) { .photo-grid { columns: 2; } }
@media (min-width: 1000px) { .photo-grid { columns: 3; } }

.photo-tile {
  display: block;
  margin: 0 0 1rem;
  break-inside: avoid;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--cask);
}

.photo-tile img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
}

.photo-tile:hover img { transform: scale(1.04); }

/* ---- Follow — full-bleed bourbon cinema bg with text overlay --- */
.follow {
  position: relative;
  min-height: 80vh;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background: var(--cask);
  border-top: 0.5px solid rgba(122, 66, 38, 0.32);
  color: var(--bone);
}

.follow-bg {
  position: absolute;
  inset: 0;
  background-image: url('assets/photos/bourbon-cinema.jpg');
  background-size: cover;
  background-position: center bottom;   /* anchor wood/floor — guarantees the surface the glass sits on stays visible across all viewport heights */
}

/* MOBILE — base rules continue below, mobile @media moved to end of section */
.follow-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(20, 12, 8, 0.96) 0%,
    rgba(20, 12, 8, 0.85) 18%,
    rgba(20, 12, 8, 0.45) 38%,
    rgba(20, 12, 8, 0.10) 60%,
    rgba(20, 12, 8, 0.00) 80%
  );
}

.follow-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 3rem var(--gutter) 3rem;
  text-align: center;
}

.follow .eyebrow { color: var(--mash); }

.follow-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.8rem, 6.4vw, 5.4rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
  color: var(--bone);
  margin: 0 0 1.8rem;
}

.follow .lede {
  color: var(--wheat);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.ig-handle {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  color: var(--mash);
  margin: 1.8rem 0 1.4rem;
  letter-spacing: 0.02em;
}

.btn-follow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.05rem 2.2rem;
  font-family: var(--body);
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--bone);
  color: var(--cask);
  border: 1px solid var(--bone);
  border-radius: var(--radius);
  transition: background 0.18s ease, color 0.18s ease, transform 0.06s ease;
}

.ig-glyph {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.btn-follow:hover {
  background: var(--mash);
  border-color: var(--mash);
  color: var(--cask);
}

.btn-follow:active { transform: translateY(1px); }

/* DESKTOP — text moves to the RIGHT column, sitting over the dark
   bokeh side of the image (away from the glass on the left).
   Content sits inside the page's standard container width, right-aligned,
   so it lines up with where copy lands in the rest of the page —
   not jammed against the viewport edge. */
@media (min-width: 900px) {
  .follow { align-items: center; min-height: 88vh; }
  .follow-overlay {
    background: linear-gradient(
      to left,
      rgba(20, 12, 8, 0.92) 0%,
      rgba(20, 12, 8, 0.82) 22%,
      rgba(20, 12, 8, 0.55) 38%,
      rgba(20, 12, 8, 0.15) 55%,
      rgba(20, 12, 8, 0.00) 70%
    );
  }
  .follow-content {
    width: 100%;
    max-width: var(--container);    /* same 1140px as the rest of the page */
    margin: 0 auto;                 /* center the container */
    padding: 3rem var(--gutter);    /* page-wide gutters, not viewport-edge */
    display: flex;
    flex-direction: column;
    align-items: flex-end;          /* push content to right edge of container */
    text-align: left;
  }
  .follow-content > * {
    width: 480px;        /* explicit width on every child so left-edges align */
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .follow .lede { margin-left: 0; margin-right: 0; }
}

/* The mobile-only standalone CTA (sits below the image on phones) */
.follow-cta-mobile { display: none; }

/* MOBILE — three separate blocks stacked: text on cask, image, button on cask.
   Each block is its own element with its own background. Nothing overlaps. */
@media (max-width: 899px) {
  .follow {
    display: block !important;
    min-height: auto !important;
    overflow: visible !important;
    background: var(--cask) !important;
  }
  .follow-content {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 4rem var(--gutter) 3rem !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    background: var(--cask) !important;
  }
  .follow-content > * {
    width: auto !important;
    max-width: 480px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .follow .lede {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  /* Hide the desktop in-content button on mobile */
  .follow-btn-desktop { display: none !important; }
  .follow-bg {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    aspect-ratio: 1 / 1;
    background-image: url('assets/photos/bourbon-cinema-mobile.jpg') !important;
    background-position: center !important;
    background-size: cover !important;
  }
  .follow-cta-mobile {
    display: flex !important;
    justify-content: center;
    padding: 3rem var(--gutter) 4rem;
    background: var(--cask);
  }
  .follow-overlay { display: none !important; }
  .ig-glyph {
    width: 18px !important;
    height: 18px !important;
    display: block;
    flex-shrink: 0;
  }
  .btn-follow {
    line-height: 1;       /* tighten to better center the icon vertically */
  }
}

/* ---- Footer ------------------------------------------------------ */
.site-footer {
  padding: 3rem var(--gutter);
  background: var(--cask);
  color: var(--bone);
  text-align: center;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}

.footer-mark {
  width: 44px;
  height: 44px;
  filter: invert(96%) sepia(7%) saturate(290%) hue-rotate(2deg);
  /* Star is dark on transparent; this filter recolors it to bone for dark bg */
}

.footer-tagline {
  font-style: italic;
  font-size: 1rem;
  margin: 0;
  color: var(--bone);
}

.footer-tagline .star-bullet { color: var(--mash); }

.footer-meta {
  font-size: 0.85rem;
  color: var(--mash);
  margin: 0;
}

.footer-meta a { color: var(--bone); }

/* ---- Reduced motion ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .photo-tile img { transition: none; }
}