/* ==========================================================================
   Bay Balcony site chrome on the static pages: the top row, the island menu
   and the footer, the same as the homepage's (web/app/components/h2/Hero.vue
   .h-top, LabIsland.vue, h2/Foot.vue) on the light ground of these pages.
   scripts/apply-nav.mjs writes the markup from web/app/data/site-nav.json and
   links this file last, versioned with NAV_REV; /nav.js drives the island.
   Change the homepage components and this file together.

   Fonts: Geist and Geist Mono for the chrome only (the page copy keeps its own
   fonts), self-hosted in /fonts/, swap, with metric-matched local fallbacks
   (measured 2026-10-27: Geist is 2.4% wider than Arial, Geist Mono advances
   0.6em like Menlo), so nothing moves when they arrive. Every class here has
   its own prefix (tp-, isl-, ft-) because styles.css styles bare h2, h3, p,
   .wrap, .btn, .lede and .cta.
   The two files are cut down to what the chrome sets (2026-10-27, from the
   latin files the Nuxt build ships in /_nuxt/, 52 KB to 17 KB): the
   characters in the unicode-range below; Geist keeps weights 400 to 600, Geist
   Mono is fixed at 500 (fontTools: subset to the range, then
   varLib.instancer wght=400:600 and wght=500). apply-nav.mjs refuses chrome
   text with a character outside the range. The URLs are relative so the block
   library, opened from disk, finds the files too.
   ========================================================================== */

@font-face{font-family:"Geist Variable";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/geist-latin-wght.woff2) format("woff2");unicode-range:U+0020-007E,U+00A0,U+00A9,U+00B7,U+2013-2014,U+2018-2019,U+201C-201D,U+2026}
@font-face{font-family:"Geist Mono Variable";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/geist-mono-latin-wght.woff2) format("woff2");unicode-range:U+0020-007E,U+00A0,U+00A9,U+00B7,U+2013-2014,U+2018-2019,U+201C-201D,U+2026}
@font-face{font-family:"Geist fb";src:local("Arial"),local("Helvetica");size-adjust:102.4%;ascent-override:98.6%;descent-override:28.3%;line-gap-override:0%}
@font-face{font-family:"Geist Mono fb";src:local("Menlo"),local("Courier New");size-adjust:100%;ascent-override:101%;descent-override:29%;line-gap-override:0%}

:root{
  --ch-sans:"Geist Variable","Geist fb",ui-sans-serif,system-ui,sans-serif;
  --ch-mono:"Geist Mono Variable","Geist Mono fb",ui-monospace,monospace;
  --ch-gut:clamp(16px,4.5vw,56px);
  --ch-e-out:cubic-bezier(.16,1,.3,1);
  --ch-e-io:cubic-bezier(.76,0,.24,1);
  --ch-amber:#8E7CD4;                 /* the homepage's --amber: lavender since 2026-10-02 */
  --ch-glass:rgb(26 21 48 / .94);     /* the island glass, the homepage's --site-header-bg */
  --ch-glass-solid:rgb(26 21 48 / .97);
  --ch-blur:12px;
  /* the homepage's cream ground ([data-theme=cream] in base.css) */
  --ch-text:#1C1A26;--ch-dim:#66627A;--ch-line:rgb(28 26 38 / .13);--ch-line2:rgb(28 26 38 / .3);--ch-accent:#3B3160;
}
/* the island floats over the bottom of the window: keep a focused link clear of it (WCAG 2.4.11) */
html{scroll-padding-bottom:96px}
.ch-wrap{width:min(1280px,100% - 2 * var(--ch-gut));margin-inline:auto}


/* 1  TOP ROW (Hero.vue .h-top) =========================================== */

.tp{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:clamp(16px,2.4vw,26px) var(--ch-gut) clamp(4px,1vw,12px);font-family:var(--ch-sans);color:var(--ch-text)}
.tp-where{margin:0;max-width:none;min-width:0;font:500 11px/1.3 var(--ch-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ch-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-wm{grid-column:2;display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--ch-text);text-decoration:none;font:600 19px/1 var(--ch-sans);letter-spacing:-.035em;white-space:nowrap}
.tp-wm svg{display:block;width:30px;height:30px;flex:none}
.tp-wm span{min-width:5.51em}   /* the word's width in Geist, so the centered row does not move when the font arrives */
.tp-acts{justify-self:end;display:inline-flex;align-items:center;gap:22px}
.tp-text{justify-self:end;display:inline-flex;gap:6px;align-items:center;min-height:44px;color:var(--ch-text);font:400 15px/1.2 var(--ch-sans);text-decoration:none;white-space:nowrap;
  background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-position:0 78%;background-repeat:no-repeat;transition:background-size .5s var(--ch-e-out)}
.tp-text:hover{background-size:100% 1px}
@media(max-width:700px){.tp-where,.tp-acts{display:none}.tp{grid-template-columns:1fr;justify-items:center}.tp-wm{grid-column:1}}


/* 2  ISLAND (LabIsland.vue) ============================================== */

.isl-scrim{position:fixed;inset:0;z-index:58;background:rgb(14 10 26 / .38);opacity:0;pointer-events:none;transition:opacity .6s var(--ch-e-io)}
.isl-scrim.on{opacity:1;pointer-events:auto}
.isl{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;color:#F7F5FD;
  font:500 10px/1 var(--ch-mono);letter-spacing:.12em;text-transform:uppercase}
.isl ::selection{background:#B3A5E6;color:#120E22}
.isl :focus-visible{outline:2px solid currentColor;outline-offset:3px}
/* the lavender buttons set dark text, so their ring would be dark on the dark glass: ring them in the light ink */
.isl-book:focus-visible,.isl-act.amber:focus-visible{outline-color:#F7F5FD}
.isl-glass{position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--ch-glass);-webkit-backdrop-filter:blur(var(--ch-blur));backdrop-filter:blur(var(--ch-blur))}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.isl-glass{background:var(--ch-glass-solid)}}

.isl-bar{position:relative;display:flex;align-items:center;height:52px;padding:0 4px;isolation:isolate}
.isl.open .isl-bar>.isl-glass{opacity:0;transition:opacity .2s linear}
.isl-mark{position:relative;width:44px;height:44px;display:grid;place-items:center;color:inherit}
.isl-mark>svg:last-child{display:block;width:24px;height:24px}
.isl-ring{position:absolute;inset:2px;width:40px;height:40px;transform:rotate(-90deg)}
.isl-ring circle{fill:none;stroke:rgb(247 245 253 / .14);stroke-width:1.5}
.isl-ring circle.p{stroke:var(--ch-amber);stroke-dasharray:106.8;stroke-dashoffset:106.8}
/* the label is one word for the page (its section or its area) and rolls to "Menu" while open;
   its width is set from the longer word in mono advances (0.6em + 0.12em tracking), so the bar
   never changes width when the font arrives */
.isl-label{position:relative;width:calc(var(--n,15) * .72em);max-width:150px;height:44px;overflow:hidden;margin-inline:8px 6px}
.isl-word{position:absolute;inset:0;display:flex;align-items:center;transform:translateY(100%);transition:transform .6s var(--ch-e-out);white-space:nowrap;overflow:hidden}
.isl-word.on{transform:none}
.isl-word:not(.on){transform:translateY(-100%)}
.isl-btn{height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 16px;background:transparent;color:inherit;border:0;
  font:inherit;letter-spacing:inherit;text-transform:inherit;text-decoration:none;cursor:pointer;transition:background-color .3s var(--ch-e-out),color .3s var(--ch-e-out)}
.isl-burger{position:relative;width:48px;padding:0}
.isl-burger::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:rgb(247 245 253 / .14)}   /* the divider, drawn rather than a one-sided border */
.isl-burger:hover{background:rgb(247 245 253 / .08)}
.bars{position:relative;width:18px;height:10px}
.bars i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .55s var(--ch-e-io),top .55s var(--ch-e-io)}
.bars i:first-child{top:1px}.bars i:last-child{top:7.5px}
.isl.open .bars i:first-child{top:4.25px;transform:rotate(45deg)}
.isl.open .bars i:last-child{top:4.25px;transform:rotate(-45deg)}
.isl-book{margin-left:4px;background:var(--ch-amber);color:#120E22}
.isl-book:hover{background:#A898E0;color:#120E22}
/* with no script (or when nav.js never arrived) the menu opens as a link to the panel */
.isl-nojs{display:none}
html:not(.nav-js) .isl-nojs{display:inline-flex}
html:not(.nav-js) button.isl-burger{display:none}

/* the panel: one glass shape that grows out of the bar. The glass and the list are clipped side by
   side, the same insets in px, and the panel itself never is: a clip-path on an ancestor makes it the
   blur's backdrop root, and the glass then has nothing behind it to blur (a flat tint with the page
   showing through, sharp). The list's box ends 52px above the panel's, so its 100% is the glass's
   100% - 52px. */
.isl-panel{position:absolute;left:50%;bottom:0;width:min(400px,calc(100vw - 24px));transform:translateX(-50%);isolation:isolate;z-index:-1;visibility:hidden}
.isl-panel>.isl-glass,.isl-panel-in{transition:clip-path .5s var(--ch-e-io)}
.isl-panel>.isl-glass{clip-path:inset(calc(100% - 52px) calc(50% - var(--bw,300px) / 2) 0 calc(50% - var(--bw,300px) / 2))}
.isl-panel-in{clip-path:inset(100% calc(50% - var(--bw,300px) / 2) 0 calc(50% - var(--bw,300px) / 2))}
.isl.shown .isl-panel{visibility:visible}
.isl.open .isl-panel>.isl-glass,.isl.open .isl-panel-in{clip-path:inset(0 0 0 0);transition:clip-path .75s var(--ch-e-io)}
html:not(.nav-js) .isl-panel:target{visibility:visible}
html:not(.nav-js) .isl-panel:target>.isl-glass,html:not(.nav-js) .isl-panel:target .isl-panel-in{clip-path:none}
/* the list scrolls above the bar, never under it */
.isl-panel-in{padding:28px 28px 22px;margin-bottom:52px;border-bottom:1px solid rgb(247 245 253 / .1);display:grid;gap:20px;max-height:calc(100svh - 52px - 44px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgb(247 245 253 / .25) transparent}
.isl-kick{display:flex;justify-content:space-between;align-items:center;margin:0;max-width:none;color:rgb(247 245 253 / .6);font:inherit}
.isl-x{display:none;color:#F7F5FD;min-height:44px;align-items:center}
html:not(.nav-js) .isl-x{display:inline-flex}

/* the site list: big links that rise out of their own masks on a stagger; Services and Areas open in place.
   Every link and summary in the menu is at least 44px tall (framework 10.6); the rising words start
   below their 44px mask (half their own height plus 24px clears it at any size). */
.isl-main{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.isl-main li{--i:0;margin:0;padding:0}
.isl-m{display:flex;width:fit-content;max-width:100%;align-items:center;min-height:44px;overflow:hidden;font:500 clamp(22px,2.2vw,27px)/1.14 var(--ch-sans);letter-spacing:-.03em;text-transform:none;color:#F7F5FD;text-decoration:none;cursor:pointer}
summary.isl-m{width:auto;list-style:none}
summary.isl-m::-webkit-details-marker{display:none}
.isl-t{display:inline-flex;align-items:center;gap:12px;padding-bottom:.04em}
.nav-js .isl-t{transform:translateY(calc(50% + 24px));transition:transform .45s var(--ch-e-io)}
.nav-js .isl.open .isl-t{transform:none;transition:transform .9s var(--ch-e-out);transition-delay:calc(160ms + var(--i) * 55ms)}
.isl-m.cur .isl-t::before{content:"";width:7px;height:7px;flex:none;background:var(--ch-amber)}
.isl-chev{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.7;transition:transform .45s var(--ch-e-out)}
.isl-g[open]>summary .isl-chev{transform:rotate(180deg)}
.roll2{display:inline-grid;overflow:hidden;height:1.12em;vertical-align:bottom}
.roll2>span{grid-area:1/1;transition:transform .6s var(--ch-e-out)}
.roll2>span+span{transform:translateY(105%)}
.isl-m:hover .roll2>span:first-child,.isl-m:focus-visible .roll2>span:first-child{transform:translateY(-105%)}
.isl-m:hover .roll2>span+span,.isl-m:focus-visible .roll2>span+span{transform:none}
.isl-sub{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;padding:10px 0 14px}
.isl-col{display:grid;align-content:start;min-width:0}
.isl-h{display:flex;align-items:center;min-height:30px;font:500 10px/1.4 var(--ch-mono);letter-spacing:.12em;text-transform:uppercase;color:rgb(247 245 253 / .6);text-decoration:none}
a.isl-h{min-height:44px;color:rgb(247 245 253 / .78)}
a.isl-h:hover{color:#F7F5FD;text-decoration:underline}
.isl-col a:not(.isl-h){display:flex;align-items:center;min-height:44px;font:400 14.5px/1.3 var(--ch-sans);letter-spacing:0;text-transform:none;color:rgb(247 245 253 / .86);text-decoration:none}
.isl-col a:not(.isl-h):hover{color:#F7F5FD;text-decoration:underline}
.isl-col a[aria-current=page]{color:#F7F5FD;font-weight:600}

.nav-js .isl-quick,.nav-js .isl-meta{opacity:0;transform:translateY(12px);transition:opacity .3s linear,transform .45s var(--ch-e-io)}
.nav-js .isl.open .isl-quick,.nav-js .isl.open .isl-meta{opacity:1;transform:none;transition:opacity .7s var(--ch-e-out),transform .9s var(--ch-e-out);transition-delay:calc(160ms + var(--i) * 55ms)}
.isl-quick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.isl-quick .amber{grid-column:1/-1}   /* Book across the top, Call and Text under it */
.isl-act{display:flex;align-items:center;justify-content:center;min-height:44px;border:1px solid rgb(247 245 253 / .24);color:#F7F5FD;text-decoration:none;transition:border-color .3s,background-color .3s}
.isl-act:hover{border-color:#F7F5FD}
.isl-act.amber{background:var(--ch-amber);border-color:var(--ch-amber);color:#120E22}
.isl-meta{display:grid;grid-template-columns:1fr 1fr;gap:16px;text-transform:none;letter-spacing:0;font:400 14px/1.5 var(--ch-sans)}
.isl-meta div{display:grid;gap:0;align-content:start}
.isl-meta span{font:500 10px/1.6 var(--ch-mono);letter-spacing:.12em;text-transform:uppercase;color:rgb(247 245 253 / .6)}
.isl-meta a{display:flex;align-items:center;min-height:44px;color:rgb(247 245 253 / .86);text-decoration:none}
.isl-meta a:hover{color:#F7F5FD;text-decoration:underline}
@media(max-width:520px){.isl-panel-in{padding:26px 22px 20px}.isl-m{font-size:26px}}
@media(max-height:640px){.isl-m{font-size:21px}.isl-panel-in{gap:14px;padding-top:20px}}


/* 3  FOOTER (Foot.vue) ==================================================== */

/* the homepage footer sits on its night ground ([data-theme=night] in base.css); same here */
.ft{position:relative;margin-top:clamp(48px,7vw,96px);padding:0 0 140px;background:#1A1530;color:var(--ch-text);font:400 17px/1.6 var(--ch-sans);
  --ch-text:#F1EEF8;--ch-dim:#A9A2C2;--ch-line:rgb(241 238 248 / .13);--ch-line2:rgb(241 238 248 / .3);--ch-accent:#8E7CD4}
.ft ::selection{background:#8E7CD4;color:#120E22}
.ft :focus-visible{outline:2px solid #F1EEF8;outline-offset:3px}
.ft h2,.ft h3,.ft p{margin:0;max-width:none;font-variation-settings:normal}
.ft-cta{display:grid;justify-items:center;text-align:center;gap:20px;padding:clamp(56px,7vw,96px) 0 clamp(64px,8vw,112px)}
.ft-h{font:600 clamp(36px,4.6vw,64px)/1 var(--ch-sans);letter-spacing:-.04em;text-wrap:balance;color:var(--ch-text)}
/* 37.1em is the homepage's 56ch in Geist (its 0 is .663em); in em, so the fallback font wraps the same */
.ft p.ft-lede{font-size:clamp(17px,1.4vw,19px);line-height:1.6;max-width:37.1em;margin-inline:auto;color:var(--ch-dim)}
.ft-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.ft-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;overflow:hidden;
  font:500 15px/1 var(--ch-sans);text-decoration:none;cursor:pointer;border:1px solid var(--ch-line2);background:transparent;color:var(--ch-text);
  transition:background-color .45s var(--ch-e-out),color .45s var(--ch-e-out),border-color .45s var(--ch-e-out)}
.ft-btn:hover{border-color:var(--ch-text)}
.ft-btn--amber{background:var(--ch-amber);border-color:var(--ch-amber);color:#120E22}
.ft-btn--amber:hover{background:#A898E0;border-color:#A898E0}
.ft-roll{display:grid;overflow:hidden;height:1.2em;line-height:1.2em}
.ft-roll>span{grid-area:1/1;transition:transform .55s var(--ch-e-out)}
.ft-roll>span+span{transform:translateY(110%)}
.ft-btn:hover .ft-roll>span:first-child{transform:translateY(-110%)}
.ft-btn:hover .ft-roll>span+span{transform:none}
/* a flex row: each letter is one line box of exactly line-height, so the wordmark is the same
   height in the fallback font and in Geist */
.ft p.ft-wm{display:flex;justify-content:center;overflow:hidden;margin:0 0 40px;padding-bottom:.12em;font:600 clamp(52px,15.2vw,232px)/.86 var(--ch-sans);letter-spacing:-.055em;white-space:nowrap;color:var(--ch-text)}
.ft-wm span{display:inline-block}
.ft-grid{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));padding-top:28px;border-top:1px solid var(--ch-line)}
.ft-grid div{display:grid;gap:10px;align-content:start}
.ft-lbl{display:inline-flex;align-items:baseline;gap:10px;font:500 11px/1.3 var(--ch-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ch-dim)}
.ft-lbl::before{content:"";width:6px;height:6px;background:var(--ch-accent);transform:translateY(-1px);flex:none}
.ft-grid a,.ft-grid span{font-size:15px;line-height:1.6;color:var(--ch-dim);text-decoration:none;min-height:44px;display:flex;align-items:center}
.ft-grid a:hover,.ft-grid a[aria-current=page]{color:var(--ch-text)}
.ft p.ft-base{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;margin-top:40px;padding-top:18px;padding-bottom:14px;border-top:1px solid var(--ch-line);font-size:13px;color:var(--ch-dim)}
/* 14px above and below make each link a 45px target without moving the line; the line's own 18px
   and 14px padding hold that area, so a tap there reaches the link (padding outside the parent's
   box is painted but never hit). Positioned, so on a phone, where the place name wraps to a row
   10px below, the link's padding still takes the tap over that text. */
.ft-base a{position:relative;padding-block:14px;color:inherit;text-underline-offset:.2em}
.ft-base a:hover{color:var(--ch-text)}
/* arrival, as on the homepage: the heading rises, the rest fades up, the wordmark's letters rise in.
   Only with the script running, so the footer is never hidden without it. */
.ft-rv{display:block;overflow:hidden}
.ft-rv>span{display:block}
.nav-js .ft-rv>span{transform:translateY(105%);transition:transform 1.1s var(--ch-e-out)}
.nav-js .ft-fade{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ch-e-out),transform 1.1s var(--ch-e-out);transition-delay:calc(var(--i,0) * 80ms)}
.nav-js .ft-wm span{transform:translateY(105%);transition:transform 1.2s var(--ch-e-out);transition-delay:calc(var(--i) * 45ms)}
.nav-js .in .ft-rv>span,.nav-js .in .ft-fade,.nav-js .ft-wm.in span{opacity:1;transform:none}


/* 4  MOTION, PRINT ======================================================= */

@media(prefers-reduced-motion:reduce){
  .isl-scrim,.isl-panel>.isl-glass,.isl-panel-in,.isl.open .isl-panel>.isl-glass,.isl.open .isl-panel-in,.isl-word,.bars i,.roll2>span,.ft-roll>span,.isl-chev{transition:none!important}
  .nav-js .isl-t,.nav-js .isl-quick,.nav-js .isl-meta,.nav-js .ft-rv>span,.nav-js .ft-fade,.nav-js .ft-wm span{transform:none!important;opacity:1!important;transition:none!important}
}
@media print{
  .isl,.isl-scrim,.ft,.tp-acts{display:none!important}
}