/* Banner-as-menu. Each page's banner sits at the top. Tap it: it folds in half on the black bar
   (bottom half folds up), and the bottom halves of every page's banner drop down as a rainbow.
   Tap a band: the rainbow rolls up like a window shade and you land on that page. */
.fban{
  --top:#dd0500; --bot:#640200; --b0:48.5%; --b1:52.2%; --h:clamp(108px, 13vw, 156px);
  position:relative; z-index:60; width:100%; height:var(--h); perspective:1000px;
}
.fban .hit{position:absolute; inset:0; z-index:3; display:block; width:100%; border:0; padding:0; margin:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent}
.fban .hit:focus-visible{outline:3px solid #fff; outline-offset:-6px}
.fban .half,.fband .half{position:absolute; left:0; right:0; overflow:hidden}
.fban .half.t{top:0; height:var(--b1)}
.fban .half.b{top:var(--b1); bottom:0; transform-origin:50% 0; transition:transform .38s cubic-bezier(.55,0,.75,.2), filter .38s; backface-visibility:hidden}
.fface{position:absolute; left:0; right:0; height:var(--h);
  background:linear-gradient(to bottom, var(--top) 0 var(--b0), #000 var(--b0) var(--b1), var(--bot) var(--b1) 100%)}
.fban .half.t .fface{top:0}
.fban .half.b .fface,.fband .fface{top:calc(var(--h) * -0.522)}
.fface .wrap{position:relative; height:100%; max-width:980px; margin:0 auto; display:flex}
.fface .art{height:100%; width:auto; aspect-ratio:1/1; flex:none; display:block; user-select:none; pointer-events:none}
.fban .hint{position:absolute; right:max(14px, calc((100% - 980px) / 2 + 14px)); bottom:12%; z-index:2; display:flex; align-items:center; gap:8px; pointer-events:none;
  font-family:"Overpass","Arial Narrow",system-ui,sans-serif; font-weight:900; font-size:clamp(10px,1.2vw,13px); letter-spacing:.2em; color:rgba(255,255,255,.75);
  transition:opacity .2s}
.fban .hint i{display:grid; gap:3px} .fban .hint i b{display:block; width:15px; height:2.5px; border-radius:2px; background:currentColor}
.fban:hover .hint{color:#fff}

/* 1. fold in half: the bottom half folds up behind the bar */
.fban.open .half.b{transform:rotateX(90deg); filter:brightness(.4)}
.fban.open .hint{opacity:0}

/* 2. the rainbow of bottom halves drops from the bar */
.fdrop{position:absolute; left:0; right:0; top:var(--b1); z-index:59; perspective:1100px; pointer-events:none; visibility:hidden;
  clip-path:inset(0 0 0 0); transition:clip-path .5s cubic-bezier(.6,0,.3,1), visibility 0s .6s}
.fban.open .fdrop,.fban.shade .fdrop{visibility:visible; transition:clip-path .5s cubic-bezier(.6,0,.3,1), visibility 0s 0s}
.fban.open .fdrop{pointer-events:auto}
.fband{--top:#dd0500; --bot:#640200; position:relative; display:block; height:calc(var(--h) * .478); color:#fff; text-decoration:none; cursor:pointer;
  transform-origin:50% 0; transform:rotateX(-90deg); transition:transform .34s cubic-bezier(.2,.9,.3,1.25); box-shadow:inset 0 -2px 0 rgba(0,0,0,.28)}
.fband{background:var(--top)}
.fband .half{display:none}
.fban.open .fband{transform:rotateX(0)}
.fband .lbl{position:absolute; inset:0; max-width:980px; margin:0 auto; display:flex; align-items:center; gap:12px;
  padding:0 16px}
.fband .lbl b{font-family:"Overpass","Arial Narrow",system-ui,sans-serif; font-weight:900; font-size:clamp(15px, 2.2vw, 24px); line-height:1; color:var(--fink,#fff); text-shadow:0 1px 0 rgba(0,0,0,.18); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fband .lbl small{font-family:"Nunito",system-ui,sans-serif; font-weight:800; font-size:clamp(11px,1.3vw,13px); color:var(--fink,#fff); opacity:.78; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.fband.here .lbl b::after{content:" ●"; font-size:.6em; vertical-align:middle}
.fband:hover .lbl b,.fband:focus-visible .lbl b{text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:4px}
.fband:focus-visible{outline:3px solid #fff; outline-offset:-4px; z-index:1}
@media (max-width:640px){ .fband .lbl small{display:none} }

/* 3. picked a band: the whole rainbow rolls up into the bar like a window shade */
.fban.shade .fdrop{clip-path:inset(0 0 100% 0)}

/* 4. arriving on the next page: its banner rolls down out of the bar */
.fban.arrive .half.b{animation:fban-down .45s cubic-bezier(.2,.9,.3,1.1) both}
@keyframes fban-down{from{transform:rotateX(90deg); filter:brightness(.4)} to{transform:none; filter:none}}

@media (prefers-reduced-motion:reduce){
  .fban .half.b,.fband,.fdrop{transition:none!important} .fban.arrive .half.b{animation:none}
}

/* yellow = shop: construction tape */
.fband[data-c=yellow]{background:repeating-linear-gradient(-45deg, var(--top) 0 22px, #16191c 22px 36px)}
.fband[data-c=yellow] .lbl b,.fband[data-c=yellow] .lbl small{background:var(--top); padding:3px 8px 1px; border-radius:3px; opacity:1}
/* blue = connections to: reads like a link you already clicked */
.fband[data-c=blue] .lbl b{color:#d9c2ff; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px}
.fband[data-c=blue] .lbl small{color:#d9c2ff}
/* menu open: hint that the banner itself goes home */
.fban.open .hit::after{content:"⌂ HOME"; position:absolute; right:max(14px, calc((100% - 980px) / 2 + 14px)); top:calc(var(--h) * .52 * .5 - 8px);
  font-family:"Overpass","Arial Narrow",system-ui,sans-serif; font-weight:900; font-size:clamp(10px,1.2vw,13px); letter-spacing:.2em; color:rgba(255,255,255,.85)}
.fban[data-athome] .hit::after{display:none}

/* short screens (laptops): slimmer banner so the GPS and passport get the room */
@media (max-height:860px){ .fban{--h:clamp(84px, 10vh, 108px)} }

/* ===== the menu is a window shade (2026-10-21): it unrolls to the bottom of the screen, and behind it is a window onto calm ===== */
.fdrop{display:block; overflow:hidden; clip-path:none!important; height:70vh}
.fshade{position:relative; z-index:2; transform:translateY(-101%); transition:transform .3s cubic-bezier(.5,0,.75,0)}
.fban.open .fshade{animation:fshade-down .78s cubic-bezier(.25,.9,.3,1) both}
.fban.shade .fshade{animation:none; transform:translateY(-101%); transition:transform .5s cubic-bezier(.55,0,.75,.2)}
@keyframes fshade-down{0%{transform:translateY(-101%)} 62%{transform:translateY(3%)} 78%{transform:translateY(-1.2%)} 90%{transform:translateY(.4%)} 100%{transform:none}}
.fband{transform:none!important; transition:none!important}
/* bottom rail of the shade + pull cord */
.frail{display:block; position:relative; height:12px; background:linear-gradient(#f4f1ea, #cfc8ba 55%, #a99f8e); box-shadow:0 3px 6px rgba(0,0,0,.35)}
.frail i{position:absolute; right:max(24px, calc((100% - 980px) / 2 + 24px)); top:12px; width:2px; height:34px; background:#d8d2c6; transform-origin:50% 0; animation:fcord 2.6s ease-in-out infinite alternate}
.frail i::after{content:""; position:absolute; left:-7px; bottom:-14px; width:12px; height:12px; border:3px solid #d8d2c6; border-radius:50%}
@keyframes fcord{from{transform:rotate(-6deg)} to{transform:rotate(6deg)}}
/* the window behind the shade: a snapshot of calm, crisp pre-2012 air */
.fwin{position:absolute; inset:0; z-index:1; display:block; opacity:0; transition:opacity .25s; cursor:pointer;
  box-shadow:inset 0 0 0 10px #f3f6f8, inset 0 0 0 12px #c9d3da}
.fban.open .fwin,.fban.shade .fwin{opacity:1}
.fsky{position:absolute; inset:0; background:#9fd3ff url(/assets/calm-window.webp?v=1) center 40% / cover no-repeat; animation:fdrift 40s ease-in-out infinite alternate; filter:saturate(1.08) brightness(1.04)}
@keyframes fdrift{from{transform:scale(1.06) translate(-1.5%, 0)} to{transform:scale(1.06) translate(1.5%, -1%)}}
.fwin::before,.fwin::after{content:""; position:absolute; z-index:2; background:#f3f6f8; box-shadow:0 0 0 1px #c9d3da}
.fwin::before{left:50%; top:0; bottom:0; width:10px; margin-left:-5px}
.fwin::after{left:0; right:0; top:58%; height:10px}
.fglare{position:absolute; inset:0; z-index:1; background:linear-gradient(115deg, rgba(255,255,255,.34) 0 14%, rgba(255,255,255,0) 26% 60%, rgba(255,255,255,.18) 66%, rgba(255,255,255,0) 74%), linear-gradient(rgba(214,240,255,.18), rgba(214,240,255,0) 60%)}
.fsill{position:absolute; left:0; right:0; bottom:0; height:16px; z-index:3; background:linear-gradient(#ffffff, #dfe6eb); box-shadow:0 -2px 0 #c9d3da}
.fwin:focus-visible{outline:3px solid #fff; outline-offset:-6px}
@media (prefers-reduced-motion:reduce){ .fban.open .fshade{animation:none; transform:none} .fsky,.frail i{animation:none} }