/* Same light-theme tokens as src/index.css; scoped to the about-page content. */
#nosotras .about-story {
  --foreground: 30 10% 15%;
  --muted-foreground: 30 8% 45%;
  --sand: 35 25% 90%;
  --warm-white: 40 30% 99%;
  --charcoal: 30 10% 20%;
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Raleway", system-ui, sans-serif;
}
#nosotras .about-story { background:hsl(var(--warm-white)); color:hsl(var(--charcoal)); font-family:var(--font-body); font-weight:400; overflow:clip; }
.about-story .sn-story { max-width:36rem; margin:0 auto; padding:0 1.25rem; }
.about-story p { margin:0 0 1.5rem; }
.about-story .sn-story p { font-size:17px; line-height:1.8; }
.about-story h1,.about-story h2 { font-family:var(--font-display); font-weight:400; color:hsl(var(--foreground)); letter-spacing:-.01em; text-wrap:initial; margin:0; }
.about-story h1 { font-size:clamp(2.5rem,7vw,4.25rem); line-height:1.1; margin-bottom:2.5rem; }
.about-story h2 { font-size:clamp(1.85rem,4.5vw,2.75rem); line-height:1.2; }
.about-story .sn-hero { max-width:calc(1080px + 2 * clamp(16px,4vw,48px)); padding:clamp(110px,10vw,128px) clamp(16px,4vw,48px) 0; }
.about-story .sn-hero h1 { max-width:none; margin:0 0 14px; font-size:clamp(34px,4.4vw,52px); line-height:1.12; letter-spacing:0; text-wrap:balance; }
.about-story .sn-hero p { max-width:560px; }
.about-story .sn-hero h1 + p { font-size:18px; line-height:1.5; }
.about-story .sn-chapter { padding-top:clamp(1rem,4vw,2.5rem); }
.about-story .sn-chapter h2 { margin-bottom:2.25rem; }
.about-story em { font-style:italic; }
.about-story .sn-photo { margin:clamp(2.5rem,6vw,4rem) auto; padding:0 1.25rem; max-width:36rem; }
.about-story .sn-frame { aspect-ratio:var(--media-ratio); border-radius:.5rem; background:hsl(var(--sand)); overflow:hidden; }
.about-story .sn-photo img,.about-story .sn-photo video { width:100%; height:100%; object-fit:cover; display:block; }
.about-story .sn-photo--video { margin:clamp(.5rem,2vw,1.25rem) auto clamp(2rem,5vw,3rem); }
.about-story .sn-collage { max-width:62rem; margin:clamp(.5rem,2vw,1.25rem) auto clamp(2rem,5vw,2.5rem); padding:0 1.25rem; }
.about-story .sn-collage img { display:block; width:100%; height:auto; }
.about-story .sn-collage figcaption { font-style:italic; font-size:.9rem; color:hsl(var(--muted-foreground)); text-align:center; margin-top:.9rem; }
.about-story .sn-collage + .sn-chapter { padding-top:0; }
.about-story .sn-photo--copas .sn-frame { position:relative; container-type:inline-size; }
.about-story .sn-drink { position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%); font-size:14cqw; line-height:1; background:none; border:0; padding:0; cursor:pointer; filter:drop-shadow(0 4px 8px rgba(0,0,0,.25)); animation:about-bob 3.2s ease-in-out var(--d) infinite; -webkit-tap-highlight-color:transparent; }
.about-story .sn-drink:focus-visible { outline:2px solid hsl(var(--warm-white)); outline-offset:4px; border-radius:50%; }
.about-story .sn-drink.pop { animation:about-pop .45s ease; }
@keyframes about-bob { 0%,100% { transform:translate(-50%,-50%) rotate(-6deg); } 50% { transform:translate(-50%,-56%) rotate(6deg); } }
@keyframes about-pop { 0%,100% { transform:translate(-50%,-50%) scale(1); } 40% { transform:translate(-50%,-50%) scale(1.3) rotate(12deg); } }
.about-story .sn-closing { margin-top:clamp(3rem,8vw,5rem); position:relative; overflow:hidden; min-height:100svh; display:flex; align-items:center; justify-content:center; text-align:center; padding:clamp(3rem,8vw,5rem) 1.25rem; }
.about-story .sn-closing__bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 38%; }
.about-story .sn-closing::after { content:""; position:absolute; inset:0; background:radial-gradient(ellipse 120% 45% at 50% 50%,rgba(30,26,22,.45) 0%,rgba(30,26,22,.22) 70%,rgba(30,26,22,.15) 100%); }
.about-story .sn-closing__content { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:1.75rem; }
.about-story .sn-closing h2 { color:hsl(var(--warm-white)); font-size:clamp(2.4rem,7vw,4.5rem); text-shadow:0 2px 24px rgba(0,0,0,.25); }
.about-story .sn-cta { display:inline-block; background:hsl(var(--warm-white)); color:hsl(var(--foreground)); font-family:var(--font-body); font-weight:500; font-size:17px; letter-spacing:.02em; text-decoration:none; padding:1.05rem 2.4rem; border-radius:999px; box-shadow:0 8px 30px rgba(0,0,0,.18); transition:transform .2s ease,background .2s ease; }
.about-story .sn-cta:hover { transform:translateY(-2px); background:hsl(var(--sand)); }
.about-story .sn-cta:focus-visible { outline:2px solid hsl(var(--warm-white)); outline-offset:4px; }
@media(min-width:768px) { .about-story .sn-story p { font-size:18px; } }
@media(min-width:900px) {
  .about-story .sn-photo { max-width:62rem; display:flex; }
  .about-story .sn-frame { width:var(--media-width,46%); }
  .about-story .sn-photo--left { justify-content:flex-start; padding-left:4rem; }
  .about-story .sn-photo--left .sn-frame { transform:rotate(-1.5deg); }
  .about-story .sn-photo--right { justify-content:flex-end; padding-right:4rem; }
  .about-story .sn-photo--right .sn-frame { transform:rotate(1.5deg); }
  .about-story .sn-photo--video { justify-content:flex-start; padding-left:4rem; }
  .about-story .sn-photo--video .sn-frame { transform:none; }
  .about-story .sn-closing { min-height:0; height:min(88vh,52rem); padding:0; display:grid; grid-template-columns:1fr 1fr; background:hsl(var(--sand)); }
  .about-story .sn-closing__bg { position:relative; grid-column:2; grid-row:1; object-position:50% 40%; min-height:0; }
  .about-story .sn-closing::after { display:none; }
  .about-story .sn-closing__content { grid-column:1; grid-row:1; align-self:center; justify-self:center; padding:2rem; }
  .about-story .sn-closing h2 { color:hsl(var(--foreground)); text-shadow:none; }
  .about-story .sn-cta { background:hsl(var(--charcoal)); color:hsl(var(--warm-white)); }
  .about-story .sn-cta:hover { background:hsl(var(--foreground)); }
  .about-story .sn-cta:focus-visible { outline-color:hsl(var(--charcoal)); }
}
@media(prefers-reduced-motion:reduce) { .about-story .sn-drink,.about-story .sn-drink.pop { animation:none; } .about-story .sn-cta { transition:none; } .about-story .sn-cta:hover { transform:none; } }

/* Match the breadcrumb and title spacing of the other public pages. */
@media(max-width:700px) { .about-story .sn-hero { padding-top:92px; } .about-story .sn-hero h1 + p { font-size:16px; } }
