/* Bay theme: the painted bay at the top of the page (canvas, title, buoy labels, pop card). */
/* ---------- hero: the painted bay ---------- */
.bay{position:relative; height:clamp(520px, 80svh, 760px); margin-top:-6px; overflow:hidden; isolation:isolate}
.bay-fallback{position:absolute; inset:auto 0 12% 0; display:flex; justify-content:center; transition:opacity .8s}
.bay-fallback img{width:min(96%, 640px); opacity:.95}
.bay.live .bay-fallback{opacity:0}
#bay-canvas{position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; transition:opacity 1.2s ease; touch-action:pan-y; cursor:crosshair}
.bay.live #bay-canvas{opacity:1}
.bay-title{position:absolute; left:50%; top:clamp(12px, 3.5svh, 40px); transform:translateX(-50%); width:min(58vw, 290px); z-index:3; pointer-events:none; filter:drop-shadow(0 0 14px rgba(239,233,222,.85))}
.bay-title img{display:block; width:100%; height:auto}
.bay-title h1{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
#bay-tags{position:absolute; inset:0; z-index:4; pointer-events:none}
/* after dark the bay goes denim, so the title gets a soft paper halo to stay readable */
.bay.night .bay-title img{filter:drop-shadow(0 0 14px rgba(239,233,222,.95)) drop-shadow(0 0 5px rgba(239,233,222,.9))}
.bay.night .bay-hint{color:rgba(239,233,222,.85)}
.bay-tag{
  position:absolute; left:0; top:0; pointer-events:auto; cursor:pointer;
  font:600 12px/1 var(--f-caps); letter-spacing:.16em; text-transform:uppercase; color:var(--ink);
  background:rgba(239,233,222,.92); border:1px solid var(--line); border-radius:3px 5px 4px 6px;
  padding:7px 9px 6px; white-space:nowrap; box-shadow:0 2px 0 rgba(59,90,140,.12);
  transition:background .2s, color .2s;
}
.bay-tag::before{content:""; position:absolute; inset:-9px -4px}   /* a 44px-tall tap area around the small label */
.bay-tag::after{content:""; position:absolute; left:50%; bottom:-7px; width:1px; height:7px; background:var(--line)}
/* .on = the buoy you tapped (buoy or label, same thing); hover only on real mice so phones don't get a stuck highlight */
.bay-tag.on{background:var(--ink); color:var(--paper)}
@media (hover:hover){.bay-tag:hover{background:var(--ink); color:var(--paper)}}
.bay-hint{position:absolute; left:0; right:0; bottom:14px; z-index:3; text-align:center; pointer-events:none;
  font:italic 400 16px/1.3 var(--f-body); color:var(--soft); transition:opacity .6s}
.bay-hint.gone{opacity:0}
.bay-pop{
  position:absolute; z-index:5; left:50%; bottom:clamp(70px, 14%, 120px); width:min(88%, 340px);
  transform:translate(-50%, 12px); opacity:0; transition:opacity .25s, transform .25s;
  background:var(--paper) url(../art/paper.jpg); background-size:480px; border:1px solid var(--line);
  padding:16px 18px 18px; text-align:center; box-shadow:0 10px 30px -12px rgba(59,90,140,.45);
}
.bay-pop.on{opacity:1; transform:translate(-50%, 0)}
.bay-pop h3{font:400 40px/1 var(--f-script); margin:2px 0 6px}
.bay-pop p{margin:0 0 12px; font-size:17px}
.bay-pop .x{position:absolute; right:6px; top:4px; border:0; background:none; font-size:24px; line-height:1; color:var(--soft); cursor:pointer; padding:6px}