@font-face{font-family:AlmB;src:url(fonts/Almendra-Bold.woff2) format("woff2");font-display:swap}@font-face{font-family:Caudex;src:url(fonts/Caudex-Regular.woff2) format("woff2");font-display:swap}@font-face{font-family:Caudex;font-weight:700;src:url(fonts/Caudex-Bold.woff2) format("woff2");font-display:swap}@font-face{font-family:Alegreya;src:url(fonts/alegreya-sans-normal-400.woff2);font-display:swap}
:root{--disp:AlmB,serif;--sil:#bcc4be;--bone:#c9d0cb;--seep:#2bee74}
*{box-sizing:border-box}html{background:#040605;scroll-behavior:smooth}body{margin:0;color:var(--bone);font:400 18px/1.36 Caudex,serif;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(rgba(4,6,5,.82),rgba(4,6,5,.82)),url(art/wall.webp) 0 0/760px}
a{color:inherit;text-decoration:none;cursor:pointer}img{display:block;pointer-events:none}canvas,iframe,video{pointer-events:none}.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.top{display:flex;justify-content:space-between;align-items:center;gap:14px;height:26px;padding:0 16px;font:400 14.5px Alegreya;color:var(--sil);background:#030504}.top nav{display:flex;gap:14px}.top a:hover{color:var(--seep)}
.bug{position:relative;display:block;flex:none}.bug img{position:absolute;inset:0}.bug .o{opacity:0;clip-path:inset(62% 0 0 0);transition:opacity .03s,clip-path .13s ease-out}a:hover>.bug .o{opacity:1;clip-path:inset(0)}
.bar{position:sticky;top:0;z-index:20;height:56px;display:flex;align-items:center;gap:16px;padding:0 16px;box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 -1px 0 #000 inset,0 10px 26px rgba(0,0,0,.8)}.bar::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(rgba(0,0,0,.62),rgba(0,0,0,.72) 48%,rgba(0,0,0,.9) 49%,rgba(0,0,0,.8)),url(art/bar.webp) 0 50%/auto 100%}
.logo,.fl{display:flex;align-items:center;gap:0;flex:none}.word{height:44px;width:auto}
.ticker{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:18px;font:400 16px Alegreya}#tk{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#tk b{font:400 11px Alegreya;padding:1px 6px;margin-right:8px;border-radius:3px;color:var(--seep);box-shadow:inset 0 0 0 1px rgba(43,238,116,.6);letter-spacing:.06em}#tk:hover{color:var(--seep)}
.mk{display:flex;gap:16px;flex:none}.mk a{white-space:nowrap}.mk i{font-style:normal;margin-left:6px}.mk .up i{color:#58e08c}.mk .down i{color:#e0746a}.mk .na i{color:#7c867f}
.mastwrap{position:sticky;top:56px;z-index:15;pointer-events:none}.mastwrap::before{content:"";position:absolute;left:0;right:0;top:calc(var(--H,354px) + var(--A,124px) - 2px);bottom:0;pointer-events:none;background:linear-gradient(rgba(4,6,5,.82),rgba(4,6,5,.82)),url(art/wall.webp) center top/760px,#040605;box-shadow:0 10px 16px rgba(0,0,0,.8)}
.glass{position:absolute;left:0;right:0;top:0;height:var(--H,354px);overflow:hidden;background:#000;pointer-events:auto}.layer{position:absolute;inset:0;pointer-events:none}.scene{position:absolute;inset:0;display:flex;justify-content:center;overflow:hidden}.side{flex:1 1 0;min-width:0;background:url(art/frieze.webp) repeat-x;background-size:auto 100%}.side.l{background-position:right center}.side.r{background-position:left center}.win{flex:none;height:100%;width:auto}
.dim{filter:brightness(.46) saturate(.88)}.rest{-webkit-mask-image:radial-gradient(circle calc(var(--H,354px)*1.22) at 50% 42%,#000 10%,rgba(0,0,0,.45) 50%,transparent 100%);mask-image:radial-gradient(circle calc(var(--H,354px)*1.22) at 50% 42%,#000 10%,rgba(0,0,0,.45) 50%,transparent 100%)}
.lit{opacity:var(--c,0);-webkit-mask-image:radial-gradient(circle calc(var(--H,354px)*1.06) at var(--x,50%) var(--y,42%),#000 8%,rgba(0,0,0,.45) 48%,transparent 100%);mask-image:radial-gradient(circle calc(var(--H,354px)*1.06) at var(--x,50%) var(--y,42%),#000 8%,rgba(0,0,0,.45) 48%,transparent 100%)}
.boost{filter:brightness(1.32);opacity:0;transition:opacity .16s;-webkit-mask-image:radial-gradient(circle calc(var(--H,354px)*.61) at 50% 42%,#000 25%,transparent 100%);mask-image:radial-gradient(circle calc(var(--H,354px)*.61) at 50% 42%,#000 25%,transparent 100%)}.glass.open .boost{opacity:1}
.lid{position:absolute;left:50.03%;top:42.222%;height:21.648%;aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;clip-path:inset(100% 0 0 0);transition:clip-path .09s ease-in}.glass.open .lid{clip-path:inset(0);transition:clip-path .13s ease-out}
.socket{position:absolute;inset:0;background:radial-gradient(circle,#0c5a2c 30%,#042412 72%);-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 72%,transparent 74.5%);mask-image:radial-gradient(circle at 50% 50%,#000 72%,transparent 74.5%)}.snk{position:absolute;inset:0;width:100%;height:100%;filter:brightness(1.32)}
.arcade{position:absolute;left:0;right:0;top:var(--H,354px);height:var(--A,124px);background:url(art/arcade2.webp) center/auto 100% repeat-x;box-shadow:0 10px 18px rgba(0,0,0,.75);z-index:1}.arcade.rnd{position:relative;top:auto;height:60px;background-image:url(art/band-rounds.webp)}

.wrap{display:grid;grid-template-columns:minmax(0,430px) minmax(0,1fr) 290px;gap:0;max-width:1400px;margin:auto;padding:22px 14px}.col{padding:0 18px;min-width:0}.col+.col{border-left:1px solid rgba(188,196,190,.2)}
.head{display:flex;align-items:center;gap:9px;margin:0 0 9px;padding-bottom:6px;border-bottom:2px solid rgba(188,196,190,.34)}.head img{height:44px;width:auto;filter:drop-shadow(0 3px 4px #000)}h2{margin:0;font:400 27px/1.1 var(--disp)}.m{background:linear-gradient(#dfe4e0,#c6cdc8 48%,#8e968f 50%,#b9c0ba);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 0 #000)}
.w{display:block;padding:9px 0;border-bottom:1px solid rgba(188,196,190,.14);text-wrap:pretty}.w:hover{color:#e4e9e5}.w:hover em{color:var(--seep)}.w em{font:normal 400 15px Alegreya;color:#74c994;white-space:nowrap}.w em::before{content:" \2014\00a0"}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.reel{display:block;background:rgba(6,12,9,.78);box-shadow:0 0 0 1px #000,0 0 0 3px rgba(148,156,150,.52),0 8px 16px rgba(0,0,0,.65);cursor:pointer;transition:box-shadow .15s}.reel:hover{box-shadow:0 0 0 1px #000,0 0 0 3px var(--seep),0 0 16px rgba(43,238,116,.45)}.t{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}.t img{width:100%;height:100%;object-fit:cover}.d{position:absolute;right:6px;bottom:6px;padding:0 6px;background:rgba(0,0,0,.85);font:400 13.5px Alegreya}.rm{padding:9px 11px 11px}.rt{font-size:17px;line-height:1.26;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.rc{display:block;margin-top:6px;font:400 14.5px Alegreya;color:#74c994}.rc span{color:var(--sil)}
.more{all:unset;display:block;text-align:center;cursor:pointer;margin:15px auto 0;padding:5px 18px;border-radius:4px;font:400 18px var(--disp);background:linear-gradient(#1a2a20,#0e1a13 48%,#040a06 49%,#0b1610);box-shadow:0 0 0 1px rgba(188,196,190,.45)}.more:hover{box-shadow:0 0 0 1px var(--seep)}
.side3 section{margin-bottom:24px}.temp{display:flex;align-items:center;gap:13px}.temp b{font:400 48px/1 var(--disp)}.temp small{font:400 15px Alegreya;color:var(--sil);line-height:1.3}.cond{font-size:17px;margin:5px 0 2px}.dt{font:400 14.5px Alegreya;color:var(--sil)}.dy{display:grid;grid-template-columns:44px 1fr 40px 36px 34px;align-items:center;gap:2px;padding:4px 0;border-top:1px solid rgba(188,196,190,.14);font:400 15.5px Alegreya;margin-top:0}.dy:first-of-type{margin-top:9px}.dy em{font-style:normal;color:#8fd0e8;font-size:13.5px;text-align:right}.dy b{font-weight:400;text-align:right}.dy i{font-style:normal;color:var(--sil);text-align:right}.dy span{color:var(--sil)}
.cw-levels,.cw-controls{display:flex;gap:5px;margin:0 0 8px}.cw-controls{margin:8px 0 3px}.cw-level,.cw-btn{all:unset;flex:1;text-align:center;cursor:pointer;padding:2px 0;font:400 14.5px Alegreya;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(188,196,190,.34)}.cw-level:hover,.cw-btn:hover{box-shadow:inset 0 0 0 1px var(--seep)}.cw-level.is-active{background:linear-gradient(rgba(255,255,255,.17),rgba(255,255,255,.04) 48%,rgba(0,0,0,.25) 49%,rgba(0,0,0,0)),#12683a}.cw-frame{padding:5px;box-shadow:0 0 0 1px #000,0 0 0 3px rgba(148,156,150,.52)}.cw-board{width:100%}.cw-status{text-align:center;margin-top:7px;font-size:16px}.cw-meta{text-align:center;font:400 13.5px Alegreya;color:var(--sil)}
.white-1e1d7{background:#aeb6af!important;color:#123}.black-3c85d{background:#14482b!important;color:#ddd}
.nl{display:block;padding:3px 0;font-size:17px}.nl:hover{color:var(--seep)}
.foot{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;padding:12px 18px;background:linear-gradient(#141b17,#0b110e 48%,#030605 49%)}.fc{display:flex;justify-content:center;flex-wrap:wrap;gap:15px;font:400 17px var(--disp)}.fc a:hover{color:var(--seep)}
.tube{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.9)}.tube.on{display:flex}.frame{width:min(1100px,92vw);aspect-ratio:16/9;background:#000;box-shadow:0 0 0 2px #000,0 0 0 5px rgba(148,156,150,.6)}.frame iframe{width:100%;height:100%;border:0;pointer-events:auto}.tube button{all:unset;position:absolute;right:18px;top:14px;cursor:pointer;font-size:26px;color:var(--bone)}
@media(max-width:1100px){.wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.side3{grid-column:1/3;border:0!important;margin-top:20px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}.grid{grid-template-columns:1fr}.mk{display:none}}
@media(max-width:700px){.wrap{display:block;padding:14px 0}.col{border:0!important;margin-bottom:22px}.side3{display:block}.lid,.boost,.lit{display:none}.top nav{display:none}.word{height:32px}.foot{grid-template-columns:1fr;justify-items:center}#tk b{display:none}}
.side3 h2{font-size:24px;white-space:nowrap}

.side{filter:brightness(var(--dk,1))}


.foot,.arcade.rnd{position:relative}
.dragons{display:flex;align-items:center;justify-content:center;gap:16px;padding:6px 0 12px;font:400 28px var(--disp)}.dragons span{background:linear-gradient(#dfe4e0,#c6cdc8 48%,#8e968f 50%,#b9c0ba);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 0 #000)}.dragons img{height:66px;width:auto}
.head img{height:48px}
@media(max-width:1100px){.side3{grid-template-columns:1fr 1fr}}

/* wizard window: narrower center, marble on the staff is the eye */
.lid{left:calc(50% + (.3136 - .5)*1.73*var(--H,354px));top:19.89%;height:11.4%;border-radius:50%;overflow:hidden;background:radial-gradient(circle,#0c5a2c,#031a0d)}
.boost{-webkit-mask-image:radial-gradient(circle calc(var(--H,354px)*.26) at calc(50% + (.3136 - .5)*1.73*var(--H,354px)) 19.89%,#000 25%,transparent 100%);mask-image:radial-gradient(circle calc(var(--H,354px)*.26) at calc(50% + (.3136 - .5)*1.73*var(--H,354px)) 19.89%,#000 25%,transparent 100%)}
.fbug{flex:none;filter:drop-shadow(0 2px 3px #000);margin-right:4px}
.harbor img{width:100%;box-shadow:0 0 0 1px #000,0 0 0 3px rgba(148,156,150,.52)}
.catch{display:flex;justify-content:center;align-items:flex-end;flex-wrap:wrap;gap:30px;padding:24px 14px 2px}.catch img{height:112px;width:auto;filter:drop-shadow(0 6px 6px #000)}
.hail{all:unset;position:fixed;right:18px;bottom:16px;z-index:40;display:flex;align-items:center;gap:6px;padding:5px 15px 5px 7px;cursor:pointer;border-radius:30px;font:400 20px var(--disp);color:var(--bone);background:linear-gradient(#1f3227,#0f1d15 48%,#040a06 49%,#0b1610);box-shadow:0 0 0 1px #000,0 0 0 3px rgba(148,156,150,.6),0 8px 18px #000}.hail img{height:44px;width:auto}.hail:hover{box-shadow:0 0 0 1px #000,0 0 0 3px var(--seep),0 0 16px rgba(43,238,116,.5)}.hail i{font:normal 400 13px Alegreya;min-width:18px;padding:0 5px;text-align:center;border-radius:10px;background:var(--seep);color:#031}
.shell{position:fixed;right:18px;bottom:16px;z-index:41;width:380px;max-width:calc(100vw - 20px);height:min(590px,calc(100vh - 90px));display:flex;flex-direction:column;background:#070c09;box-shadow:0 0 0 1px #000,0 0 0 4px rgba(148,156,150,.65),0 24px 50px #000;border-radius:8px;overflow:hidden}.shell[hidden]{display:none}
.shell header{display:flex;align-items:center;gap:8px;padding:6px 10px;background:linear-gradient(#233a2d,#13241a 48%,#040a06 49%,#0b1610)}.shell header img{height:40px;width:auto}.shell header div{flex:1;min-width:0}.shell header b{display:block;font:400 21px/1.1 var(--disp)}.shell small{display:flex;align-items:center;gap:6px;font:400 14px Alegreya;color:var(--sil)}.lamp{width:9px;height:9px;border-radius:50%;background:#2bee74;box-shadow:0 0 7px #2bee74}.shell header button{all:unset;cursor:pointer;padding:2px 11px;border-radius:4px;font:400 16px var(--disp);box-shadow:inset 0 0 0 1px rgba(188,196,190,.5)}
.ends{display:flex;align-items:center;gap:5px;padding:5px 10px;font:400 14px Alegreya;color:var(--sil);background:#0b120e}.ends button{all:unset;cursor:pointer;padding:0 9px;border-radius:3px;color:var(--bone);box-shadow:inset 0 0 0 1px rgba(188,196,190,.35)}.ends button.on{background:#12683a}
.log{flex:1;overflow:auto;padding:9px 12px;background:#050a07}.still{text-align:center;color:var(--sil);font-size:16px;margin-top:40px}
.msg{margin:0 0 9px;max-width:88%;width:fit-content}.msg.me{margin-left:auto;text-align:right}.msg small{display:block;font:400 13px Alegreya;color:#74c994}.msg span{display:inline-block;text-align:left;padding:4px 10px;border-radius:7px;background:#16251c;box-shadow:inset 0 0 0 1px rgba(188,196,190,.2);font-size:17px;line-height:1.3;overflow-wrap:anywhere}.msg.me span{background:#0e4427}.msg em{font:italic 400 14px Caudex;color:var(--sil)}.msg audio{pointer-events:auto;height:34px;width:230px;display:block}
.talk{padding:9px 10px;background:#0b120e}.ptt{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;user-select:none;touch-action:none;padding:5px;margin-bottom:8px;border-radius:7px;font:400 22px var(--disp);background:linear-gradient(#1f3227,#0f1d15 48%,#040a06 49%,#0b1610);box-shadow:0 0 0 1px #000,0 0 0 2px rgba(148,156,150,.6)}.ptt img{height:44px;width:auto}.ptt.on{background:linear-gradient(#35f07e,#0f9a4e);color:#03140a;box-shadow:0 0 20px rgba(43,238,116,.75)}
#send{display:flex;gap:6px}#txt{flex:1;min-width:0;padding:6px 9px;border:0;border-radius:5px;background:#030504;color:var(--bone);font:400 17px Caudex;box-shadow:inset 0 0 0 1px rgba(188,196,190,.32)}#send button{all:unset;cursor:pointer;padding:5px 15px;border-radius:5px;font:400 18px var(--disp);background:#12683a}.note{font:400 13.5px Alegreya;color:var(--sil);padding:0 10px 7px;background:#0b120e}.note:empty{display:none}
@media(max-width:700px){.catch img{height:70px}.shell{right:10px;bottom:10px}}

#iris{position:absolute;inset:0;width:100%;height:100%;display:block}

/* riverbank either side of the wizard */
.scene::before{content:"";position:absolute;inset:0;background:url(art/harbor-wide.webp?v=3) center 66%/cover;filter:brightness(var(--dk,1))}
.side{background:none!important;filter:none}.win{position:relative;box-shadow:0 0 0 1px #000,0 0 26px 8px rgba(0,0,0,.8)}
.dim .scene::before{filter:brightness(calc(var(--dk,1)*2.17)) saturate(1.13)}
.catch img{height:104px}
.hail img,.shell header img{height:38px;width:auto;max-width:66px}.ptt img{height:38px;width:auto}.catch img[alt=Lighthouse]{height:132px}.catch img[alt=Lobster]{height:132px}

/* harbor backdrop + two sliding glass panes that run along the arcade rail */
.port{position:absolute;left:50%;top:0;width:var(--pw,100%);max-width:none;height:auto;transform:translate3d(-50%,var(--py,0),0);will-change:transform}
.dusk{position:absolute;inset:0;background:#030605;opacity:var(--dark,0);pointer-events:none}
.cand{position:absolute;inset:0;pointer-events:none;opacity:var(--c,0);background:radial-gradient(circle calc(var(--H,354px)*.7) at var(--x,50%) var(--y,50%),rgba(255,226,180,.16),transparent 100%)}
.pane{position:absolute;left:0;bottom:0;height:var(--ph,200px);width:calc(var(--ph,200px)*var(--r));cursor:grab;touch-action:pan-y;user-select:none;will-change:transform;box-shadow:0 0 0 1px #000,-6px 0 18px rgba(0,0,0,.65),6px 0 18px rgba(0,0,0,.65)}.pane.drag{cursor:grabbing;box-shadow:0 0 0 1px #000,0 0 30px 6px rgba(0,0,0,.8)}.pane>img{width:100%;height:100%}
.pane .lid{left:31.36%;top:19.89%;height:11.4%;aspect-ratio:1;transform:translate(-50%,-50%)}.pglow{position:absolute;left:31.36%;top:19.89%;width:60%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(70,255,150,.26),transparent 55%);opacity:0;transition:opacity .16s;pointer-events:none}.glass.open .pglow{opacity:1}

/* panes: full height between top and bottom rails, one track, four slots */
.pane{top:0;bottom:0;height:auto;width:var(--pw2,25%);overflow:hidden;background:none;border-left:4px solid #1b211d;border-right:4px solid #1b211d;box-shadow:inset 1px 0 0 rgba(200,210,204,.35),inset -1px 0 0 rgba(200,210,204,.35),-5px 0 14px rgba(0,0,0,.6),5px 0 14px rgba(0,0,0,.6)}.pane.drag{box-shadow:inset 1px 0 0 rgba(200,210,204,.35),inset -1px 0 0 rgba(200,210,204,.35),-5px 0 14px rgba(0,0,0,.6),5px 0 14px rgba(0,0,0,.6)}.pane.settle{transition:transform .13s ease-out}
.pane>img{object-fit:cover;object-position:var(--ox,0) var(--oy,0)}
.pane .lid{left:var(--lx,31%);top:var(--ly,20%);height:var(--ld,11%);transform:translate(-50%,-50%)}.pglow{left:var(--lx,31%);top:var(--ly,20%);width:calc(var(--ld,11%)*0 + var(--gd,200px))}
.trail{position:absolute;left:0;right:0;top:0;height:var(--rh,12px);z-index:30;background:linear-gradient(rgba(255,255,255,.1),rgba(0,0,0,.35)),url(art/bar.webp) 0 50%/auto 100%;box-shadow:0 3px 7px rgba(0,0,0,.7);pointer-events:none}

html,body{overflow-anchor:none}.cand{display:none}
.glass{background:linear-gradient(rgba(4,6,5,.7),rgba(4,6,5,.7)),url(art/wall.webp) center/620px,#050806}.port{transform:translate3d(-50%,0,0);box-shadow:0 0 44px 22px rgba(3,5,4,.9)}
.glass{background:#050806}.glass::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(4,6,5,.7),rgba(4,6,5,.7)),url(art/wall.webp) center/620px}

.port{box-shadow:none}.glass::before{display:none}

.port{left:0;transform:translate3d(0,0,0)}

#portm{display:none;left:0}

/* stone top bar; plaque hangs from it over the sliding panes; ticker on the wall under the arcade */
.bar{height:52px;gap:18px;box-shadow:0 8px 18px rgba(0,0,0,.75);font:400 19px var(--disp)}.bar::before{background:linear-gradient(rgba(255,255,255,.16) 0,rgba(255,255,255,0) 7%,rgba(0,0,0,0) 86%,rgba(0,0,0,.55) 100%),url(art/stone-bar.webp) center/auto 100%}
.bar nav{display:flex;gap:20px;margin-left:auto}.bar a,#date{text-shadow:0 1px 2px #000,0 0 6px rgba(0,0,0,.8);color:#fff}.bar nav a:hover{color:var(--seep)}#date{font:400 16px Alegreya}.logo{gap:0}
.mastwrap{top:52px;z-index:21}.trail{display:none}

.ticker{position:absolute;left:0;right:0;top:calc(var(--H,354px) + var(--A,124px));height:var(--T,46px);padding:0 calc(var(--T,46px)*2.7);display:flex;align-items:center;justify-content:space-between;gap:20px;font:400 15px Alegreya;z-index:2;pointer-events:auto}.ticker a{pointer-events:auto}

.mk{display:flex}
@media(max-width:1100px){.mk{display:none}}
@media(max-width:700px){#date{display:none}.bar{padding:0 8px;font-size:16px}.bar nav{gap:12px}.ticker{padding:0 8px}}
.ticker::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(#e4e9e5,#8f9892);box-shadow:0 1px 0 #000,0 3px 6px rgba(0,0,0,.7);pointer-events:none;z-index:-1}

/* the mark sits as a crest on the plaque's top edge, between the dragons */

/* warm sepia over the surf town; a plain filter, so the art stays as is */
#port{filter:none}/* isle backdrop has the sepia baked in (sull/isle.py), no live filter on the big moving image */
/* the channel's password gate */
.gate{display:flex;flex-direction:column;gap:7px;padding:14px;font:400 16px Alegreya;color:var(--bone)}.gate input{padding:7px 9px;border:0;border-radius:5px;background:#030504;color:var(--bone);font:400 17px Caudex;box-shadow:inset 0 0 0 1px rgba(188,196,190,.32)}.gate button{all:unset;cursor:pointer;align-self:flex-start;padding:5px 15px;border-radius:5px;color:var(--bone);box-shadow:inset 0 0 0 1px rgba(188,196,190,.45)}
[hidden]{display:none!important}
/* larger crest: the wave globe rises off the plaque into the stone */

/* sign and bug 20% larger, growing downward: the bug's top stays where it was */

/* in very wide windows the bug stops growing, so it never cuts off at the top of the page or touches the lettering */

/* worn dock wood replaces the stone wall and the stone bar */
body::before,.mastwrap::before{background:linear-gradient(rgba(5,5,5,.87),rgba(5,5,5,.87)),url(art/dock-wall.webp?v=2) center top/1500px auto,#070707}
.bar::before{background:linear-gradient(rgba(255,255,255,.14) 0,rgba(255,255,255,0) 8%,rgba(0,0,0,0) 80%,rgba(0,0,0,.6) 100%),url(art/dock-bar.webp?v=2) center/auto 100%}
/* ticker sits on a rounded strip of DARK green gloss between the narwhals */
.ticker::before{content:"";position:absolute;z-index:-1;left:calc(var(--T,46px)*2.1);right:calc(var(--T,46px)*2.1);top:4px;bottom:4px;border-radius:999px;background:linear-gradient(rgba(255,255,255,.15),rgba(255,255,255,.045) 48%,rgba(0,0,0,0) 52%,rgba(0,0,0,.3)),linear-gradient(#072b1b,#041a10 55%,#020f09);box-shadow:inset 0 1px 0 rgba(200,255,225,.45),inset 0 -1px 0 rgba(0,0,0,.5),inset 0 0 0 1px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.7);pointer-events:none}
@media(max-width:700px){.ticker::before{left:4px;right:4px}.ticker{padding:0 16px}}
/* top bar is the same dark wood as the page below */
.bar::before{background:linear-gradient(rgba(5,5,5,.87),rgba(5,5,5,.87)),url(art/dock-wall.webp?v=2) center top/1500px auto,#070707}
/* top bar: Menu plaque on the left, the conch on the right (hangs a little past the edge); fixed over the bar so the crest can still rise into it */
.menu{position:fixed;left:16px;top:10px;z-index:30}.mbtn{all:unset;display:block;cursor:pointer;border:4px solid transparent;border-image:url(art/plate.webp) 30 / 4px stretch;filter:drop-shadow(0 3px 2px #000) drop-shadow(0 6px 10px rgba(0,0,0,.8))}.mbtn img{height:24px;width:auto}.mbtn:hover img,.menu.open .mbtn img{filter:brightness(1.18)}
.mdrop{position:absolute;left:0;top:100%;min-width:100%;margin-top:0;padding:8px 0;display:none;flex-direction:column;font:400 20px var(--disp);background:linear-gradient(rgba(5,5,5,.9),rgba(5,5,5,.9)),url(art/dock-wall.webp?v=2) center/900px,#070707;border:6px solid transparent;border-image:url(art/plate.webp) 30 / 6px stretch;box-shadow:0 14px 30px rgba(0,0,0,.85)}.menu.open .mdrop{display:flex}
.mdrop a{padding:5px 18px;white-space:nowrap;color:var(--bone)}.mdrop a:hover{color:var(--seep);background:rgba(43,238,116,.07)}.mdrop hr{border:0;height:1px;margin:5px 12px;background:rgba(188,196,190,.25)}
.conch{position:fixed;right:22px;top:1px;z-index:30;display:block;cursor:pointer;filter:drop-shadow(0 4px 4px #000) drop-shadow(0 8px 14px rgba(0,0,0,.7));transition:filter .15s}.conch img{height:54px;width:auto}.conch:hover{filter:drop-shadow(0 4px 4px #000) drop-shadow(0 0 12px rgba(43,238,116,.55))}
.conch i{position:absolute;left:10px;top:4px;font:normal 400 13px Alegreya;min-width:20px;padding:1px 6px;text-align:center;border-radius:10px;background:var(--seep);color:#031;box-shadow:0 1px 3px #000}
@media(max-width:700px){.menu{left:6px;top:7px}.mbtn img{height:18px}.conch img{height:38px}.conch{right:10px;top:7px}}

/* four window toggles, inset in the top bar left of the conch: pewter bezels, each a little backlit pane; lit = that window is in the masthead */
.pane{transition:opacity .35s,visibility 0s}.pane.off{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s,visibility 0s .35s}.pane.settle{transition:opacity .35s,transform .4s cubic-bezier(.2,.8,.25,1)}
.tgs{position:fixed;top:9px;right:100px;z-index:30;display:flex;gap:9px;padding:5px 8px;border-radius:7px;background:linear-gradient(#050505,#121212);box-shadow:inset 0 2px 5px rgba(0,0,0,.95),inset 0 -1px 0 rgba(255,255,255,.07),0 1px 0 rgba(201,208,203,.18),0 0 0 1px #000}
.tg{all:unset;box-sizing:border-box;cursor:pointer;position:relative;width:50px;height:32px;padding:0;border-radius:4px;border:1px solid;border-color:#e4e9e5 #9aa29c #5f6862;background:#020403;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 1px 2px #000;transition:transform .08s}
.tg i{display:block;width:100%;height:100%;border-radius:3px;border:1px solid #000;background:center/cover #020403;filter:brightness(.22) saturate(.35);box-shadow:inset 0 2px 5px rgba(0,0,0,.95);transition:filter .25s,box-shadow .25s}
.tg::after{content:"";position:absolute;inset:1px;border-radius:2px;pointer-events:none;background:linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.04) 45%,transparent 50%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.6)}
.tg:hover i{filter:brightness(.42) saturate(.55)}.tg:active{transform:translateY(1px)}.tg:focus-visible{outline:2px solid var(--seep);outline-offset:2px}
.tg.on{box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 1px 2px #000,0 0 10px rgba(43,238,116,.35)}
.tg.on i{filter:brightness(1.18) saturate(1.1);box-shadow:inset 0 0 6px rgba(150,255,200,.45),inset 0 0 14px rgba(43,238,116,.25)}.tg.on:hover i{filter:brightness(1.32) saturate(1.15)}
@media(max-width:700px){.tgs{display:none}}

/* splash: the marble alone on black, half the screen tall; click anywhere to enter (index.html, SPLASH_ONCE) */
#splash{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:#000;cursor:pointer;outline:none}
#splash img{height:50vh;width:auto;max-width:92vw;object-fit:contain;display:block;user-select:none;-webkit-user-drag:none}
/* the dissolve: the globe wakes with light, swells and melts; the black opens outward from it in a soft ring; sparks drift off (canvas) */
@property --r{syntax:'<percentage>';inherits:false;initial-value:-16%}
#splash{--r:-16%;-webkit-mask:radial-gradient(circle at 50% 50%,transparent var(--r),#000 calc(var(--r) + 16%));mask:radial-gradient(circle at 50% 50%,transparent var(--r),#000 calc(var(--r) + 16%))}
#splash::after{content:"";position:absolute;left:50%;top:50%;width:50vh;height:50vh;transform:translate(-50%,-50%) scale(.6);border-radius:50%;opacity:0;pointer-events:none;
 background:radial-gradient(circle,rgba(235,255,245,.95) 0,rgba(140,235,190,.55) 28%,rgba(43,238,116,.18) 52%,transparent 70%)}
#splash.out{pointer-events:none;transition:--r 1.25s cubic-bezier(.55,0,.3,1) .28s;--r:116%}
#splash.out::after{animation:sull-flare 1.1s ease-out forwards}
#splash.out img{transition:transform 1s cubic-bezier(.3,0,.2,1),filter .5s ease-out,opacity .7s ease-in .35s;transform:scale(1.22);filter:brightness(2.1) saturate(1.3) blur(5px);opacity:0}
@keyframes sull-flare{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.6)}}
.sparks{position:fixed;inset:0;z-index:1001;pointer-events:none}
#splash.calm{transition:opacity .6s ease;opacity:0}#splash.calm::after{animation:none}
html.splashing{overflow:hidden}html.nosplash #splash{display:none}
/* top bar: very dark green glossy enamel (replaces the dock wood), split-lit like the ticker and the chat bands, sitting on one pewter-silver wire */
.bar::before{background:linear-gradient(to top,#000 0 1px,#b4bcb6 1px 2px,#000 2px 3px,transparent 3px),radial-gradient(130% 260% at 50% -150%,rgba(255,255,255,.17) 0,rgba(255,255,255,.05) 48%,rgba(255,255,255,0) 49%),linear-gradient(180deg,#072a1c 0,#04190f 52%,#020d08 100%)}
.bar{box-shadow:inset 0 1px 0 rgba(200,255,225,.12),0 8px 18px rgba(0,0,0,.75)}
/* toggles sit straight on the enamel, no tray behind them (Neo: the tray's black edge overhung the wire and the bar) */
.tgs{top:10px;padding:0;background:none;box-shadow:none;border-radius:0}

/* ski report easter egg: a small candy-stripe North Pole on the snowcapped summit, muted to the photo's sepia, scaled with the picture
   (--ph set by sullivania.js), behind the stained-glass panes like part of the scenery; a faint warm glow now and then says "click me" */
.skiflag{all:unset;position:absolute;left:0;top:0;width:24px;height:calc(var(--ph,24px) + 8px);cursor:pointer;pointer-events:auto;transition:opacity .3s;filter:sepia(.3) drop-shadow(0 1px 1px rgba(0,0,0,.55))}
.skiflag.gone{opacity:0;pointer-events:none}
.skiflag .pole{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:max(2px,calc(var(--ph,24px)*.15));height:var(--ph,24px);border-radius:1px;
 background:linear-gradient(90deg,rgba(0,0,0,.3),rgba(255,255,255,.3) 35%,rgba(255,255,255,0) 60%,rgba(0,0,0,.35)),repeating-linear-gradient(-35deg,#eadcc2 0 calc(var(--ph,24px)*.1),#a3473a calc(var(--ph,24px)*.1) calc(var(--ph,24px)*.2))}
.skiflag::before{content:"";position:absolute;left:50%;bottom:calc(var(--ph,24px) - 1px);transform:translateX(-50%);width:max(4px,calc(var(--ph,24px)*.26));aspect-ratio:1;border-radius:50%;
 background:radial-gradient(circle at 35% 30%,#fbfaf6 0,#d9dcd6 30%,#8a8f88 75%,#4a4f4a 100%)}
.skiflag::after{content:"";position:absolute;left:50%;bottom:calc(var(--ph,24px) - var(--ph,24px)*.5);transform:translateX(-50%);width:calc(var(--ph,24px)*1.5);aspect-ratio:1;border-radius:50%;pointer-events:none;
 background:radial-gradient(circle,rgba(255,236,205,.55) 0,rgba(255,200,170,.16) 40%,transparent 68%);opacity:0;animation:sull-pole 6s ease-in-out infinite}
.skiflag:hover::after,.skiflag:focus-visible::after{animation:none;opacity:1}.skiflag:hover{filter:sepia(.15) drop-shadow(0 1px 1px rgba(0,0,0,.55)) brightness(1.15)}
.skiflag:focus-visible{outline:2px solid var(--seep);outline-offset:3px}
@keyframes sull-pole{0%,70%,100%{opacity:0}82%{opacity:.75}}
@media(prefers-reduced-motion:reduce){.skiflag::after{animation:none}}
.skirep{position:fixed;z-index:40;width:min(600px,94vw);border:1px solid;border-color:#e4e9e5 #9aa29c #5f6862;border-radius:12px;overflow:hidden;color:var(--bone);
 background:linear-gradient(rgba(5,7,6,.94),rgba(5,7,6,.94)),url(art/dock-wall.webp?v=2) center/900px,#050706;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 18px 40px rgba(0,0,0,.85);
 clip-path:inset(0 0 100% 0 round 12px);transition:clip-path .45s cubic-bezier(.3,.7,.2,1)}
.skirep.open{clip-path:inset(0 0 0 0 round 12px)}
.skh{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid #8f9892;background:radial-gradient(130% 260% at 50% -150%,rgba(255,255,255,.17) 0,rgba(255,255,255,.05) 48%,rgba(255,255,255,0) 49%),linear-gradient(#0a3a25,#03160e)}
.skh div{flex:1}.skh b{display:block;font:400 22px/1.1 var(--disp);color:#dfe6e1;text-shadow:0 -1px 0 rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.18)}.skh small{font:400 14px Alegreya;color:#a9c4b9}
.skx{all:unset;cursor:pointer;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(201,208,203,.55);color:#e6eeea;font-size:14px}.skx:hover{border-color:#e4e9e5;color:#fff}
.skirep table{width:100%;border-collapse:collapse;font:400 16px Alegreya}
.skirep th{font:400 13px Alegreya;color:#9db8ae;text-align:right;padding:8px 14px 4px;border-bottom:1px solid rgba(201,208,203,.2)}.skirep th:first-child{text-align:left}
.skirep td{padding:5px 14px;text-align:right;border-bottom:1px solid rgba(201,208,203,.08);font-variant-numeric:tabular-nums}.skirep td:first-child{text-align:left}
.skirep td a{color:var(--bone)}.skirep td a:hover{color:var(--seep)}.skirep td a i{font-style:normal;font-size:12px;color:#7fd0a6}.skirep td small{margin-left:8px;font-size:12px;color:#7f948c}
.skirep tr.skst th{text-align:left;font:400 15px var(--disp);color:#d9e3dd;padding:10px 14px 3px;border-bottom:1px solid rgba(201,208,203,.25)}
.skn{text-align:center!important;color:#9db8ae;padding:18px!important}
.skf{margin:0;padding:8px 14px 11px;font:400 13px/1.35 Alegreya;color:#8fa79d}.skf span{color:#6f847b}
@media(max-width:700px){.skirep td small{display:none}.skirep td,.skirep th{padding-left:8px;padding-right:8px}}

/* breaking glass: hairline cracks with a dark underside, and falling shards */
.pane svg.cracks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.pane svg.cracks polyline{fill:none;stroke:rgba(236,248,242,.9);stroke-width:1.1;vector-effect:non-scaling-stroke;stroke-linejoin:round;filter:drop-shadow(0 1px 0 rgba(0,0,0,.75))}
.pane svg.cracks circle{fill:none;stroke:rgba(236,248,242,.7);stroke-width:1;vector-effect:non-scaling-stroke}
.shard{position:fixed;z-index:35;pointer-events:none;filter:drop-shadow(0 4px 6px rgba(0,0,0,.6))}.shard img{width:100%;height:100%;object-fit:cover;display:block}

/* tides on the Westport River, under the forecast */
.tides{margin-top:12px;padding-top:9px;border-top:1px solid rgba(188,196,190,.18);font:400 15px Alegreya}
.tdh{font:400 16px var(--disp);color:var(--bone);margin-bottom:4px}
.td{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:6px}.td b{font-weight:400}.td .up{color:#7fd0a6}.td .dn{color:#c9b18a}
.tdn{font-size:14px;color:var(--sil);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tides .dt{margin-top:7px}

/* The Almanac: tonight's moon (drawn from the Naval Observatory's phase and how much is lit), spring tides, sunrise and sunset */
.moon{display:flex;align-items:center;gap:13px}.moon svg{width:58px;height:58px;flex:none;filter:drop-shadow(0 0 6px rgba(233,228,212,.18))}
.moon .mdark{fill:#141a17}.moon .mlit{fill:#e6e1d2}.moon .mrim{fill:none;stroke:rgba(201,208,203,.35);stroke-width:.8}
.moon b{display:block;font:400 18px var(--disp);color:var(--bone)}.moon span{font:400 15px Alegreya;color:var(--sil)}.moon small{display:block;font:400 13.5px Alegreya;color:#8fa79d;margin-top:1px;white-space:nowrap}
.spring{margin-top:9px;font:400 14px/1.35 Alegreya;color:#7fd0a6}
.sunr{display:flex;justify-content:space-between;margin-top:11px;padding-top:9px;border-top:1px solid rgba(188,196,190,.18);font:400 15px Alegreya;color:var(--sil)}.sunr b{font-weight:400;color:var(--bone)}
/* ticker: the same very dark green glossy enamel as the top bar, edge to edge behind the narwhals, with the top bar's exact pewter-silver
   wire (black / #b4bcb6 / black, 1px each) along both its top and bottom edges. Replaces the rounded glass strip and the old silver line. */
.ticker::before{left:0;right:0;top:0;bottom:0;border-radius:0;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;
 background:linear-gradient(to bottom,#000 0 1px,#b4bcb6 1px 2px,#000 2px 3px,transparent 3px),linear-gradient(to top,#000 0 1px,#b4bcb6 1px 2px,#000 2px 3px,transparent 3px),
  radial-gradient(130% 260% at 50% -150%,rgba(255,255,255,.17) 0,rgba(255,255,255,.05) 48%,rgba(255,255,255,0) 49%),linear-gradient(180deg,#072a1c 0,#04190f 52%,#020d08 100%)}
.ticker::after{display:none}
@media(max-width:700px){.ticker::before{left:0;right:0}}
/* the wire, refined (Neo, 2026-11-02): darker pewter and as thin as the screen allows (a .5px hairline on sharp screens, 1px on others),
   with black either side so it reads crisp. Same wire on the top bar's bottom edge, the ticker's top and bottom, and around each reel. */
:root{--pewter:#7c847e}
.bar::before{background:radial-gradient(130% 260% at 50% -150%,rgba(255,255,255,.17) 0,rgba(255,255,255,.05) 48%,rgba(255,255,255,0) 49%),linear-gradient(180deg,#072a1c 0,#04190f 52%,#020d08 100%)}
.bar{border-bottom:.5px solid var(--pewter);box-shadow:inset 0 1px 0 rgba(200,255,225,.12),inset 0 -1px 0 #000,0 1px 0 #000,0 8px 18px rgba(0,0,0,.75)}
.ticker::before{border-top:.5px solid var(--pewter);border-bottom:.5px solid var(--pewter);box-shadow:inset 0 1px 0 #000,inset 0 -1px 0 #000,0 -1px 0 #000,0 1px 0 #000;
 background:radial-gradient(130% 260% at 50% -150%,rgba(255,255,255,.17) 0,rgba(255,255,255,.05) 48%,rgba(255,255,255,0) 49%),linear-gradient(180deg,#072a1c 0,#04190f 52%,#020d08 100%)}
/* reels: rounded corners in the same hairline pewter wire */
.reel{border-radius:9px;overflow:hidden;border:.5px solid var(--pewter);box-shadow:0 0 0 1px #000,0 8px 16px rgba(0,0,0,.65)}
.reel:hover{border-color:#c9d0cb;box-shadow:0 0 0 1px #000,0 0 14px rgba(43,238,116,.35)}
/* market prices on the ticker: smaller than the headline (Neo, 2026-11-02) */
.mk{gap:14px;font-size:13px}.mk i{margin-left:5px}

/* Check the Route: two remembered addresses, both routes compared, and live DOT camera stills along the drive */
#rt{display:grid;grid-template-columns:1fr auto;gap:6px}#rt input{grid-column:1;min-width:0;padding:6px 9px;border:.5px solid var(--pewter);border-radius:6px;background:#030807;color:var(--bone);font:400 15px Alegreya;box-shadow:inset 0 2px 4px rgba(0,0,0,.7)}
#rt input:focus{outline:none;border-color:#c9d0cb}#rt button{grid-column:2;grid-row:1/3;all:unset;cursor:pointer;padding:0 12px;border-radius:6px;border:.5px solid #c9d0cb;color:#fff;font:400 15px var(--disp);
 background:radial-gradient(120% 120% at 50% -30%,rgba(255,255,255,.3) 0,rgba(255,255,255,.08) 48%,rgba(255,255,255,0) 49%),linear-gradient(#138050,#064023);box-shadow:0 1px 3px #000}#rt button:hover{filter:brightness(1.15)}
.rr{display:grid;grid-template-columns:1fr auto;gap:0 8px;margin-top:9px;font:400 15px Alegreya}.rr b{font:400 18px var(--disp);color:var(--bone)}.rr small{grid-column:1/3;font-size:13px;color:#8fa79d}
.rr.best span,.rr.best b{color:#7fd0a6}.rnote{margin:8px 0 0;font:400 13px Alegreya;color:#8fa79d}
.cams{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:11px}.cams a{display:block;border:.5px solid var(--pewter);border-radius:6px;overflow:hidden;background:#000;text-decoration:none}
.cams img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}.cams span{display:block;padding:3px 5px;font:400 11px/1.2 Alegreya;color:var(--sil);text-align:center}.cams a:hover{border-color:#c9d0cb}
/* ticker narwhals face inward, toward each other (Neo, 2026-11-02) */

/* section headings cast the same shadow as their pewter icons (0 3px 4px, light from above), so word and icon sit in one light */
.head h2 .m{filter:drop-shadow(0 1px 0 #000) drop-shadow(0 3px 4px #000)}   /* silver letters are cut-out text, so the shadow comes from the letter shapes, like the icons */
/* panel toggles sit just under the masthead layer */

.tgs{z-index:20}

/* each pane's own painted frame, drawn from its picture on all four sides so it never gets cropped away as the pane narrows */
.pane[data-fs]::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-style:solid;border-width:var(--fw,12px);
 border-image-source:var(--fsrc);border-image-slice:var(--fs);border-image-repeat:stretch}
/* How To mark on Latest Reels: small enamel tag, top left of the thumbnail */
.reel .how{position:absolute;left:6px;top:6px;padding:1px 7px;border-radius:4px;background:#072b1b;border:.5px solid var(--pewter);box-shadow:0 0 0 1px #000;font:400 13px Alegreya;letter-spacing:.02em;color:#d9e6dc}
/* Editor (signed in via e-d-i-t): a small ✕ on each story and reel hides it on Sullivania; a quiet pill at the bottom left to sign out */
.editing #wirelist .w{position:relative;padding-right:30px}.editing .reel{position:relative}
.sx{position:absolute;top:4px;right:4px;width:24px;height:24px;padding:0;border-radius:50%;border:.5px solid var(--pewter);background:#072b1b;color:#d9e6dc;font:400 13px/22px Alegreya;cursor:pointer;box-shadow:0 0 0 1px #000;opacity:.75}
.sx:hover{opacity:1;background:#5a1a12;border-color:#e0a090}.reel .sx{top:6px;right:6px;z-index:2}
.sedit{position:fixed;left:12px;bottom:12px;z-index:50;padding:5px 12px;border-radius:14px;background:#072b1b;border:.5px solid var(--pewter);box-shadow:0 0 0 1px #000;font:400 14px Alegreya;color:#d9e6dc}.sedit a{color:#74c994}
/* Navbar sign (Neo 11/4): his Firefly Celtic-knot sign (NS1 row 3, art/nav-sign-celtic, cut only) sits in a taller bar; the old big plaque is gone; the masthead window closes all the way on scroll */
.bar{height:76px}.mastwrap{top:76px}
.menu{top:22px}.tgs{top:22px}.conch{top:11px}
.navsign{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:block;z-index:1;line-height:0;filter:drop-shadow(0 2px 2px #000) drop-shadow(0 6px 10px rgba(0,0,0,.75))}
.navsign img{display:block;height:58px;width:auto;filter:brightness(1.12)}
/* narrower windows: centered in the gap between Menu (ends 131px) and the window buttons (start 100vw-384px), shrunk to fit */
@media(max-width:1600px){.navsign{left:calc(50vw - 126px)}.navsign img{height:min(58px,calc((100vw - 535px)/11.68))}}
@media(max-width:700px){.bar{height:56px}.mastwrap{top:56px}.menu{top:15px}.conch{top:9px}.navsign{left:calc(50vw + 15px)}.navsign img{height:min(50px,calc((100vw - 150px)/8.93))}}