/* 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}
.mood-claret{--fam-2:#b08d57}.mood-alpine{--fam-2:#b8862f}.mood-slate{--fam-2:#c26b3c}
/* services */
.mood-navy{--fam-2:#b58a3c}.mood-forest{--fam-2:#b48a4a}.mood-bordeaux{--fam-2:#a88a5b}
.mood-brass{--fam-2:#e6cf98}.mood-teal{--fam-2:#b4e3dd}.mood-copper{--fam-2:#f0b893}
.mood-sky{--fam-2:#8cc7c0}.mood-meadow{--fam-2:#e3b78c}.mood-sand{--fam-2:#9dbdb0}
.mood-blush{--fam-2:#d9a58f}.mood-champagne{--fam-2:#d8bfa0}.mood-lilac{--fam-2:#d6a6c3}
.mood-mono{--fam-2:#111111}.mood-ultra{--fam-2:#f2b33d}.mood-clay{--fam-2:#2e5f5a}
/* trades */
.mood-signal{--fam-2:#1f2a37}.mood-royal{--fam-2:#f59e0b}.mood-emerald{--fam-2:#f2c94c}
.mood-concrete{--fam-2:#f2c200}.mood-brick{--fam-2:#2c3e50}.mood-steel{--fam-2:#e8743b}
.mood-oak{--fam-2:#3f5b3a}.mood-walnut{--fam-2:#b88a4a}.mood-moss{--fam-2:#b5793c}
.mood-chalk{--fam-2:#2a6f6a}.mood-ochre{--fam-2:#d6a23a}.mood-lagoon{--fam-2:#e07a5f}
.mood-graphite{--fam-2:#ffc24d}.mood-volt{--fam-2:#ffffff}.mood-arc{--fam-2:#9ee7ff}

/* ---- 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-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)}}

/* ---- linen: white linen and their colour, one framed photo, a round stamp with their name -------------------- */
.fh-linen{--fl-gap:clamp(30px,5vw,84px)}
.fh-linen .h-main{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:var(--fl-gap);align-items:center;padding-top:clamp(12px,2vw,30px)}
.fh-linen .h-title{font-weight:400;letter-spacing:-.025em;line-height:.94}
.fh-linen .h-eyebrow{display:inline-flex;align-items:center;gap:.9em;color:var(--accent-text);letter-spacing:.2em}
.fh-linen .h-eyebrow::before{content:'';width:2.6em;height:1px;background:currentColor}
.fh-linen .h-tag{color:var(--accent-text);font-style:italic}
.fh-linen .h-sub{color:var(--muted)}
.fl-rule{position:absolute;left:clamp(16px,4vw,64px);right:clamp(16px,4vw,64px);top:clamp(70px,9vh,96px);height:1px;background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--ink) 22%,transparent) 12%,color-mix(in oklab,var(--ink) 22%,transparent) 88%,transparent);transform-origin:left;animation:fl-draw 1.6s var(--ease) .2s both}
@keyframes fl-draw{from{transform:scaleX(0)}}
.fl-art{position:relative;justify-self:center;width:min(500px,100%);padding:0 0 28px 28px}
.fl-block{position:absolute;left:0;bottom:0;width:72%;height:62%;background:var(--accent);opacity:.92;animation:fl-in 1.3s var(--ease) .35s both}
@keyframes fl-in{from{opacity:0;translate:-24px 24px}}
.fl-frame{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--surface);box-shadow:0 0 0 1px color-mix(in oklab,var(--ink) 14%,transparent),0 0 0 10px var(--surface),0 0 0 11px color-mix(in oklab,var(--ink) 16%,transparent),0 60px 90px -60px color-mix(in oklab,var(--ink) 70%,transparent)}
.fl-frame .fh-img{width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) var(--fy,50%);transform:scale(1.12);animation:fh-kb2 18s ease-out .2s both}
.fh-linen:not(.has-ph) .fl-frame{background:radial-gradient(70% 60% at 50% 40%,color-mix(in oklab,var(--accent) 16%,var(--surface)),var(--surface))}
.fl-stamp{position:absolute;right:-26px;top:-30px;width:clamp(112px,11vw,150px);aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:var(--surface);color:var(--accent-text);box-shadow:0 18px 44px -20px color-mix(in oklab,var(--ink) 60%,transparent);animation:fh-fade 1.4s ease .8s both}
.fl-stamp svg{position:absolute;inset:0;width:100%;height:100%;animation:fh-spin 60s linear infinite}
.fl-stamp circle{fill:none;stroke:currentColor}.fl-stamp .o{stroke-width:1.2}.fl-stamp .i{stroke-width:.8;opacity:.5}
.fl-stamp text{fill:currentColor;font:600 9.4px/1 var(--sans,'Inter Variable',system-ui,sans-serif);letter-spacing:.18em}
.fl-stamp b{position:relative;font:400 clamp(36px,3.6vw,50px)/1 var(--display);letter-spacing:-.02em;color:var(--ink)}
.fl-stamp .mk-logo{display:grid;place-items:center;width:44%;aspect-ratio:1} /* their own logo in the seal, never an initial */
.fl-stamp .mk-logo img{display:block;max-width:100%;max-height:72%;object-fit:contain}
.fh-moodtag{position:absolute;z-index:4;right:12px;bottom:12px;padding:.32em .7em;border-radius:999px;background:color-mix(in oklab,var(--bg) 78%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--muted);font:600 11px/1.2 var(--sans,'Inter Variable',system-ui,sans-serif);letter-spacing:.04em;pointer-events:none}
.fh-evening>.fh-moodtag,.fh-fire>.fh-moodtag{right:clamp(16px,4vw,64px);bottom:clamp(16px,3vh,28px)}
.fh-blob .fh-moodtag,.fh-arch .fh-moodtag{right:auto;left:50%;translate:-50% 0;bottom:8%}
.fam-linen .s-sec.alt{background:var(--surface)}
.fam-linen .s-sec+.s-sec{border-top:1px solid var(--line)}
.fam-linen .s-eyebrow{color:var(--accent-text);letter-spacing:.2em}
.fam-linen .s-eyebrow::before{background:var(--fam-2)}
.fam-linen .s-title{font-weight:400}
.fam-linen .mg h3{text-align:center;font-weight:400;letter-spacing:.16em;text-transform:uppercase;font-size:.95rem;color:var(--accent-text);border-bottom:1px solid var(--line);padding-bottom:.6em}
.fam-linen .hr-card,.fam-linen .card{border-radius:2px;box-shadow:0 0 0 1px var(--line),0 0 0 7px var(--surface),0 0 0 8px var(--line)}
.fam-linen .fb-ph{border-radius:2px;box-shadow:0 0 0 1px var(--line),0 0 0 8px var(--surface),0 30px 60px -40px rgb(0 0 0/.35)}

/* ==== services (src/families.ts): calm and exact where trust matters; every first screen reads well without a photo ==== */
.fh-ledger .h-main,.fh-calm .h-main,.fh-salon .h-main,.fh-studio .h-main{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(30px,5vw,84px);align-items:center;padding-top:clamp(12px,2vw,30px)}
.fh-moodtag{z-index:4}

/* ---- ledger: white paper, a ruled grid with a margin line, their initials as a seal, their services as an index ---- */
.fh-ledger .h-title{font-weight:400;letter-spacing:-.025em;line-height:.95}
.fh-ledger .h-eyebrow{display:inline-flex;align-items:center;gap:.9em;color:var(--accent-text);letter-spacing:.22em}
.fh-ledger .h-eyebrow::before{content:'';width:2.6em;height:1px;background:currentColor}
.fh-ledger .h-tag{color:var(--accent-text);font-style:italic}
.fh-ledger .h-sub{color:var(--muted)}
.fh-ledger .h-btn{border-radius:3px}
.fg-rules{position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:repeating-linear-gradient(0deg,color-mix(in oklab,var(--ink) 7%,transparent) 0 1px,transparent 1px 36px);-webkit-mask:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent);mask:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent);animation:fh-fade 2.4s ease both}
.fg-rules::before{content:'';position:absolute;top:0;bottom:0;left:clamp(14px,5vw,80px);width:1px;background:color-mix(in oklab,var(--accent) 50%,transparent);transform-origin:top;animation:fg-draw 1.6s var(--ease) .2s both}
@keyframes fg-draw{from{transform:scaleY(0)}}
.fg-art{position:relative;justify-self:center;width:min(500px,100%)}
.fg-frame{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--surface);box-shadow:0 0 0 1px var(--line),0 0 0 10px var(--surface),0 0 0 11px var(--line),0 60px 90px -60px rgb(0 0 0/.45);animation:fh-fade 1.2s ease .15s both}
.fg-frame .fh-moodtag{top:12px;bottom:auto} /* the index card covers the frame's foot */
.fg-frame .fh-img{width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) var(--fy,50%);transform:scale(1.1);animation:fh-kb2 18s ease-out .2s both}
.fg-card{position:relative;margin:-40px 0 0 clamp(18px,4vw,52px);padding:26px 26px 22px 118px;min-height:136px;background:var(--surface);box-shadow:0 0 0 1px var(--line),0 40px 70px -50px rgb(0 0 0/.42);animation:fl-in 1.2s var(--ease) .5s both}
.fg-card.solo{margin:0;padding:clamp(30px,4vw,44px) clamp(24px,3vw,38px) clamp(26px,3vw,34px) clamp(132px,13vw,160px)}
.fg-seal{position:absolute;left:18px;top:50%;translate:0 -50%;width:86px;aspect-ratio:1;display:grid;place-items:center;color:var(--accent-text)}
.fg-card.solo .fg-seal{width:clamp(96px,10vw,118px);left:clamp(18px,2vw,26px)}
.fg-card:not(:has(.fg-index)){padding:30px;min-height:0;display:grid;place-items:center}
.fg-card:not(:has(.fg-index)) .fg-seal{position:relative;left:auto;top:auto;translate:none;width:132px}
.fg-seal svg{position:absolute;inset:0;width:100%;height:100%;animation:fh-spin 80s linear infinite}
.fg-seal circle{fill:none;stroke:currentColor}.fg-seal .o{stroke-width:1.3}.fg-seal .o2{stroke-width:.5;opacity:.6}.fg-seal .i{stroke-width:.8;opacity:.45}
.fg-seal text{fill:currentColor;font:600 9.2px/1 'Inter Variable',system-ui,sans-serif;letter-spacing:.18em}
.fg-seal b{position:relative;font:400 clamp(24px,2.4vw,32px)/1 var(--display);letter-spacing:.04em;color:var(--ink)}
/* their own mark in a seal's, a maker's mark's or a ticket's centre: their logo, or a point of their colour (never initials) */
.fg-seal .mk-logo,.fk-mark .mk-logo{display:grid;place-items:center;width:44%;aspect-ratio:1}
.fg-seal .mk-logo img,.fk-mark .mk-logo img{display:block;max-width:100%;max-height:72%;object-fit:contain}
.fg-seal .mk-dot,.fk-mark .mk-dot{position:relative;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px color-mix(in oklab,var(--accent) 16%,transparent)}
.fg-index{margin:0;padding:0;list-style:none;display:grid;gap:10px;font-size:.95rem;line-height:1.3;color:var(--ink)}
.fg-index li{display:grid;grid-template-columns:2.6em 1fr;align-items:baseline;padding-bottom:10px;border-bottom:1px solid var(--line);animation:fg-row .9s var(--ease) both}
.fg-index li:last-child{border-bottom:0;padding-bottom:0}
.fg-index li:nth-child(1){animation-delay:.95s}.fg-index li:nth-child(2){animation-delay:1.1s}.fg-index li:nth-child(3){animation-delay:1.25s}.fg-index li:nth-child(4){animation-delay:1.4s}
.fg-index span{font:600 .74rem/1 'Inter Variable',system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.1em;color:var(--accent-text)}
@keyframes fg-row{from{opacity:0;translate:0 10px}}
.fam-ledger .s-sec.alt{background:var(--surface)}
.fam-ledger .s-sec+.s-sec{border-top:1px solid var(--line)}
.fam-ledger .s-eyebrow{color:var(--accent-text);letter-spacing:.22em}
.fam-ledger .s-eyebrow::before{background:var(--fam-2)}
.fam-ledger .s-title{font-weight:400;letter-spacing:-.02em}
.fam-ledger .card{border-radius:3px;box-shadow:0 0 0 1px var(--line);background:var(--surface)}
.fam-ledger .card-n{font-family:'Inter Variable',sans-serif;font-variant-numeric:tabular-nums;color:var(--accent-text);letter-spacing:.1em}
.fam-ledger .hr-card{border-radius:3px;box-shadow:0 0 0 1px var(--line),0 0 0 8px var(--surface),0 0 0 9px var(--line)}
.fam-ledger .fb-ph{border-radius:3px;box-shadow:0 0 0 1px var(--line),0 0 0 8px var(--surface),0 30px 60px -40px rgb(0 0 0/.35)}

/* ---- vault: deep dark, a fine golden frame, their initials large and quiet ---------------------------------- */
.fh-vault .fh-img{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;object-position:var(--fx,62%) var(--fy,45%);filter:saturate(.85);animation:fh-kb 22s ease-out both}
.fh-vault .fh-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,var(--bg) 0,color-mix(in oklab,var(--bg) 92%,transparent) 38%,color-mix(in oklab,var(--bg) 55%,transparent) 70%,color-mix(in oklab,var(--bg) 30%,transparent)),linear-gradient(0deg,var(--bg) 0,transparent 30%)}
.fh-vault:not(.has-ph) .fh-shade{background:radial-gradient(50% 60% at 78% 40%,color-mix(in oklab,var(--accent) 16%,transparent),transparent 70%)}
.fv-frame{position:absolute;inset:clamp(12px,2vw,26px);z-index:-1;pointer-events:none;border:1px solid color-mix(in oklab,var(--accent) 38%,transparent);animation:fh-fade 2s ease .3s both}
.fv-frame::before,.fv-frame::after{content:'';position:absolute;width:42px;height:42px;border:1px solid var(--accent)}
.fv-frame::before{left:-6px;top:-6px;border-right:0;border-bottom:0}.fv-frame::after{right:-6px;bottom:-6px;border-left:0;border-top:0}
.fh-vault .h-title{font-weight:400;letter-spacing:-.02em}
.fh-vault .h-eyebrow{color:var(--accent);letter-spacing:.24em}
.fh-vault .h-tag{color:var(--fam-2);font-style:italic}
.fh-vault .h-btn{border-radius:3px}
.fh-vault .h-btn.ghost{color:var(--ink);background:transparent;box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--accent) 60%,transparent)}
.fh-vault>.fh-moodtag{right:clamp(30px,4vw,64px);bottom:clamp(30px,4vh,44px)}
.fam-vault .s-sec.alt{background:var(--surface)}
.fam-vault .s-eyebrow{color:var(--accent);letter-spacing:.22em}
.fam-vault .s-eyebrow::before{background:var(--accent)}
.fam-vault .s-title{font-weight:400}
.fam-vault .card,.fam-vault .hr-card{border-radius:3px;background:var(--surface);box-shadow:0 0 0 1px color-mix(in oklab,var(--accent) 26%,transparent)}
.fam-vault .card-n{color:var(--accent)}

/* ---- calm: airy, soft shapes drifting, one photo in a rounded frame ----------------------------------------- */
.fc-soft{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.fc-soft i{position:absolute;border-radius:50%;filter:blur(40px);opacity:.55;animation:fc-drift 18s ease-in-out infinite alternate}
.fc-soft i:nth-child(1){width:46vw;height:46vw;left:-10vw;top:-14vw;background:color-mix(in oklab,var(--fam-2) 55%,var(--bg))}
.fc-soft i:nth-child(2){width:34vw;height:34vw;right:-8vw;top:18%;background:color-mix(in oklab,var(--accent) 22%,var(--bg));animation-duration:22s;animation-delay:-6s}
.fc-soft i:nth-child(3){width:26vw;height:26vw;left:38%;bottom:-12vw;background:color-mix(in oklab,var(--fam-2) 40%,var(--bg));animation-duration:26s;animation-delay:-11s}
@keyframes fc-drift{to{transform:translate(4vw,3vw) scale(1.08)}}
.fh-calm .h-title{font-weight:500;letter-spacing:-.03em}
.fh-calm .h-tag{color:var(--accent-text)}
.fh-calm .h-btn{border-radius:999px}
.fc-frame{position:relative;justify-self:center;width:min(500px,100%);aspect-ratio:1;margin:0;border-radius:42% 58% 50% 50% / 48% 44% 56% 52%;overflow:hidden;background:color-mix(in oklab,var(--fam-2) 30%,var(--surface));box-shadow:0 0 0 10px color-mix(in oklab,var(--surface) 80%,transparent),0 60px 100px -60px color-mix(in oklab,var(--ink) 50%,transparent);animation:fh-morph 14s ease-in-out infinite alternate}
.fc-frame .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}
.fc-empty,.fs-empty,.fst-empty,.fm-empty,.fk-empty,.fw-empty,.ft-empty{position:absolute;inset:0;display:grid;place-items:center}
/* a trade without a photo yet: a line drawing of its work, drawing itself in */
.ft-empty{border-radius:14px;background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.fh .fh-line{width:70%;height:70%;fill:none;stroke:color-mix(in oklab,var(--accent) 78%,var(--ink));stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fh-line .thin{stroke-width:1.1;opacity:.6}
.fh-line *{stroke-dasharray:900;stroke-dashoffset:900;animation:fk-draw 2.8s var(--ease) .35s forwards}
.fc-empty .mk-logo,.fs-empty .mk-logo,.fst-empty .mk-logo,.fw-empty .mk-logo{display:grid;place-items:center;width:56%;height:40%}.fc-empty .mk-logo img,.fs-empty .mk-logo img,.fst-empty .mk-logo img,.fw-empty .mk-logo img{max-width:100%;max-height:100%;object-fit:contain}
.fc-empty b,.fs-empty b,.fst-empty b,.fm-empty b,.fk-empty b,.fw-empty b{font:300 clamp(90px,12vw,170px)/1 var(--display);letter-spacing:-.04em;color:color-mix(in oklab,var(--accent) 70%,var(--ink))}
.fc-frame .fh-moodtag{right:auto;left:50%;translate:-50% 0;bottom:9%}
.fam-calm .s-sec.alt{background:color-mix(in oklab,var(--surface) 70%,var(--bg))}
.fam-calm .s-eyebrow{color:var(--accent-text)}
.fam-calm .card,.fam-calm .hr-card{border-radius:28px;box-shadow:0 0 0 1px var(--line),0 30px 60px -48px color-mix(in oklab,var(--ink) 50%,transparent)}
.fam-calm .fb-ph{border-radius:36px}

/* ---- salon: fashion-editorial, a tall arch, a large italic serif, their initial as a monogram ------------------- */
.fh-salon .h-title{font-weight:300;letter-spacing:-.03em;line-height:.92}
.fh-salon .h-tag{color:var(--accent-text);font-style:italic;font-weight:300}
.fh-salon .h-eyebrow{letter-spacing:.3em;color:var(--muted)}
.fh-salon .h-btn{border-radius:999px}
.fs-art{position:relative;justify-self:center;width:min(440px,100%)}
.fs-arch{position:relative;margin:0;aspect-ratio:3/4.2;border-radius:999px 999px 0 0;overflow:hidden;background:color-mix(in oklab,var(--fam-2) 34%,var(--surface));box-shadow:0 0 0 1px var(--line),0 0 0 14px var(--bg),0 0 0 15px color-mix(in oklab,var(--accent) 30%,transparent),0 70px 110px -70px color-mix(in oklab,var(--ink) 55%,transparent);animation:fs-rise 1.4s var(--ease) .2s both}
@keyframes fs-rise{from{opacity:0;translate:0 30px;clip-path:inset(100% 0 0 0 round 999px 999px 0 0)}to{clip-path:inset(0 0 0 0 round 999px 999px 0 0)}}
.fs-arch .fh-img{width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) var(--fy,45%);transform:scale(1.12);animation:fh-kb2 18s ease-out .3s both}
.fs-arch .fh-moodtag{right:auto;left:50%;translate:-50% 0;bottom:6%}
.fh-salon~.svc-strip span{font-style:italic;font-weight:300}
.fam-salon .s-eyebrow{letter-spacing:.3em;color:var(--muted)}
.fam-salon .s-title{font-weight:300}
.fam-salon .s-title em{font-style:italic}
.fam-salon .card{border-radius:999px 999px 18px 18px;padding-top:2.2em;text-align:center}
.fam-salon .hr-card{border-radius:24px}
.fam-salon .fb-ph{border-radius:999px 999px 14px 14px}

/* ---- studio: a bold grotesque, a visible grid, an offset photo on a colour block ------------------------------- */
.fst-grid{position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(90deg,color-mix(in oklab,var(--ink) 7%,transparent) 1px,transparent 1px),linear-gradient(0deg,color-mix(in oklab,var(--ink) 7%,transparent) 1px,transparent 1px);background-size:clamp(48px,8vw,96px) clamp(48px,8vw,96px);-webkit-mask:radial-gradient(80% 70% at 70% 40%,#000,transparent);mask:radial-gradient(80% 70% at 70% 40%,#000,transparent);animation:fh-fade 2s ease both}
.fh-studio .h-title{text-transform:uppercase;font-weight:800;letter-spacing:-.05em;line-height:.86}
.fh-studio .h-tag{color:var(--accent-text);font-weight:700;letter-spacing:-.02em}
.fh-studio .h-eyebrow{font-family:'Space Grotesk Variable',ui-monospace,monospace;letter-spacing:.14em}
.fh-studio .h-btn{border-radius:0}
.fst-art{position:relative;justify-self:center;width:min(480px,100%);padding:0 28px 28px 0}
.fst-block{position:absolute;right:0;bottom:0;width:82%;height:82%;background:var(--accent);animation:fst-in 1.1s var(--ease) .35s both}
@keyframes fst-in{from{opacity:0;translate:24px 24px}}
.fst-frame{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;background:color-mix(in oklab,var(--fam-2) 30%,var(--surface));box-shadow:0 0 0 1px var(--ink);animation:fh-fade 1s ease .1s both}
.fst-frame .fh-img{width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) var(--fy,50%);filter:contrast(1.04);transform:scale(1.1);animation:fh-kb2 16s ease-out .2s both}
.fam-studio .s-title{text-transform:uppercase;font-weight:800;letter-spacing:-.045em;line-height:.9}
.fam-studio .s-title em{color:var(--accent-text)}
.fam-studio .s-eyebrow{font-family:'Space Grotesk Variable',ui-monospace,monospace}
.fam-studio .card{border-radius:0;box-shadow:0 0 0 1px var(--ink);transition:transform .4s var(--ease),box-shadow .4s}
.fam-studio .card:hover{transform:translate(-4px,-4px);box-shadow:0 0 0 1px var(--ink),6px 6px 0 var(--accent)}
.fam-studio .hr-card{border-radius:0;box-shadow:0 0 0 1px var(--ink),8px 8px 0 var(--accent)}
.fam-studio .fb-ph{border-radius:0;box-shadow:0 0 0 1px var(--ink)}
.fam-studio .svc-strip span{text-transform:uppercase;font-weight:800;letter-spacing:-.03em}

/* ==== trades (src/families.ts): their work, their area, how to reach them; every first screen reads well without a photo ==== */
.fh-toolbox .h-main,.fh-beam .h-main,.fh-craft .h-main,.fh-swatch .h-main{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(30px,5vw,84px);align-items:center;padding-top:clamp(12px,2vw,30px)}

/* ---- toolbox: graph paper, their work in a frame with measuring marks, a job ticket with their services and phone ---- */
.ft-dots{position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(color-mix(in oklab,var(--ink) 16%,transparent) 1.1px,transparent 1.4px);background-size:22px 22px;-webkit-mask:radial-gradient(75% 70% at 72% 45%,#000,transparent 78%);mask:radial-gradient(75% 70% at 72% 45%,#000,transparent 78%);animation:fh-fade 2s ease both}
.fh-toolbox .h-title{font-weight:700;letter-spacing:-.045em;line-height:.9}
.fh-toolbox .h-tag{color:var(--accent-text);font-weight:600;letter-spacing:-.02em}
.fh-toolbox .h-eyebrow{display:inline-flex;align-items:center;gap:.8em;font-family:'Space Grotesk Variable',ui-monospace,monospace;letter-spacing:.14em}
.fh-toolbox .h-eyebrow::before{content:'';width:2.4em;height:.62em;border-radius:2px;background:repeating-linear-gradient(-45deg,var(--accent) 0 5px,transparent 5px 9px)}
.fh-toolbox .h-btn{border-radius:10px}
.ft-art{position:relative;justify-self:center;width:min(500px,100%)}
.ft-frame{position:relative;margin:0;aspect-ratio:4/3}
.ft-frame .fh-img{width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) var(--fy,50%);border-radius:14px;box-shadow:0 50px 90px -60px rgb(0 0 0/.5);animation:ft-in 1.2s var(--ease) .15s both}
@keyframes ft-in{from{clip-path:inset(0 100% 0 0 round 14px)}to{clip-path:inset(0 0 0 0 round 14px)}}
.ft-c{position:absolute;width:26px;height:26px;border:2px solid var(--accent);pointer-events:none;animation:ft-snap .8s var(--ease) .9s both}
.ft-c.c1{left:-11px;top:-11px;border-right:0;border-bottom:0;--d:-12px -12px}.ft-c.c2{right:-11px;top:-11px;border-left:0;border-bottom:0;--d:12px -12px}
.ft-c.c3{left:-11px;bottom:-11px;border-right:0;border-top:0;--d:-12px 12px}.ft-c.c4{right:-11px;bottom:-11px;border-left:0;border-top:0;--d:12px 12px}
@keyframes ft-snap{from{opacity:0;translate:var(--d)}}
.ft-frame .fh-moodtag{top:12px;bottom:auto} /* the ticket covers the frame's foot */
.ft-ticket{position:relative;z-index:2;width:min(300px,80%);margin:-60px clamp(10px,3vw,36px) 0 auto;padding:18px 22px 18px;border-radius:12px;background:var(--surface);box-shadow:0 0 0 1px var(--line),0 40px 70px -46px rgb(0 0 0/.55);animation:ft-ticket 1.1s var(--ease) .55s both}
@keyframes ft-ticket{from{opacity:0;translate:0 26px;rotate:2deg}}
.ft-ticket::before,.ft-ticket::after{content:'';position:absolute;top:64px;width:18px;height:18px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.ft-ticket::before{left:-9px}.ft-ticket::after{right:-9px}
.ft-tk-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;padding-bottom:14px;border-bottom:2px dashed var(--line);font:600 .76rem/1.2 'Space Grotesk Variable',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ft-tk-h b{display:grid;place-items:center;min-width:44px;height:44px;padding:0 9px;border-radius:10px;background:var(--accent);color:var(--accent-ink);font:700 1.05rem/1 var(--display);letter-spacing:.02em}
.ft-tk-h .mk-logo{background:transparent;padding:0;justify-content:start}.ft-tk-h .mk-logo img{display:block;height:34px;width:auto;max-width:132px;object-fit:contain}
.ft-list{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.ft-list li{display:grid;grid-template-columns:24px 1fr;align-items:start;font-size:.95rem;line-height:1.3;color:var(--ink);animation:fg-row .8s var(--ease) both}
.ft-list li::before{content:'';width:12px;height:6px;margin-top:5px;border-left:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);rotate:-45deg}
.ft-list li:nth-child(1){animation-delay:1s}.ft-list li:nth-child(2){animation-delay:1.15s}.ft-list li:nth-child(3){animation-delay:1.3s}.ft-list li:nth-child(4){animation-delay:1.45s}
.ft-tel{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);font:700 1.3rem/1 var(--display);letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--accent-text)}
.fam-toolbox .s-sec.alt{background:var(--surface)}
.fam-toolbox .s-eyebrow{font-family:'Space Grotesk Variable',ui-monospace,monospace;letter-spacing:.12em;color:var(--accent-text)}
.fam-toolbox .s-title{font-weight:700;letter-spacing:-.035em}
.fam-toolbox .card{border-radius:12px;background:var(--surface);box-shadow:0 0 0 1px var(--line);border-top:3px solid var(--accent)}
.fam-toolbox .hr-card{border-radius:12px;box-shadow:0 0 0 1px var(--line),0 30px 60px -44px rgb(0 0 0/.4)}
.fam-toolbox .fb-ph{border-radius:14px}

/* ---- beam: a blueprint grid with measure lines drawing in, one wide photo crossed by a beam of colour ---------------- */
.fm-grid{position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(90deg,color-mix(in oklab,var(--accent) 14%,transparent) 1px,transparent 1px),linear-gradient(0deg,color-mix(in oklab,var(--accent) 14%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in oklab,var(--ink) 5%,transparent) 1px,transparent 1px),linear-gradient(0deg,color-mix(in oklab,var(--ink) 5%,transparent) 1px,transparent 1px);background-size:120px 120px,120px 120px,24px 24px,24px 24px;-webkit-mask:linear-gradient(180deg,#000 40%,transparent);mask:linear-gradient(180deg,#000 40%,transparent);animation:fh-fade 2s ease both}
.fm-dim{position:absolute;background:color-mix(in oklab,var(--ink) 40%,transparent)}
.fm-dim::before,.fm-dim::after{content:'';position:absolute;background:inherit}
.fm-dim.d1{left:clamp(16px,6vw,96px);width:min(34vw,420px);top:clamp(96px,15vh,150px);height:1px;transform-origin:left;animation:fm-draw-x 1.4s var(--ease) .4s both}
.fm-dim.d1::before,.fm-dim.d1::after{top:-6px;width:1px;height:13px}.fm-dim.d1::before{left:0}.fm-dim.d1::after{right:0}
.fm-dim.d2{right:clamp(12px,3vw,40px);top:18%;bottom:24%;width:1px;transform-origin:top;animation:fm-draw-y 1.6s var(--ease) .6s both}
.fm-dim.d2::before,.fm-dim.d2::after{left:-6px;height:1px;width:13px}.fm-dim.d2::before{top:0}.fm-dim.d2::after{bottom:0}
@keyframes fm-draw-x{from{transform:scaleX(0)}}
@keyframes fm-draw-y{from{transform:scaleY(0)}}
.fh-beam .h-title{text-transform:uppercase;font-weight:800;letter-spacing:-.05em;line-height:.86}
.fh-beam .h-tag{color:var(--accent-text);font-weight:700;letter-spacing:-.02em}
.fh-beam .h-eyebrow{font-family:'Space Grotesk Variable',ui-monospace,monospace;letter-spacing:.14em}
.fh-beam .h-btn{border-radius:0}
.fm-art{position:relative;justify-self:center;width:min(540px,100%);padding:30px 0}
.fm-frame{position:relative;margin:0;aspect-ratio:5/4;overflow:hidden;background:color-mix(in oklab,var(--fam-2) 24%,var(--surface));box-shadow:0 0 0 1px var(--ink),16px 16px 0 color-mix(in oklab,var(--ink) 10%,transparent);animation:fm-rise 1.1s var(--ease) .1s both}
@keyframes fm-rise{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
.fm-frame .fh-img{width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) var(--fy,50%);transform:scale(1.1);animation:fh-kb2 18s ease-out .2s both}
.fm-frame .fh-moodtag{top:12px;bottom:auto;left:12px;right:auto} /* the initials sit on the top right */
.fh-beam:not(.has-ph) .fm-frame{background:var(--surface) linear-gradient(90deg,color-mix(in oklab,var(--accent) 9%,transparent) 1px,transparent 1px) 0 0/24px 24px;background-image:linear-gradient(90deg,color-mix(in oklab,var(--accent) 9%,transparent) 1px,transparent 1px),linear-gradient(0deg,color-mix(in oklab,var(--accent) 9%,transparent) 1px,transparent 1px);background-size:24px 24px}
.fh-beam:not(.has-ph) .fm-empty{padding-bottom:14%}
.fm-beam{position:absolute;left:-7%;right:-7%;top:76%;height:clamp(26px,3.4vw,40px);background:radial-gradient(circle,color-mix(in oklab,var(--ink) 38%,transparent) 2.6px,transparent 3.2px) 18px 50%/56px 100% repeat-x,var(--fam-2);box-shadow:0 18px 30px -18px rgb(0 0 0/.45);transform:rotate(-5deg);animation:fm-beam 1.2s var(--ease) .7s both}
@keyframes fm-beam{from{transform:rotate(-5deg) translateX(-115%)}}
.fam-beam .s-title{text-transform:uppercase;font-weight:800;letter-spacing:-.045em;line-height:.9}
.fam-beam .s-title em{color:var(--accent-text)}
.fam-beam .s-eyebrow{font-family:'Space Grotesk Variable',ui-monospace,monospace}
.fam-beam .s-eyebrow::before{background:var(--fam-2)}
.fam-beam .s-sec.alt{background:var(--surface) linear-gradient(90deg,color-mix(in oklab,var(--accent) 7%,transparent) 1px,transparent 1px) 0 0/120px 120px}
.fam-beam .card{border-radius:0;box-shadow:0 0 0 1px var(--ink);background:var(--surface)}
.fam-beam .hr-card{border-radius:0;box-shadow:0 0 0 1px var(--ink),10px 10px 0 var(--fam-2)}
.fam-beam .fb-ph{border-radius:0;box-shadow:0 0 0 1px var(--ink)}
.fam-beam .svc-strip span{text-transform:uppercase;font-weight:800;letter-spacing:-.03em}

/* ---- craft: fine grain lines, one framed photo of their work, a maker's mark with their initials --------------- */
.fh .fk-grain{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;fill:none;stroke:color-mix(in oklab,var(--accent) 32%,transparent);stroke-width:1.2;vector-effect:non-scaling-stroke}
.fk-grain path{stroke-dasharray:1400;stroke-dashoffset:1400;animation:fk-draw 3.2s var(--ease) forwards}
.fk-grain path:nth-child(2){animation-delay:.2s}.fk-grain path:nth-child(3){animation-delay:.4s}.fk-grain path:nth-child(4){animation-delay:.6s}.fk-grain path:nth-child(5){animation-delay:.8s}.fk-grain path:nth-child(6){animation-delay:1s}
@keyframes fk-draw{to{stroke-dashoffset:0}}
.fh-craft .h-title{font-weight:400;letter-spacing:-.02em}
.fh-craft .h-tag{color:var(--accent-text);font-style:italic}
.fh-craft .h-eyebrow{display:inline-flex;align-items:center;gap:.9em;color:var(--accent-text);letter-spacing:.2em}
.fh-craft .h-eyebrow::before{content:'';width:2.6em;height:1px;background:currentColor}
.fh-craft .h-btn{border-radius:6px}
.fk-art{position:relative;justify-self:center;width:min(440px,100%)}
.fk-frame{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:6px;background:color-mix(in oklab,var(--accent) 16%,var(--surface));box-shadow:0 0 0 12px var(--surface),0 0 0 13px color-mix(in oklab,var(--accent) 40%,transparent),0 70px 110px -70px color-mix(in oklab,var(--ink) 55%,transparent);animation:fk-in 1.2s var(--ease) .15s both}
@keyframes fk-in{from{opacity:0;transform:translateY(24px) rotate(-1.2deg)}}
.fk-frame .fh-img{width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) var(--fy,50%);transform:scale(1.1);animation:fh-kb2 18s ease-out .2s both}
.fk-mark{position:absolute;left:-36px;bottom:-34px;width:clamp(120px,12vw,152px);aspect-ratio:1;display:grid;place-items:center;color:var(--accent-text);filter:drop-shadow(0 18px 26px color-mix(in oklab,var(--ink) 35%,transparent));animation:fh-fade 1.4s ease .8s both}
.fk-mark svg{position:absolute;inset:0;width:100%;height:100%}
.fk-mark .o{fill:var(--surface);stroke:currentColor;stroke-width:1.4}.fk-mark .i{fill:none;stroke:currentColor;stroke-width:.8;opacity:.5}
.fk-mark text{fill:currentColor;font:600 8.4px/1 'Inter Variable',system-ui,sans-serif;letter-spacing:.18em;transform-origin:60px 60px;animation:fh-spin 90s linear infinite}
.fk-mark b{position:relative;font:500 clamp(26px,2.6vw,34px)/1 var(--display);letter-spacing:.03em;color:var(--ink)}
.fam-craft .s-sec.alt{background:color-mix(in oklab,var(--surface) 60%,var(--bg))}
.fam-craft .s-eyebrow{color:var(--accent-text);letter-spacing:.2em}
.fam-craft .s-eyebrow::before{background:var(--fam-2)}
.fam-craft .s-title{font-weight:400}
.fam-craft .card{border-radius:6px;background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.fam-craft .hr-card{border-radius:6px;box-shadow:0 0 0 1px var(--line),0 0 0 8px var(--surface),0 0 0 9px color-mix(in oklab,var(--accent) 30%,transparent)}
.fam-craft .fb-ph{border-radius:6px;box-shadow:0 0 0 8px var(--surface),0 30px 60px -40px rgb(0 0 0/.35)}

/* ---- swatch: a fan of colour swatches opening behind their photo, a refined serif, paint chips ----------------- */
.fh-swatch .h-title{font-weight:400;letter-spacing:-.025em}
.fh-swatch .h-tag{color:var(--accent-text);font-style:italic}
.fh-swatch .h-eyebrow{display:inline-flex;align-items:center;gap:.9em;letter-spacing:.2em}
.fh-swatch .h-eyebrow::before{content:'';width:3.4em;height:.72em;border-radius:2px;background:linear-gradient(90deg,var(--accent) 0 33%,var(--fam-2) 33% 66%,var(--ink) 66%)}
.fh-swatch .h-btn{border-radius:999px}
.fw-art{position:relative;justify-self:center;width:min(470px,100%);padding:44px 0 0}
.fw-fan{position:absolute;right:0;top:0;width:56%;aspect-ratio:2/3}
.fw-fan i{position:absolute;inset:0;border-radius:10px;overflow:hidden;transform-origin:50% 100%;box-shadow:0 22px 40px -26px rgb(0 0 0/.45);animation:fw-open 1.4s var(--ease) both}
.fw-fan i::after{content:'';position:absolute;left:0;right:0;bottom:0;height:20%;background:var(--surface);box-shadow:inset 0 1px 0 var(--line)}
.fw-fan i:nth-child(1){background:var(--accent);--r:24deg;animation-delay:.55s}
.fw-fan i:nth-child(2){background:var(--fam-2);--r:15deg;animation-delay:.45s}
.fw-fan i:nth-child(3){background:color-mix(in oklab,var(--accent) 42%,var(--surface));--r:7deg;animation-delay:.35s}
.fw-fan i:nth-child(4){background:var(--ink);--r:0deg}
@keyframes fw-open{from{transform:rotate(0)}to{transform:rotate(var(--r))}}
.fw-frame{position:relative;margin:0;width:76%;aspect-ratio:4/5;overflow:hidden;border-radius:10px;background:var(--surface);box-shadow:0 0 0 10px var(--surface),0 0 0 11px var(--line),0 60px 100px -60px color-mix(in oklab,var(--ink) 55%,transparent);animation:fh-fade 1s ease .1s both}
.fw-frame .fh-img{width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) var(--fy,50%);transform:scale(1.1);animation:fh-kb2 18s ease-out .2s both}
.fam-swatch .s-sec.alt{background:var(--surface)}
.fam-swatch .s-eyebrow{letter-spacing:.2em;color:var(--accent-text)}
.fam-swatch .s-title{font-weight:400}
.fam-swatch .s-title em{font-style:italic}
.fam-swatch .card{border-radius:10px;overflow:hidden;background:var(--surface);box-shadow:0 0 0 1px var(--line);border-top:12px solid var(--accent)}
.fam-swatch .card:nth-child(3n+2){border-top-color:var(--fam-2)}.fam-swatch .card:nth-child(3n){border-top-color:var(--ink)}
.fam-swatch .hr-card{border-radius:10px;box-shadow:0 0 0 1px var(--line);border-left:12px solid var(--accent)}
.fam-swatch .fb-ph{border-radius:10px}

/* ---- workshop: deep graphite, a full-bleed photo of the work, their initials stencilled, a hazard stripe ------- */
.fh-workshop .fh-img{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;object-position:var(--fx,60%) var(--fy,45%);filter:saturate(.8) contrast(1.05);animation:fh-kb 22s ease-out both}
.fh-workshop .fh-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,var(--bg) 0,color-mix(in oklab,var(--bg) 90%,transparent) 36%,color-mix(in oklab,var(--bg) 45%,transparent) 70%,color-mix(in oklab,var(--bg) 25%,transparent)),linear-gradient(0deg,var(--bg) 0,transparent 32%)}
.fh-workshop:not(.has-ph) .fh-shade{background:radial-gradient(55% 60% at 78% 42%,color-mix(in oklab,var(--accent) 18%,transparent),transparent 70%)}
.fo-stencil{position:absolute;z-index:-1;right:clamp(20px,6vw,120px);top:50%;translate:0 -50%;font:800 clamp(170px,26vw,400px)/.8 var(--display);letter-spacing:-.03em;color:transparent;-webkit-text-stroke:2px color-mix(in oklab,var(--accent) 62%,transparent);-webkit-mask:linear-gradient(90deg,#000 0 47%,transparent 47% 50%,#000 50%);mask:linear-gradient(90deg,#000 0 47%,transparent 47% 50%,#000 50%);pointer-events:none;animation:fh-fade 2.2s ease .4s both}
.fh-workshop.has-ph .fo-stencil{opacity:.5}
.fo-hazard{position:absolute;left:0;right:0;bottom:0;z-index:1;height:14px;background:repeating-linear-gradient(-45deg,var(--accent) 0 16px,var(--bg) 16px 32px);background-size:45.25px 100%;animation:fo-slide 3s linear infinite}
@keyframes fo-slide{to{background-position:45.25px 0}}
.fh-workshop .h-title{text-transform:uppercase;font-weight:800;letter-spacing:-.045em;line-height:.88}
.fh-workshop .h-tag{color:var(--accent);font-weight:700}
.fh-workshop .h-eyebrow{color:var(--accent);font-family:'Space Grotesk Variable',ui-monospace,monospace;letter-spacing:.14em}
.fh-workshop .h-btn{border-radius:4px}
.fh-workshop .h-btn.ghost{color:var(--ink);background:color-mix(in oklab,var(--bg) 50%,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-workshop>.fh-moodtag{right:clamp(30px,4vw,64px);bottom:clamp(36px,5vh,52px)}
.fam-workshop .s-sec.alt{background:var(--surface)}
.fam-workshop .s-eyebrow{color:var(--accent);font-family:'Space Grotesk Variable',ui-monospace,monospace;letter-spacing:.12em}
.fam-workshop .s-eyebrow::before{background:var(--accent)}
.fam-workshop .s-title{text-transform:uppercase;font-weight:800;letter-spacing:-.04em;line-height:.9}
.fam-workshop .card{border-radius:4px;background:var(--surface);box-shadow:0 0 0 1px color-mix(in oklab,var(--accent) 26%,transparent)}
.fam-workshop .card-n{color:var(--accent)}
.fam-workshop .hr-card{border-radius:0;background:var(--surface);border-top:8px solid transparent;border-image:repeating-linear-gradient(-45deg,var(--accent) 0 10px,var(--surface) 10px 20px) 8;box-shadow:0 0 0 1px color-mix(in oklab,var(--accent) 26%,transparent)}
.fam-workshop .fb-ph{border-radius:4px}

/* 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%}
/* each tile in its photo's shape, all of one height: a wide photo is no longer cut to a tall strip */
.fb-track.fit{display:flex;align-items:flex-start}
.fb-track.fit .fb-ph{flex:3 1 0;min-width:0}
.fb-track.fit .fb-ph.sh-s{flex:4 1 0;aspect-ratio:1}
.fb-track.fit .fb-ph.sh-l{flex:6 1 0;aspect-ratio:3/2}
.fam-salon .fb-ph:is(.sh-l,.sh-s),.fam-azulejo .fb-ph:is(.sh-l,.sh-s){border-radius:34% 34% 14px 14px / 42% 42% 14px 14px}
.fam-garden .fb-ph:is(.sh-l,.sh-s){border-radius:36px}
@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%}
  .fb-ph:is(.sh-l,.sh-s) img{transform:scale(1.06)}
  @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)}

/* ---- a frame follows its photo ---------------------------------------------------------------------------------
   The first screen's frames are tall. A wide photo in a tall frame keeps half its width: the people at its sides
   are cut off (a team of two, Sylvain, 13 October 2026). So a wide photo gets a wide frame, at the same width or
   wider, and moves less inside it. Tall and square photos, and our library's, keep the frame they had. */
.fh.ph-l :is(.fh-arch,.fh-blob,.fl-frame,.fst-frame,.fk-frame,.fw-frame){aspect-ratio:5/4}
.fh.ph-l .fc-frame{aspect-ratio:5/4;width:min(560px,100%)}
.fh.ph-l .fs-art{width:min(580px,100%)}
.fh.ph-l .fs-arch{aspect-ratio:4/3.1;border-radius:42% 42% 0 0 / 46% 46% 0 0;animation-name:fs-rise-l}
@keyframes fs-rise-l{from{opacity:0;translate:0 30px;clip-path:inset(100% 0 0 0 round 42% 42% 0 0 / 46% 46% 0 0)}to{clip-path:inset(0 0 0 0 round 42% 42% 0 0 / 46% 46% 0 0)}}
.fh.ph-l .fh-arch{border-radius:42% 42% 30px 30px / 46% 46% 30px 30px}
.fh.ph-l :is(.fh-arch,.fh-blob,.fl-frame,.fst-frame,.fk-frame,.fw-frame,.fc-frame,.fs-arch) .fh-img{transform:scale(1.04);animation-name:fh-kb3}
@keyframes fh-kb3{to{transform:scale(1)}}
.fh.ph-s :is(.fs-arch){aspect-ratio:4/4.4}

/* ---- phones ------------------------------------------------------------------------------------------------ */
@media (max-width:900px){
  .fh.ph-l :is(.fs-art,.fc-frame){width:min(440px,92%)}
  .fb-track.fit{display:grid;align-items:center}
  .fb-track.fit .fb-ph.sh-l{aspect-ratio:4/3}
  .fh-azulejo .h-main,.fh-garden .h-main,.fh-linen .h-main,.fh-ledger .h-main,.fh-calm .h-main,.fh-salon .h-main,.fh-studio .h-main,.fh-toolbox .h-main,.fh-beam .h-main,.fh-craft .h-main,.fh-swatch .h-main{grid-template-columns:1fr;padding-bottom:110px}
  .fh-art,.fh-blob,.fl-art,.fg-art,.fc-frame,.fs-art,.fst-art,.ft-art,.fm-art,.fk-art,.fw-art{width:min(380px,86%);margin:18px auto 0}
  .ft-ticket{margin:-44px 6px 0 auto;width:min(270px,84%)}
  .fm-dim{display:none}
  .fk-mark{left:-16px;bottom:-24px;width:104px}
  .fw-fan{right:9%}.fw-fan i:nth-child(1){--r:16deg}.fw-fan i:nth-child(2){--r:10deg}.fw-fan i:nth-child(3){--r:5deg}
  .fo-stencil{font-size:clamp(150px,48vw,260px);top:26%;right:-10px}
  .fh-workshop .h-main{align-content:end;padding-bottom:max(44px,env(safe-area-inset-bottom))}
  .fh-workshop .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) 32%,color-mix(in oklab,var(--bg) 40%,transparent) 64%,transparent 82%)}
  .fg-card{margin:-30px 0 0 14px;padding:22px 20px 18px 100px}.fg-seal{width:72px;left:14px}
  .fg-card.solo{padding:26px 22px 22px 112px}.fg-card.solo .fg-seal{width:84px}
  .fh-vault .h-main{align-content:end;padding-bottom:max(36px,env(safe-area-inset-bottom))}
  .fh-vault .fh-shade{background:linear-gradient(0deg,var(--bg) 0,color-mix(in oklab,var(--bg) 90%,transparent) 36%,color-mix(in oklab,var(--bg) 45%,transparent) 70%,color-mix(in oklab,var(--bg) 70%,transparent))}
  .fl-stamp{right:-14px;top:-20px;width:96px}
  .fl-rule{display:none}
  .fh .fh-rosette{width:72px;height:72px;left:-18px;top:-18px}
  .fb-track{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 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%)}
}
@media (prefers-reduced-motion:reduce){
  .fh *,.fh::after,.fam-band *{animation:none!important;transition:none!important}
  .fh-line *,.fk-grain path{stroke-dashoffset:0}
  .fh-embers{display:none}
}