/* ==========================================================================
   BRAMBLE PAWS
   Warm paper with scattered dog portraits: playful hero, bento about, a
   static gallery of recent grooms and a parallax showcase.
   ========================================================================== */

:root {
  --background: #FBF5EF;
  --card: #FFFFFF;
  --foreground: #2E2028;
  --primary-cta: #7A3B57;
  --primary-cta-text: #FFFFFF;
  --secondary-cta: #F3E3DA;
  --secondary-cta-text: #2E2028;
  --accent: #B4604A;
  --background-accent: #EBD6C9;
  --radius: 1.75rem;
  --font-body: Supreme, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: Melodrama, Georgia, serif;
  --content-width: 75vw;
  --section-head-size: var(--text-6xl);
}

@media (width >= 1536px) { :root { --section-head-size: var(--text-7xl); } }


@media (width <= 768px) { :root { --content-width: 88vw; } }

/* --- Hero with scattered stickers ------------------------------------------ */

.hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding-block: 8rem 4rem; overflow: hidden; }

.hero__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; text-align: center; }
.hero__lede { max-width: 34ch; font-size: var(--text-2xl); line-height: 1.45; }
.hero__name { font-size: var(--text-8xl); line-height: 1.05; font-weight: 700; letter-spacing: -0.03em; }
.hero__role { font-size: var(--text-2xl); opacity: 0.65; }
.hero__hint { font-size: var(--text-lg); color: var(--accent); }

.hero__photo { width: min(22rem, 60vw); margin-bottom: 1rem; border-radius: var(--radius); }

.sticker {
  position: absolute;
  z-index: 1;
  width: 7rem;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer;
}

.sticker:hover { transform: scale(1.12) rotate(6deg); }
.sticker:nth-of-type(1) { top: 12%; left: 6%; transform: rotate(-12deg); }
.sticker:nth-of-type(2) { top: 22%; right: 8%; transform: rotate(9deg); }
.sticker:nth-of-type(3) { bottom: 18%; left: 12%; transform: rotate(7deg); }
.sticker:nth-of-type(4) { bottom: 12%; right: 14%; transform: rotate(-8deg); }
.sticker:nth-of-type(5) { top: 45%; left: 3%; transform: rotate(14deg); }
.sticker:nth-of-type(6) { top: 55%; right: 4%; transform: rotate(-15deg); }
.sticker:nth-of-type(7) { top: 6%; left: 42%; transform: rotate(5deg); }
.sticker:nth-of-type(8) { bottom: 5%; left: 45%; transform: rotate(-6deg); }

@media (width <= 900px) {
  .sticker { width: 4.25rem; }
  .hero__name { font-size: var(--text-7xl); }
}

/* On a phone the hero copy fills the column, so the stickers that sit in the
   middle of it are dropped rather than left sitting behind the words. Four
   corner stickers keep the scrapbook feel without costing any legibility. */
@media (width <= 768px) {
  .sticker { width: 3.5rem; }
  .sticker:nth-of-type(1) { top: 11%; left: 2%; }
  .sticker:nth-of-type(2) { top: 11%; right: 2%; }
  .sticker:nth-of-type(3) { bottom: 3%; left: 3%; }
  .sticker:nth-of-type(4) { bottom: 3%; right: 3%; }
  .sticker:nth-of-type(n+5) { display: none; }
}

/* --- Bento about ------------------------------------------------------------ */

.bento { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.bento__cell { border-radius: var(--radius); overflow: hidden; }
.bento__cell img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 0.6s ease-out; }
.bento__cell:hover img { transform: scale(1.04); }
.bento__body { padding: 1.5rem; }
.bento__body h3 { font-size: var(--text-3xl); margin-bottom: 0.4rem; }
.bento__body p { font-size: var(--text-lg); line-height: 1.5; opacity: 0.75; }

@media (width <= 768px) { .bento { grid-template-columns: minmax(0,1fr); } }

/* --- Memory carousel --------------------------------------------------------- */

/* The recent grooms sit in a static grid rather than a moving strip: a row
   that scrolls by itself reads as an advert, and these are the proof. */
.memory-grid {
  margin-top: 2.5rem;
  margin-inline: auto;
  max-width: 68rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.memory { flex: 1 1 18rem; max-width: 21rem; border-radius: var(--radius); overflow: hidden; }
.memory img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.memory p { padding: 1rem 1.15rem; font-size: var(--text-2xl); text-align: center; }

@media (width <= 680px) { .memory { flex: 1 1 100%; max-width: 22rem; } }

/* --- Parallax showcase -------------------------------------------------------- */

.parallax {
  position: relative;
  min-height: 34rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  overflow: hidden;
}

.parallax__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The showcase photo is a white dog in daylight, so the scrim has to be
   heavy enough for the headline to clear 4.5:1 rather than merely look ok. */
.parallax::after { content: ''; position: absolute; inset: 0; background: rgba(20,15,10,0.58); }
.parallax h2 { position: relative; z-index: 2; font-size: var(--text-8xl); color: #fff; letter-spacing: -0.02em; text-align: center; }
.parallax__float { position: absolute; z-index: 3; width: 8rem; }
.parallax__float--a { top: 12%; left: 8%; transform: rotate(-10deg); }
.parallax__float--b { bottom: 14%; right: 10%; transform: rotate(12deg); }

@media (width <= 768px) { .parallax h2 { font-size: var(--text-7xl); } .parallax__float { width: 5rem; } }

/* --- Footer -------------------------------------------------------------------- */

.site-footer { border-radius: var(--radius) var(--radius) 0 0; background: var(--foreground); color: #f5f3f0; padding-block: 4rem; }
.footer-top { display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: start; }
.footer-brand { font-size: var(--text-5xl); font-weight: 700; letter-spacing: -0.02em; }
.footer-nav { display: grid; grid-template-columns: repeat(3, minmax(9rem, auto)); gap: 2.5rem; }
.footer-nav h3 { font-size: var(--text-base); font-weight: 500; opacity: 0.55; margin-bottom: 1rem; }
.footer-nav ul { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-nav a { font-size: var(--text-lg); transition: color 0.2s, opacity 0.2s; }
.footer-nav a:hover { color: var(--accent); }

.footer-legal-bar {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
  font-size: var(--text-base); opacity: 0.6;
}
.footer-legal-bar div { display: flex; gap: 1.25rem; }

@media (width <= 768px) {
  .footer-top { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
}

/* The hint used the accent colour, which sat at 4.1:1 on the cream. */
.hero__hint { color: #8E4535; }