/* Yagrumo family kit · v1 (Oct 2026)
   One canopy bar and one footer row shared by every Yagrumo property, so a visitor
   always sees the same mark, the same order and the same "you are here" leaf.
   Load with family.js. Colors are fixed (not themed) because the bar is always night. */
.ygf{--ygf-night:#0F1012;--ygf-bone:#F2F3EF;--ygf-moss:#9CA28F;--ygf-gold:#E9B949;--ygf-line:rgba(242,243,239,.12);
  position:relative;z-index:70;background:var(--ygf-night);color:var(--ygf-moss);border-bottom:1px solid var(--ygf-line);
  font:500 12px/1 "Geist Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;letter-spacing:.08em;text-transform:uppercase}
.ygf-in{display:flex;align-items:center;gap:18px;height:30px;max-width:1240px;margin:0 auto;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));overflow-x:auto;scrollbar-width:none}
.ygf-in::-webkit-scrollbar{display:none}
.ygf a,.ygf span.ygf-i{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:inherit;white-space:nowrap;transition:color .2s}
.ygf a:hover{color:var(--ygf-bone)}
.ygf a:focus-visible{outline:2px solid var(--ygf-gold);outline-offset:3px;border-radius:4px}
.ygf .ygf-m{width:14px;height:14px;flex:none}
.ygf .ygf-dot{width:7px;height:7px;border-radius:50%;background:var(--c);flex:none;box-shadow:0 0 0 0 transparent}
.ygf .ygf-on{color:var(--ygf-bone)}
.ygf .ygf-on .ygf-dot{box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 30%,transparent),0 0 12px var(--c)}
.ygf .ygf-soon{opacity:.45;cursor:default}
.ygf .ygf-soon small{font-size:9px;letter-spacing:.12em;border:1px solid var(--ygf-line);border-radius:999px;padding:2px 5px}
.ygf .ygf-sep{width:1px;height:12px;background:var(--ygf-line);flex:none}
.ygf .ygf-home b{color:var(--ygf-bone);font-weight:500}

/* footer row */
.ygf-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;font:500 12px/1.4 "Geist Mono",ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:#9CA28F}
.ygf-foot a,.ygf-foot span{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:inherit}
.ygf-foot a:hover{color:#F2F3EF}
.ygf-foot i{width:7px;height:7px;border-radius:50%;background:var(--c)}
.ygf-foot .ygf-soon{opacity:.5}

/* the signature motion: a leaf flips from green to its silver underside.
   Use it for "you did it" moments on every property. */
@keyframes ygf-flip{0%{transform:perspective(500px) rotateY(0)}50%{transform:perspective(500px) rotateY(90deg)}100%{transform:perspective(500px) rotateY(0)}}
.ygf-flip{animation:ygf-flip .7s cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:reduce){.ygf-flip{animation:none}}

/* fixed variant of the canopy bar, for full-screen experiences that draw their own first screen */
.ygf.ygf-fixed{position:fixed;top:0;left:0;right:0;z-index:2147483000;padding-top:env(safe-area-inset-top,0px);background:rgba(15,16,18,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* exit chip: the way back from a film or full-screen experience to the property it belongs to */
.ygx{position:fixed;z-index:2147483000;top:calc(12px + env(safe-area-inset-top,0px));left:calc(12px + env(safe-area-inset-left,0px));
  display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 13px 0 10px;border-radius:999px;
  background:rgba(15,16,18,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(242,243,239,.16);
  color:#F2F3EF;text-decoration:none;font:500 11.5px/1 "Geist Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;
  view-transition-name:yg-exit;transition:border-color .2s,transform .2s cubic-bezier(.22,1,.36,1)}
.ygx:hover{border-color:#E9B949;transform:translateX(-2px)}
.ygx:focus-visible{outline:2px solid #E9B949;outline-offset:3px}
.ygx .ygf-m{width:14px;height:14px;flex:none}
.ygx .ygx-a{color:#E9B949}
@media print{.ygx,.ygf-fixed{display:none}}
.ygx.ygx-inline{position:relative;top:auto;left:auto;z-index:auto;height:28px;padding:0 11px;margin-right:6px;flex:none;-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(242,243,239,.06)}
