/* Design families (src/families.ts): the staging of our hand-made Pro pages, for any restaurant, bar or café.
   Colours come from the site's theme (the family's mood: --bg --surface --ink --muted --accent …), the mood's second
   colour is --fam-2, the type pairing is the family's. Pure CSS motion; calm for people who ask for less. */
.fam{--fam-2:var(--accent)}
.mood-amber{--fam-2:#ffd08a}.mood-wine{--fam-2:#f3b7c0}.mood-olive{--fam-2:#e9dca0}
.mood-ember{--fam-2:#ffb43b}.mood-chili{--fam-2:#b8f03c}.mood-neon{--fam-2:#7ad8ff}
.mood-cobalt{--fam-2:#f0603f;--az:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Crect width='72' height='72' fill='%23f8f4ec'/%3E%3Cg fill='none' stroke='%231f4fae' stroke-width='2.2'%3E%3Ccircle cx='36' cy='36' r='12'/%3E%3Cpath d='M36 8c6 8 6 14 0 20-6-6-6-12 0-20zM36 64c6-8 6-14 0-20-6 6-6 12 0 20zM8 36c8-6 14-6 20 0-6 6-12 6-20 0zM64 36c-8-6-14-6-20 0 6 6 12 6 20 0z'/%3E%3Cpath d='M0 12A12 12 0 0 0 12 0M60 0a12 12 0 0 0 12 12M72 60a12 12 0 0 0-12 12M12 72A12 12 0 0 0 0 60'/%3E%3C/g%3E%3Ccircle cx='36' cy='36' r='4' fill='%231f4fae'/%3E%3C/svg%3E")}.mood-terracotta{--fam-2:#2f6b5c;--az:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Crect width='72' height='72' fill='%23f7f0e7'/%3E%3Cg fill='none' stroke='%23b9502a' stroke-width='2.2'%3E%3Ccircle cx='36' cy='36' r='12'/%3E%3Cpath d='M36 8c6 8 6 14 0 20-6-6-6-12 0-20zM36 64c6-8 6-14 0-20-6 6-6 12 0 20zM8 36c8-6 14-6 20 0-6 6-12 6-20 0zM64 36c-8-6-14-6-20 0 6 6 12 6 20 0z'/%3E%3Cpath d='M0 12A12 12 0 0 0 12 0M60 0a12 12 0 0 0 12 12M72 60a12 12 0 0 0-12 12M12 72A12 12 0 0 0 0 60'/%3E%3C/g%3E%3Ccircle cx='36' cy='36' r='4' fill='%23b9502a'/%3E%3C/svg%3E")}.mood-sea{--fam-2:#e2a33d;--az:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Crect width='72' height='72' fill='%23f1f5f3'/%3E%3Cg fill='none' stroke='%230f7a72' stroke-width='2.2'%3E%3Ccircle cx='36' cy='36' r='12'/%3E%3Cpath d='M36 8c6 8 6 14 0 20-6-6-6-12 0-20zM36 64c6-8 6-14 0-20-6 6-6 12 0 20zM8 36c8-6 14-6 20 0-6 6-12 6-20 0zM64 36c-8-6-14-6-20 0 6 6 12 6 20 0z'/%3E%3Cpath d='M0 12A12 12 0 0 0 12 0M60 0a12 12 0 0 0 12 12M72 60a12 12 0 0 0-12 12M12 72A12 12 0 0 0 0 60'/%3E%3C/g%3E%3Ccircle cx='36' cy='36' r='4' fill='%230f7a72'/%3E%3C/svg%3E")}
.mood-sage{--fam-2:#30493a}.mood-citrus{--fam-2:#e8b51c}.mood-rose{--fam-2:#4a5d3f}

/* ---- the first screen, shared ---------------------------------------------------------------------------- */
.fh{min-height:max(100svh,720px)}
.fh .h-main{position:relative;z-index:3;align-items:end;padding-bottom:clamp(96px,14vh,150px)}
.fh .h-copy{max-width:min(780px,100%)}
.fh .h-title{font-size:calc(var(--fs) * var(--fk) * 1.1)}
.fh .h-tag{font-size:calc(var(--fs) * var(--fk) * .42)}
.fh .h-sub{max-width:34em}
.fh-evening .h-btn.ghost,.fh-fire .h-btn.ghost{color:var(--ink);background:color-mix(in oklab,var(--bg) 46%,transparent);box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--ink) 40%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.fh-img{display:block}
@keyframes fh-kb{from{transform:scale(1.14)}to{transform:scale(1.02)}}
@keyframes fh-fade{from{opacity:0}}
@keyframes fh-glow{50%{opacity:.55;transform:scale(.92)}}

/* ---- evening: one photo at night, a big outlined initial, candlelight ---------------------------------------- */
.fh-evening .fh-img,.fh-fire .fh-img{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;object-position:var(--fx,60%) var(--fy,45%);transform-origin:62% 45%;animation:fh-kb 20s ease-out both}
.fh-evening .fh-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,color-mix(in oklab,var(--bg) 78%,transparent) 0,transparent 24%),linear-gradient(90deg,color-mix(in oklab,var(--bg) 96%,transparent) 0,color-mix(in oklab,var(--bg) 82%,transparent) 34%,color-mix(in oklab,var(--bg) 32%,transparent) 66%,color-mix(in oklab,var(--bg) 14%,transparent)),linear-gradient(0deg,var(--bg) 2%,transparent 42%)}
.fh-evening:not(.has-ph) .fh-shade{background:radial-gradient(55% 60% at 72% 42%,color-mix(in oklab,var(--accent) 24%,transparent),transparent 70%)}
.fh-mark{position:absolute;z-index:-1;right:clamp(10px,6vw,110px);top:50%;translate:0 -52%;font:300 clamp(240px,36vw,560px)/.78 var(--display);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px color-mix(in oklab,var(--ink) 28%,transparent);pointer-events:none;animation:fh-fade 2.2s ease .4s both}
.fh-mark i{position:absolute;right:-.14em;bottom:.08em;width:.07em;height:.07em;border-radius:50%;background:var(--accent);box-shadow:0 0 .4em var(--accent);animation:fh-glow 3.6s ease-in-out 1.8s infinite}
.fh-evening .h-tag{color:var(--fam-2)}

/* ---- fire: a full-bleed photo, rising embers, a loud uppercase grotesque ----------------------------------- */
.fh-fire .fh-img{animation:fh-kb 20s ease-out both,fh-flicker 3.2s steps(1) 2s infinite}
@keyframes fh-flicker{0%{filter:brightness(1)}17%{filter:brightness(1.06)}34%{filter:brightness(.97)}51%{filter:brightness(1.04)}68%{filter:brightness(.99)}85%{filter:brightness(1.07)}}
.fh-fire .fh-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,color-mix(in oklab,var(--bg) 80%,transparent) 0,transparent 24%),linear-gradient(90deg,color-mix(in oklab,var(--bg) 97%,transparent) 0,color-mix(in oklab,var(--bg) 86%,transparent) 36%,color-mix(in oklab,var(--bg) 30%,transparent) 68%,color-mix(in oklab,var(--bg) 12%,transparent)),linear-gradient(0deg,var(--bg) 2%,transparent 40%)}
.fh-fire::after{content:'';position:absolute;left:0;right:0;bottom:0;height:46%;z-index:-1;background:radial-gradient(60% 80% at 70% 100%,color-mix(in oklab,var(--accent) 26%,transparent),transparent 70%);animation:fh-glow 4s ease-in-out infinite;pointer-events:none}
.fh-embers{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.fh-embers i{position:absolute;bottom:-12px;border-radius:50%;background:radial-gradient(circle,#fff3c4 0,var(--fam-2) 40%,var(--accent) 70%,transparent 72%);box-shadow:0 0 8px 2px color-mix(in oklab,var(--accent) 70%,transparent);opacity:0;animation:fh-rise linear infinite}
@keyframes fh-rise{0%{transform:translate(0,0) scale(1);opacity:0}8%{opacity:1}60%{opacity:.85}100%{transform:translate(var(--dx),-92vh) scale(.3);opacity:0}}
.fh-embers i:nth-child(1){left:33.1%;width:3px;height:4px;animation-duration:9.1s;animation-delay:-0.8s;--dx:4px}
.fh-embers i:nth-child(2){left:37.1%;width:2px;height:5px;animation-duration:6.7s;animation-delay:-0.9s;--dx:-10px}
.fh-embers i:nth-child(3){left:25.1%;width:5px;height:4px;animation-duration:5.8s;animation-delay:-6.2s;--dx:54px}
.fh-embers i:nth-child(4){left:62.5%;width:5px;height:2px;animation-duration:8.7s;animation-delay:-4.4s;--dx:57px}
.fh-embers i:nth-child(5){left:6.5%;width:3px;height:3px;animation-duration:7.8s;animation-delay:-5.9s;--dx:9px}
.fh-embers i:nth-child(6){left:55.8%;width:3px;height:2px;animation-duration:8.7s;animation-delay:-7.0s;--dx:-15px}
.fh-embers i:nth-child(7){left:54.6%;width:2px;height:5px;animation-duration:5.8s;animation-delay:-2.3s;--dx:22px}
.fh-embers i:nth-child(8){left:43.0%;width:3px;height:4px;animation-duration:8.7s;animation-delay:-5.0s;--dx:-24px}
.fh-embers i:nth-child(9){left:78.3%;width:3px;height:2px;animation-duration:8.7s;animation-delay:-5.8s;--dx:45px}
.fh-embers i:nth-child(10){left:72.0%;width:3px;height:5px;animation-duration:10.9s;animation-delay:-1.3s;--dx:-10px}
.fh-embers i:nth-child(11){left:74.7%;width:3px;height:4px;animation-duration:7.8s;animation-delay:-10.6s;--dx:-51px}
.fh-embers i:nth-child(12){left:55.6%;width:3px;height:3px;animation-duration:9.3s;animation-delay:-6.5s;--dx:10px}
.fh-embers i:nth-child(13){left:45.8%;width:2px;height:3px;animation-duration:8.1s;animation-delay:-7.3s;--dx:-53px}
.fh-embers i:nth-child(14){left:69.3%;width:5px;height:4px;animation-duration:7.1s;animation-delay:-4.2s;--dx:20px}
.fh-embers i:nth-child(15){left:4.2%;width:4px;height:3px;animation-duration:6.4s;animation-delay:-1.3s;--dx:-53px}
.fh-embers i:nth-child(16){left:75.8%;width:3px;height:3px;animation-duration:7.7s;animation-delay:-10.1s;--dx:-0px}
.fh-embers i:nth-child(17){left:18.0%;width:4px;height:5px;animation-duration:7.0s;animation-delay:-1.5s;--dx:-8px}
.fh-embers i:nth-child(18){left:54.8%;width:4px;height:3px;animation-duration:9.3s;animation-delay:-4.2s;--dx:-32px}
.fh-embers i:nth-child(19){left:10.0%;width:3px;height:3px;animation-duration:9.1s;animation-delay:-0.1s;--dx:40px}
.fh-embers i:nth-child(20){left:19.5%;width:3px;height:2px;animation-duration:6.3s;animation-delay:-5.9s;--dx:13px}
.fh-embers i:nth-child(21){left:32.6%;width:3px;height:5px;animation-duration:10.7s;animation-delay:-7.2s;--dx:29px}
.fh-embers i:nth-child(22){left:45.8%;width:5px;height:4px;animation-duration:7.7s;animation-delay:-4.3s;--dx:-2px}
.fh-embers i:nth-child(23){left:40.4%;width:3px;height:2px;animation-duration:10.9s;animation-delay:-4.8s;--dx:-47px}
.fh-embers i:nth-child(24){left:59.7%;width:2px;height:2px;animation-duration:8.6s;animation-delay:-5.9s;--dx:54px}
.fh-fire .h-title{text-transform:uppercase;font-weight:800;letter-spacing:-.05em;line-height:.86}
.fh-fire .h-tag{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--fam-2);font-size:calc(var(--fs) * var(--fk) * .6)}
.fh-fire .h-tag em{color:var(--accent)}
.fh-fire .h-btn{border-radius:14px}

/* ---- azulejo: light, a tiled panel behind an arched photo, a turning rosette -------------------------------- */
.fh-azulejo .h-main{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(30px,5vw,80px);align-items:center;padding-top:clamp(12px,2vw,30px)}
.fh-azulejo .h-tag{color:var(--accent)}
.fh-art{position:relative;justify-self:center;width:min(500px,100%)}
.fh-tiles{position:absolute;inset:44px -40px -40px 44px;border-radius:999px 999px 30px 30px;background:var(--az) 0 0/64px 64px;box-shadow:0 0 0 1px color-mix(in oklab,var(--ink) 12%,transparent);animation:fh-tiles 1.4s var(--ease) .3s both}
@keyframes fh-tiles{from{opacity:0;transform:translate(-20px,-20px)}}
.fh-arch{position:relative;margin:0;aspect-ratio:4/5;border-radius:999px 999px 30px 30px;overflow:hidden;background:var(--az) 0 0/48px 48px;box-shadow:0 50px 90px -50px color-mix(in oklab,var(--ink) 55%,transparent),0 0 0 8px var(--surface)}
.fh-arch .fh-img,.fh-blob .fh-img{width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) var(--fy,50%);transform:scale(1.1);animation:fh-kb2 16s ease-out .2s both}
@keyframes fh-kb2{to{transform:scale(1.02)}}
.fh .fh-rosette{position:absolute;left:-30px;top:-30px;width:100px;height:100px;padding:8px;border-radius:50%;background:var(--surface);fill:none;stroke:var(--accent);stroke-width:2.4;box-shadow:0 16px 40px -18px color-mix(in oklab,var(--ink) 50%,transparent);animation:fh-spin 48s linear infinite}
.fh-rosette .dot{fill:var(--fam-2);stroke:none}
@keyframes fh-spin{to{transform:rotate(360deg)}}

/* ---- garden: cream and sage, an organic frame, sunlight moving through leaves -------------------------------- */
.fh-garden .h-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center;padding-top:clamp(12px,2vw,30px)}
.fh-garden .h-title{font-weight:300;font-variation-settings:'SOFT' 100,'opsz' 144}
.fh-garden .h-tag{color:var(--accent);font-weight:300;font-style:italic;font-variation-settings:'SOFT' 100}
.fh-sun{position:absolute;inset:-20%;z-index:-1;pointer-events:none;background:radial-gradient(18% 14% at 20% 30%,rgb(242 193 78/.26),transparent 70%),radial-gradient(14% 12% at 60% 72%,rgb(242 193 78/.18),transparent 70%),radial-gradient(22% 16% at 86% 20%,rgb(242 193 78/.16),transparent 70%);animation:fh-dapple 14s ease-in-out infinite alternate}
@keyframes fh-dapple{to{transform:translate(3%,-2%) rotate(2deg)}}
.fh-blob{position:relative;justify-self:center;width:min(520px,100%);aspect-ratio:4/5;margin:0;border-radius:46% 54% 42% 58% / 38% 40% 60% 62%;overflow:hidden;background:color-mix(in oklab,var(--fam-2) 26%,var(--bg));box-shadow:0 60px 100px -60px color-mix(in oklab,var(--ink) 70%,transparent);animation:fh-morph 18s ease-in-out infinite alternate}
@keyframes fh-morph{to{border-radius:56% 44% 52% 48% / 46% 36% 64% 54%}}
.fh .fh-leaves{position:absolute;inset:-10%;width:120%;height:120%;max-width:none;pointer-events:none;mix-blend-mode:multiply;opacity:.36;filter:blur(7px)}
.fh-leaves path{fill:#1d2b1f}.fh-leaves g{transform-box:view-box;transform-origin:300px 0}
.fh-leaves .l1{animation:fh-sway 7s ease-in-out infinite alternate}.fh-leaves .l2{animation:fh-sway 9s ease-in-out -3s infinite alternate-reverse}.fh-leaves .l3{animation:fh-sway 11s ease-in-out -5s infinite alternate}
@keyframes fh-sway{from{transform:rotate(-3deg) translate(-8px,0)}to{transform:rotate(3deg) translate(10px,6px)}}

/* the first screen waits for nothing: hide nothing that has no photo */
.fh:not(.has-ph) .fh-arch,.fh:not(.has-ph) .fh-blob{box-shadow:0 0 0 8px var(--surface)}

/* ---- the band of photos ------------------------------------------------------------------------------------- */
.fam-band{position:relative;padding:clamp(36px,6vw,80px) clamp(16px,4vw,64px);background:var(--bg);overflow:clip}
.fb-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,18px);max-width:1280px;margin:0 auto}
.fb-ph{margin:0;border-radius:22px;overflow:hidden;aspect-ratio:3/4;background:var(--surface);box-shadow:0 30px 60px -40px rgb(0 0 0/.6)}
.fb-ph:nth-child(even){translate:0 clamp(16px,3vw,44px)}
.fb-ph img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease,ease)}
.fb-ph:hover img{transform:scale(1.06)}
.fam-fire .fb-ph{border-radius:6px;box-shadow:0 0 0 1px color-mix(in oklab,var(--accent) 30%,transparent),0 30px 60px -40px rgb(0 0 0/.8)}
.fam-azulejo .fb-ph{border-radius:999px 999px 18px 18px;box-shadow:0 0 0 6px var(--surface),0 30px 60px -40px rgb(0 0 0/.35)}
.fam-garden .fb-ph{border-radius:44% 56% 40% 60% / 34% 36% 64% 66%}
.fam-garden .fb-ph:nth-child(even){border-radius:56% 44% 58% 42% / 40% 52% 48% 60%}
@supports (animation-timeline: view()){
  .fb-ph img{transform:scale(1.14);animation:fb-par linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  @keyframes fb-par{from{translate:0 -5%}to{translate:0 5%}}
}

/* ---- the sections, in the family's manner ----------------------------------------------------------------------- */
.fam .s-title em{color:var(--accent)}
.fam-evening .s-sec.alt,.fam-fire .s-sec.alt{background:var(--surface)}
.fam-evening .s-eyebrow::before{background:var(--fam-2)}
.fam-fire .s-title{text-transform:uppercase;font-weight:800;letter-spacing:-.045em;line-height:.9}
.fam-fire .s-title em{font-family:'Instrument Serif',serif;text-transform:none;font-weight:400;letter-spacing:-.01em;color:var(--fam-2)}
.fam-fire .s-eyebrow{color:var(--accent)}
.fam-fire .card{border-radius:10px;transition:box-shadow .4s,transform .4s}.fam-fire .card:hover{transform:translateY(-3px);box-shadow:0 0 0 1px var(--accent),0 24px 50px -30px var(--accent)}
/* fire: the hours as a scoreboard */
.fam-fire .hr-card{background:#09080a;border-radius:18px;box-shadow:0 0 0 2px color-mix(in oklab,var(--fam-2) 55%,transparent),0 0 0 8px #0d0b0c,0 50px 100px -40px #000;background-image:radial-gradient(rgb(255 255 255/.05) 1px,transparent 1.2px);background-size:9px 9px}
.fam-fire .hr-list li span:last-child{font-family:'Space Grotesk Variable',ui-monospace,monospace;font-variant-numeric:tabular-nums;letter-spacing:.06em;color:var(--fam-2);text-shadow:0 0 10px color-mix(in oklab,var(--fam-2) 50%,transparent)}
.fam-fire .hr-list li.today span:last-child{color:#fff;text-shadow:0 0 12px var(--accent)}
/* azulejo: a strip of tiles between the sections */
.fam-azulejo .s-sec.alt{background:var(--surface)}
.fam-azulejo .s-sec.alt::before{content:'';position:absolute;left:0;right:0;top:0;height:22px;background:var(--az) 0 0/22px 22px;opacity:.9}
.fam-azulejo .card,.fam-azulejo .hr-card{border-radius:28px 28px 14px 14px}
.fam-azulejo .s-eyebrow::before{background:var(--fam-2)}
/* garden: the hours on a chalkboard */
.fam-garden .s-sec.alt{background:color-mix(in oklab,var(--surface) 70%,var(--bg))}
.fam-garden .s-title{font-weight:300;font-variation-settings:'SOFT' 100}
.fam-garden .hr-card{background:radial-gradient(120% 100% at 30% 20%,#35503f,#22362a 70%);color:#f3f0e6;box-shadow:0 0 0 12px #8a6a45,0 0 0 14px #6e5233,0 50px 90px -40px rgb(31 42 34/.8)}
.fam-garden .hr-card .hr-list li,.fam-garden .hr-card .hr-note{color:#e9ece2;border-color:rgb(255 255 255/.14)}
.fam-garden .hr-card .hr-list li.today span:last-child{color:#f2c14e}
.fam-garden .hr-card .hr-ico{color:#f2c14e}
.fam-garden .card{border-radius:26px}

/* dark families: a footer that belongs to the night */
.fam.m-dark .s-foot{background:color-mix(in oklab,var(--bg) 70%,#000);color:var(--muted);border-top:1px solid color-mix(in oklab,var(--ink) 10%,transparent)}
.fam.m-dark .s-foot strong{color:var(--ink)}

/* ---- phones ------------------------------------------------------------------------------------------------ */
@media (max-width:900px){
  .fh-azulejo .h-main,.fh-garden .h-main{grid-template-columns:1fr;padding-bottom:110px}
  .fh-art,.fh-blob{width:min(380px,82%);margin:18px auto 0}
  .fh .fh-rosette{width:72px;height:72px;left:-18px;top:-18px}
  .fb-track{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fh-mark{font-size:clamp(200px,56vw,320px);top:30%;right:-12px}
  /* on a phone the photo fills the screen: the words sit low, on a deeper shade, where the thumb is */
  .fh-evening .h-main,.fh-fire .h-main{align-content:end;padding-bottom:max(36px,env(safe-area-inset-bottom))}
  .fh-evening .fh-shade,.fh-fire .fh-shade{background:linear-gradient(180deg,color-mix(in oklab,var(--bg) 82%,transparent) 0,transparent 20%),linear-gradient(0deg,var(--bg) 0,color-mix(in oklab,var(--bg) 92%,transparent) 30%,color-mix(in oklab,var(--bg) 40%,transparent) 62%,transparent 80%)}
  .fh-evening .fh-mark{top:10%}
}
@media (prefers-reduced-motion:reduce){
  .fh *,.fh::after,.fam-band *{animation:none!important;transition:none!important}
  .fh-embers{display:none}
}