/* ============================================================
   Tail End Sanctuary — "Quiet Gallery" redesign layer
   Loaded AFTER style.css; overrides where needed.
   Core idea: every photo lives in a white-matted PLATE at its
   natural aspect ratio (height:auto) — a dog can never be cropped.
   ============================================================ */

:root{
  --terracotta:#B76E4A;
  --tan:#D9B98C;
  --keyline:rgba(78,94,70,0.16);
  --shadow-plate:0 22px 55px rgba(62,50,35,0.14);
}

/* ---- Display type: lighter + tighter = gallery, not poster ---- */
h1{ font-weight:400; letter-spacing:-0.01em; line-height:1.08; }
h2{ font-weight:500; letter-spacing:-0.005em; }
.container{ max-width:1080px; }
.section-cream-dark{ background:var(--cream-dark); }

/* ---- Eyebrow / kicker label ---- */
.eyebrow{
  display:block;
  font-family:'Inter',sans-serif; font-weight:600;
  font-size:0.7rem; letter-spacing:0.26em; text-transform:uppercase;
  color:var(--terracotta); margin-bottom:18px;
}

/* ---- The framed photo PLATE (hero + figure primitive) ---- */
.plate{
  background:#fff; padding:14px; border-radius:6px; margin:0;
  box-shadow:var(--shadow-plate), 0 0 0 1px var(--keyline);
}
.plate img{ width:100%; height:auto; display:block; border-radius:3px; }
.plate figcaption{
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:1rem; color:var(--text-light); text-align:center;
  padding:12px 6px 2px;
}
.plate--portrait{ max-width:430px; }
.plate--square{ max-width:500px; }
.plate--landscape{ max-width:600px; }

/* ---- Split editorial hero ---- */
.hero-ed{ background:var(--cream); padding:84px 0 92px; overflow:hidden; }
.hero-ed .hero-grid{
  display:grid; grid-template-columns:1.05fr 0.95fr;
  align-items:center; gap:60px;
}
.hero-ed.hero-portrait .hero-grid{ grid-template-columns:1.12fr 0.88fr; }
.hero-ed .hero-copy h1{ margin:0 0 22px; font-size:clamp(2.4rem,4.6vw,3.5rem); }
.hero-ed .subhead{
  font-size:1.15rem; line-height:1.75; color:var(--text-light);
  max-width:33em; margin:0 0 34px;
}
.hero-ed .hero-plate-wrap{ display:flex; justify-content:center; }

/* ---- Facts / impact band (sage) ---- */
.factsband{ background:var(--sage-dark); color:#fff; padding:46px 24px; }
.facts-inner{
  max-width:1080px; margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr);
}
.facts-inner .fact{
  text-align:center; padding:6px 22px;
  border-left:1px solid rgba(255,255,255,0.16);
}
.facts-inner .fact:first-child{ border-left:none; }
.facts-inner .fig{
  display:block; font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.6rem,2.4vw,2.1rem); line-height:1.05; color:#fff; margin-bottom:8px;
}
.facts-inner .lbl{
  font-family:'Inter',sans-serif; font-size:0.72rem;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--tan);
}

/* ---- Mission lead ---- */
.container.narrow{ max-width:760px; }
.center{ text-align:center; }
.lead{
  font-family:'Cormorant Garamond',serif; font-weight:400;
  font-size:clamp(1.45rem,2.5vw,2rem); line-height:1.4; color:var(--sage-dark);
}

/* ---- Editorial 2-col feature row ---- */
.feature-row{
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
}
.feature-row .feature-media{ display:flex; justify-content:center; }
.feature-row.reverse .feature-media{ order:2; }
.feature-text h2{ margin-bottom:18px; font-size:clamp(1.7rem,3.2vw,2.2rem); }
.feature-text p{ margin-bottom:16px; color:var(--text); font-size:1.05rem; line-height:1.8; }
.feature-text .btn{ margin-top:10px; }

/* ---- Pull-quote moment ---- */
.pullquote{
  max-width:900px; margin:0 auto; padding:6px 0 6px 30px;
  border-left:3px solid var(--sage);
}
.pullquote p{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:400;
  font-size:clamp(1.5rem,2.8vw,2.05rem); line-height:1.45; color:var(--sage-dark);
}

/* ---- Logo: dog-mark in nav, full lockup (white) in footer ---- */
.nav-logo-img{ width:auto; height:96px; }
.nav .nav-inner{ height:124px; }
.nav-logo{ gap:16px; }
.nav-logo-text{ font-family:'Cormorant Garamond',serif; font-weight:700; font-size:2rem; color:var(--sage-dark); line-height:1.05; letter-spacing:0.005em; white-space:nowrap; }
@media (max-width:768px){ .nav-logo-img{ height:64px; } .nav .nav-inner{ height:98px; } .nav-logo-text{ font-size:1.4rem; } }
.footer-logo img{ width:132px; height:auto; filter:brightness(0) invert(1); opacity:0.95; }

/* ---- Scroll reveal ---- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none; }
}

/* ---- Responsive ---- */
@media (max-width:860px){
  .hero-ed{ padding:56px 0 64px; }
  .hero-ed .hero-grid,
  .hero-ed.hero-portrait .hero-grid{ grid-template-columns:1fr; gap:34px; }
  .hero-ed .hero-plate-wrap{ order:2; }
  .hero-ed .hero-copy{ text-align:left; }
  .facts-inner{ grid-template-columns:repeat(2,1fr); gap:28px 0; }
  .facts-inner .fact:nth-child(3){ border-left:none; }
  .feature-row{ grid-template-columns:1fr; gap:30px; }
  .feature-row.reverse .feature-media{ order:0; }
  .plate--portrait,.plate--square,.plate--landscape{ max-width:460px; margin:0 auto; }
}

/* ---- Video inside a plate (Featured Teddy) ---- */
.plate video{ width:100%; height:auto; display:block; border-radius:3px; background:#000; }
.plate--video{ max-width:430px; }

/* ---- "Where your gift goes" — qualitative, no fabricated figures ---- */
.giftgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:1000px; margin:0 auto; }
.giftgrid .gift{ background:#fff; border:1px solid var(--keyline); border-radius:12px; padding:34px 26px; text-align:center; box-shadow:var(--shadow-soft); }
.giftgrid .gift .gift-ic{ width:54px; height:54px; border-radius:50%; background:var(--sage-light); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
.giftgrid .gift h3{ font-size:1.35rem; margin-bottom:10px; }
.giftgrid .gift p{ font-size:0.96rem; color:var(--text-light); line-height:1.65; }

/* ---- Section intro (centered eyebrow + title + dek) ---- */
.sec-intro{ text-align:center; max-width:680px; margin:0 auto 52px; }
.sec-intro h2{ margin-bottom:14px; }
.sec-intro p{ color:var(--text-light); font-size:1.08rem; }

@media (max-width:860px){
  .giftgrid{ grid-template-columns:1fr; gap:16px; }
}

/* Card "featured" badge: terracotta accent (was brown) */
.card-featured-badge{ background:var(--terracotta); }

/* Get Involved: balanced 2x2 action grid (was an awkward 3+1) */
.action-cards{ grid-template-columns:repeat(2,1fr); max-width:880px; margin-left:auto; margin-right:auto; }
@media (max-width:620px){ .action-cards{ grid-template-columns:1fr; } }

/* Signup success message */
.signup-thanks{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.15rem; color:var(--sage-dark); margin-top:auto; }