/* The family band above the footer and the weather strip on the About page */
.fam{position:relative;overflow:hidden;background:var(--white);border-top:1px solid var(--line)}
.fam-in{display:grid;grid-template-columns:1fr 340px;gap:32px;align-items:end;min-height:250px}
.fam-text{padding:36px 0}
.fam-eyebrow{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 8px}
.fam-wx{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:clamp(1.35rem,2.6vw,1.8rem);line-height:1.2;color:var(--azul-deep);margin:0 0 8px}
.fam-joke{color:var(--ink);margin:0 0 12px;min-height:1.5em}
.fam-links{margin:0;font-size:.95rem}
.fam-links a{color:var(--azul);font-weight:600}
.fam-btn{background:none;border:0;padding:0;font:inherit;color:var(--azul);font-weight:600;text-decoration:underline;cursor:pointer}
.fam-src{font-size:.75rem;color:var(--ink-soft);margin:10px 0 0}
.fam-fig{display:flex;justify-content:center;align-items:flex-end;height:250px}
.fam-fig img{position:relative;z-index:1;display:block;height:232px;width:auto;max-width:100%;object-fit:contain;object-position:bottom;transform-origin:50% 100%;animation:fam-breathe 4s ease-in-out infinite}
.fam-fx{position:absolute;inset:0;pointer-events:none;z-index:2;-webkit-mask-image:linear-gradient(90deg,transparent 42%,#000 72%);mask-image:linear-gradient(90deg,transparent 42%,#000 72%)}

@keyframes fam-breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.012)}}
@keyframes fam-sway{0%,100%{transform:rotate(-.9deg)}50%{transform:rotate(1.3deg)}}
@keyframes fam-fall{to{background-position:0 120px}}
@keyframes fam-gale{to{background-position:-240px 120px}}
@keyframes fam-drift{0%,100%{transform:translateX(-26px)}50%{transform:translateX(26px)}}
@keyframes fam-dust{to{background-position:-160px 40px}}
@keyframes fam-glow{0%,100%{opacity:.55}50%{opacity:.95}}

.fam[data-w=clear] .fam-fx{background:radial-gradient(circle at 92% 14%,rgba(244,197,66,.6),rgba(244,197,66,0) 26%);animation:fam-glow 5s ease-in-out infinite}
.fam[data-w=cloudy] .fam-fx{background:radial-gradient(ellipse 15% 15% at 70% 18%,rgba(120,140,170,.32),transparent 100%),radial-gradient(ellipse 17% 16% at 90% 12%,rgba(120,140,170,.28),transparent 100%);animation:fam-drift 16s ease-in-out infinite}
.fam[data-w=rain] .fam-fx{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg stroke='%231B4F9C' stroke-opacity='.4' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M10 6l-1.500 11M34 24l-1.500 11M52 2l-1.500 11M22 44l-1.500 11M46 42l-1.500 11'/%3E%3C/g%3E%3C/svg%3E");animation:fam-fall .8s linear infinite}
.fam[data-w=storm] .fam-fx{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg stroke='%230B2A5B' stroke-opacity='.42' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M14 6l-11 7M38 24l-11 7M56 2l-11 7M26 44l-11 7M50 42l-11 7'/%3E%3C/g%3E%3C/svg%3E");animation:fam-gale .55s linear infinite}
.fam[data-w=storm] .fam-fig img{animation:fam-sway 1.5s ease-in-out infinite}
.fam[data-w=fog] .fam-fx{background:radial-gradient(ellipse 24% 24% at 72% 62%,rgba(255,255,255,.9),transparent 100%),radial-gradient(ellipse 24% 22% at 90% 34%,rgba(255,255,255,.82),transparent 100%);animation:fam-drift 11s ease-in-out infinite}
.fam[data-w=dust] .fam-fx{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='%23C9772B' fill-opacity='.42'%3E%3Ccircle cx='6' cy='8' r='1.300'/%3E%3Ccircle cx='24' cy='4' r='1'/%3E%3Ccircle cx='33' cy='22' r='1.400'/%3E%3Ccircle cx='14' cy='30' r='1'/%3E%3C/g%3E%3C/svg%3E");animation:fam-dust 5s linear infinite}

@media (max-width:760px){
  .fam-in{grid-template-columns:1fr;gap:0;min-height:0}
  .fam-text{padding:28px 0 10px}
  .fam-fig{height:214px}
  .fam-fig img{height:200px}
  .fam-fx{-webkit-mask-image:linear-gradient(180deg,transparent 50%,#000 66%);mask-image:linear-gradient(180deg,transparent 50%,#000 66%)}
}
@media (prefers-reduced-motion:reduce){
  .fam-fig img,.fam-fx{animation:none!important}
}

/* About page: six kinds of weather */
.fam-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 18px;margin:26px 0 8px;padding:0;list-style:none}
.prose .fam-grid li{margin:0;padding:0;text-align:center;font-size:.92rem;line-height:1.35;color:var(--ink-soft)}
.prose .fam-grid li::before{display:none}
.fam-grid img{display:block;height:170px;width:100%;object-fit:contain;object-position:bottom;margin:0 auto 10px;border-radius:0}
@media (max-width:560px){
  .fam-grid{grid-template-columns:repeat(2,1fr)}
  .fam-grid img{height:150px}
}