:root{--cyan:#00d9ff;--pink:#d24693;--green:#00ffae;--ink:#071d31;--paper:#bff4ff;--pale:#e8fcff;--line:#167c9b}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font:12px 'PT Mono','Courier New',monospace;background:var(--cyan);min-height:100vh;overflow-x:hidden}a{color:#004e78}.phosphor-screen{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.07;background:repeating-linear-gradient(0deg,rgba(255,255,255,.14) 0,rgba(255,255,255,.14) 1px,transparent 1px,transparent 3px)}.page-shell{position:relative;z-index:2;width:640px;max-width:calc(100% - 20px);margin:14px auto 30px;background:rgba(222,250,255,.91);border:2px outset #bdf6ff;box-shadow:8px 8px 0 rgba(210,70,147,.20),0 0 22px rgba(210,70,147,.22)}
/* Hotline convention: readable ink + fuchsia shadow. The shadow, not the letters, is haunted. */
.tinyline,.hero-sub,.section-title,.main-menu a,h1,.thumb-shelf span,.guestbook b,.bye,.updates-list b,.hero-deco,.marquee-strip,.radio-head,.radio-display,#portal-menu a{ text-shadow:2px 2px 0 rgba(210,70,147,.72),2px 2px 7px rgba(210,70,147,.42);animation:pinkPulse 3.7s ease-in-out infinite alternate}@keyframes pinkPulse{0%,100%{text-shadow:2px 2px 0 rgba(210,70,147,.65),2px 2px 4px rgba(210,70,147,.28)}50%{text-shadow:2px 2px 0 rgba(210,70,147,.95),2px 2px 11px rgba(210,70,147,.78),0 0 17px rgba(210,70,147,.18)}}
.hero{text-align:center;padding:8px 10px 0;background:linear-gradient(180deg,#dffbff 0,#9cecff 46%,var(--cyan) 100%);border-bottom:2px solid var(--pink)}.tinyline{font-size:9px;letter-spacing:.5px;color:#005a79;border-bottom:1px dotted var(--pink);padding:3px}.hero-logo-link{display:block;width:520px;max-width:94%;margin:10px auto 2px}.hero-logo{display:block;width:100%;transition:filter .15s}.hero-logo-link:hover .hero-logo{animation:jiggle .32s steps(2,end) infinite;filter:drop-shadow(3px 3px 0 rgba(210,70,147,.55))}@keyframes jiggle{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(-2px,1px) rotate(-.5deg)}50%{transform:translate(2px,-1px) rotate(.5deg)}75%{transform:translate(-1px,-1px) rotate(.2deg)}100%{transform:translate(1px,1px) rotate(-.2deg)}}.hero-sub{font-size:11px;font-weight:bold;letter-spacing:.5px;margin:1px 0 9px;color:#003f66}#menu-anchor{height:51px}.main-menu{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;min-height:51px;background:#d9faff;border:2px inset #fff;padding:3px}.main-menu.stuck{position:fixed;z-index:100;top:0;left:50%;width:640px;max-width:calc(100% - 20px);transform:translateX(-50%);box-shadow:0 4px 0 rgba(210,70,147,.4),0 7px 15px rgba(0,0,0,.2);animation:snap .18s steps(3,end)}@keyframes snap{from{margin-top:-51px}to{margin-top:0}}.main-menu a{background:var(--green);color:#003d43;text-decoration:none;font:bold 10px 'PT Mono','Courier New',monospace;padding:5px 8px;margin:2px;border:2px outset #baffeb;transition:background .1s}.main-menu a:hover,.main-menu a.active{background:#8affd4;color:#d24693;border-style:inset;animation:jiggle .24s steps(2,end) infinite,pinkPulse 1.7s ease-in-out infinite alternate}.hero-deco{display:flex;justify-content:space-between;padding:5px 2px;font-size:8px;color:#b40052}.content{padding:8px}.content section{margin:11px 0;border:2px outset #d9fbff;background:rgba(222,250,255,.88);padding:11px;box-shadow:3px 3px 0 rgba(210,70,147,.14)}.section-title{margin:-11px -11px 11px;padding:5px 7px;background:linear-gradient(90deg,#d24693,var(--pink) 52%,#d24693);color:#fff;border-bottom:1px solid #9b0045;font:bold 14px 'PT Mono','Courier New',monospace}.section-title small{float:right;font:9px 'PT Mono',monospace;color:#fff;padding-top:2px}.two-col{display:grid;grid-template-columns:1.2fr .8fr;gap:11px}.two-col.reverse{grid-template-columns:1fr 1fr}h1{font:bold 18px 'PT Mono','Courier New',monospace;color:#073d5d;margin:3px 0 8px}p{line-height:1.45}.signoff{font-style:italic;color:#a7004c}.picture-box,.cafe-photo{border:2px inset #fff;background:#aeeeff;padding:3px;color:#003d5c;font-size:8px}.picture-box img,.cafe-photo img{display:block;width:100%;height:150px;object-fit:cover;filter:saturate(1.15)}.picture-box div,.cafe-photo span{display:block;padding:4px}.statusbar{display:flex;justify-content:space-between;margin-top:9px;border:2px inset #fff;background:#bdf5ff;padding:4px;color:#00596d;font-size:8px}.marquee-strip{overflow:hidden;margin:7px -1px;background:#d24693;color:#fff;border:1px solid #a9004c;white-space:nowrap;font:bold 9px 'PT Mono',monospace}.marquee-strip div{width:max-content;padding:4px 0;animation:scrollText 25s linear infinite}@keyframes scrollText{to{transform:translateX(-50%)}}.update-layout{display:grid;grid-template-columns:1fr 145px;gap:13px}.updates-list p{margin:0;padding:6px 2px;border-bottom:1px dotted #39a9c6}.updates-list b{color:#b40052}.mini-gallery{text-align:center;font-size:8px;color:#004a67}.mini-gallery img{width:135px;height:105px;object-fit:cover;border:2px inset #fff;filter:saturate(1.15)}
.thumb-shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.thumb-shelf a{display:block;min-width:0;background:#b9f2ff;border:2px outset #eaffff;padding:3px;text-decoration:none;text-align:center;color:#003d5c}.thumb-shelf a:hover{border-style:inset;background:#d9fbff}.thumb-shelf a:hover img{animation:jiggle .28s steps(2,end) infinite}.thumb-shelf img{display:block;width:100%;height:82px;object-fit:cover;border:1px solid #2c91ad;filter:saturate(1.08)}.thumb-shelf span{display:block;padding:4px 1px 2px;color:#8d0040;font-size:9px;font-weight:bold}.scrap-row{text-align:center;padding-top:8px}.scrap-row img{width:88px;height:31px;object-fit:fill;margin:2px}.visit-copy table{width:100%;border-collapse:collapse;font-size:9px}.visit-copy td{border:1px solid #43a6bd;padding:4px}.visit-copy td:last-child{text-align:right;color:#a9004c}.martini{display:block;max-width:80px;max-height:90px;margin:8px auto 0;filter:drop-shadow(2px 2px 4px rgba(210,70,147,.55));animation:floaty 4s ease-in-out infinite alternate}@keyframes floaty{to{transform:translateY(-3px) rotate(1deg)}}.wide-art{position:relative;margin:11px 0;border:2px outset #d9fbff;background:#b6f1ff;text-align:center;overflow:hidden}.wide-art img{display:block;width:100%;height:auto;filter:saturate(1.1)}.wide-art span{position:absolute;bottom:3px;right:5px;color:#fff;font-size:8px;text-shadow:2px 2px 0 var(--pink),0 0 7px var(--pink)}.button-wall{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;padding:8px;background:#a9efff;border:1px dashed #007d9d}.b88{width:88px;height:31px;flex:0 0 88px;display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;font:bold 8px/9px 'PT Mono',monospace;border:1px solid currentColor;cursor:pointer}.b88:hover{animation:jiggle .22s steps(2,end) infinite}.b88.green{background:#00ffae;color:#004e44}.b88.cyan{background:#63e8ff;color:#00516c}.b88.pink{background:#d24693;color:#fff}.b88.dark{background:#d8faff;color:#9b0045}.b88.stripe{color:#fff;background:repeating-linear-gradient(135deg,#00b9df 0 6px,#d24693 6px 12px)}.center-note{text-align:center}.tiny{font-size:9px}.guestbook{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:10px;background:linear-gradient(90deg,#b8f4ff,#ffc2dc)!important}.guestbook .spark{font-size:28px;color:var(--pink);animation:blink 1.2s steps(2,end) infinite}.guestbook b{font-size:12px;color:#9f0048}.guestbook p{margin:3px 0}.guestbook a{background:var(--green);color:#003e3a;border:2px outset #baffea;padding:6px;text-decoration:none;font:bold 8px 'PT Mono',monospace}.portal-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}.portal-grid a{width:100px;text-align:center;background:var(--green);color:#00473e;border:2px outset #c4ffed;padding:5px;text-decoration:none;font:bold 9px 'PT Mono',monospace}.portal-grid a:hover{animation:jiggle .24s steps(2,end) infinite;border-style:inset}.paradise{display:block;max-width:190px;width:42%;margin:13px auto 4px;filter:drop-shadow(2px 2px 3px rgba(210,70,147,.5))}.bye{text-align:center;font:bold 13px 'PT Mono',monospace;color:#940043;margin-bottom:0}footer{display:flex;justify-content:space-between;gap:10px;background:#83eaff;color:#00465d;padding:7px;font-size:8px;border-top:2px solid var(--pink)}footer a{color:#9a0045}
/* Giant ghosts remain behind the 640px Windows-ish document. */.ghost-kanji{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;font:bold min(36vw,420px) 'MS Gothic','Yu Gothic','Times New Roman',serif}.ghost-kanji span{position:absolute;line-height:1;opacity:.065;filter:blur(1px);text-shadow:0 0 18px rgba(210,70,147,.42);animation:orbit 34s ease-in-out infinite alternate}.g1{left:-8%;top:-4%;color:#087b9b}.g2{right:-5%;top:13%;color:var(--pink);animation-duration:43s!important;animation-direction:alternate-reverse!important}.g3{left:-10%;top:43%;color:var(--pink);animation-duration:48s!important}.g4{right:-9%;top:58%;color:#087b9b;animation-duration:39s!important}.g5{left:7%;top:78%;color:#087b9b;animation-duration:51s!important}.g6{right:4%;top:82%;color:var(--pink);animation-duration:46s!important}@keyframes orbit{0%{transform:translate(-3vw,-2vh) rotate(-13deg) scale(.92)}35%{transform:translate(7vw,5vh) rotate(12deg) scale(1.05)}70%{transform:translate(-2vw,11vh) rotate(28deg) scale(.97)}100%{transform:translate(8vw,-5vh) rotate(46deg) scale(1.08)}}@keyframes blink{50%{opacity:.18}}.reveal{opacity:0;filter:blur(1.5px);transition:opacity .9s ease,filter 1.1s ease}.reveal.visible{opacity:1;filter:blur(0)}
.radio{position:fixed;z-index:150;right:max(8px,calc((100vw - 640px)/2 - 158px));top:72px;width:145px;background:#c7f7ff;border:2px outset #efffff;box-shadow:4px 4px 0 rgba(210,70,147,.28);font-size:8px}.radio-head{display:flex;justify-content:space-between;padding:4px;background:#d24693;color:#fff;border-bottom:1px solid #9f0048}.radio-display{padding:4px;background:#8eeaff;color:#00536a;border-bottom:1px solid #2f9bb5}.radio-display>span{display:block;font-weight:bold;margin-bottom:2px}.radio-display marquee{display:block;width:100%;height:12px}.radio-controls{display:grid;grid-template-columns:28px 1fr 28px;gap:2px;padding:4px}.radio-controls button{height:22px;padding:0;border:2px outset #baffeb;background:var(--green);color:#004b43;font:bold 8px 'PT Mono',monospace}.radio-controls button:hover{animation:jiggle .22s steps(2,end) infinite}.radio-controls .play{font-size:8px}.radio-controls #radio-mute{grid-column:1/-1;color:#fff;border-color:#ffb1d3;background:var(--pink);text-shadow:1px 1px 0 #8d003f}.radio-volume{display:flex;gap:4px;align-items:center;padding:0 4px 5px;color:#00546d}.radio-volume input{width:100%;height:10px;accent-color:var(--pink)}
@media(max-width:970px){.radio{right:10px;top:auto;bottom:10px;width:136px;opacity:.96}}@media(max-width:660px){.page-shell{max-width:100%;width:100%;margin:0;border-left:0;border-right:0}.main-menu.stuck{max-width:100%;width:100%}.two-col,.two-col.reverse,.update-layout{grid-template-columns:1fr}.picture-box img,.cafe-photo img{height:210px}.thumb-shelf{grid-template-columns:1fr 1fr}.section-title small{float:none;display:block}.statusbar{flex-wrap:wrap;gap:4px}.guestbook{grid-template-columns:35px 1fr}.guestbook a{grid-column:2}.radio{width:126px;right:5px;bottom:5px}.ghost-kanji{font-size:55vw}}@media(max-width:420px){.thumb-shelf{grid-template-columns:1fr 1fr}.main-menu a{padding:4px 6px;font-size:9px}.radio{width:118px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important}.reveal{opacity:1;filter:none;transition:none}.ghost-kanji span{animation:none}}

/* ===== V6: CLOUDY DARK PANELS OVER THE SIGNATURE CYAN ===== */
:root{--panel:rgba(10,55,72,.80);--panel2:rgba(7,38,51,.76);--text:#8feeff;--muted:#bfc4db}
body{color:var(--text)}
.page-shell{background:transparent;border:0;box-shadow:none}
.signature-grad{height:22px;margin:0 0 5px;background:#00d9ff url('https://hotlinecafe.com/grad.png') repeat-x top left;border-bottom:1px solid rgba(210,70,147,.7);box-shadow:0 2px 8px rgba(210,70,147,.38)}
.hero{background:rgba(10,55,72,.32);border:0;box-shadow:3px 3px rgba(210,70,147,.55)}
.tinyline,.hero-sub{color:#9ff0ff}.hero-deco{color:#bfc4db}
a{color:var(--green)}
.content section,#news{border-radius:1px;background:var(--panel);box-shadow:3px 3px #d24693;color:#bfc4db;margin:15px auto;padding:12px;border:0 solid black;font-family:'PT Mono',sans-serif;font-size:13px;text-align:left;line-height:16pt}
#news{width:100%}
.section-title{margin:-12px -12px 12px;padding:5px 7px;background:rgba(3,31,43,.76);border:0;border-bottom:1px dotted rgba(0,217,255,.55);color:var(--cyan)}
.section-title small{color:#bfc4db}h1{color:var(--cyan)}.signoff{color:#ff7ab5}.updates-list b,.thumb-shelf span,.bye,.guestbook b{color:var(--cyan)}
.picture-box,.cafe-photo,.thumb-shelf a,.button-wall,.statusbar{background:rgba(2,29,40,.58);border:1px solid rgba(0,217,255,.45);color:#bfc4db}
.picture-box div,.cafe-photo span,.mini-gallery{color:#8feeff}.updates-list p{border-color:rgba(0,217,255,.35)}
.thumb-shelf a{color:var(--green);border:1px solid rgba(0,255,174,.38)}.thumb-shelf a:hover{background:rgba(0,217,255,.13);border-color:var(--green)}
.visit-copy td{border-color:rgba(0,217,255,.4)}.visit-copy td:last-child{color:var(--green)}
.guestbook{background:var(--panel)!important}.guestbook a{color:#003e3a}.wide-art{background:var(--panel2);border:1px solid rgba(0,217,255,.45);box-shadow:3px 3px #d24693}
footer{background:rgba(10,55,72,.84);color:#bfc4db;border-top:1px solid var(--pink);box-shadow:3px 3px #d24693}footer a{color:var(--green)}
.radio{background:rgba(10,55,72,.92);border:1px solid var(--cyan);color:#bfc4db;box-shadow:3px 3px #d24693}.radio-display{background:rgba(0,217,255,.12);color:var(--cyan);border-color:rgba(0,217,255,.45)}.radio-volume{color:#bfc4db}
/* Keep the original green menu, but let it live on a darker strip. */
#menu-anchor{height:55px}.main-menu{overflow:visible;background:rgba(5,38,50,.82);border:1px solid rgba(0,217,255,.55);padding:4px;min-height:55px}.main-menu.stuck{background:rgba(5,38,50,.96)}
.menu-group{position:relative;display:inline-block}.menu-main{display:block}.submenu{position:absolute;z-index:180;left:2px;top:calc(100% - 1px);min-width:132px;padding:3px;background:rgba(7,38,51,.96);border:1px solid var(--cyan);box-shadow:3px 3px #d24693;opacity:0;visibility:hidden;transform:translateY(-7px) scaleY(.88);transform-origin:top;transition:opacity .14s ease,transform .16s steps(4,end),visibility .14s}.submenu a{display:block!important;margin:1px!important;padding:5px 7px!important;background:rgba(10,55,72,.96)!important;border:0!important;border-left:3px solid var(--green)!important;color:var(--green)!important;white-space:nowrap;text-align:left;font-size:9px!important;text-shadow:1px 1px 0 rgba(210,70,147,.8)!important}.submenu a:hover,.submenu a.active{background:rgba(0,217,255,.18)!important;color:#fff!important;transform:translateX(2px)}.menu-group:hover>.submenu,.menu-group:focus-within>.submenu,.menu-group.open>.submenu{opacity:1;visibility:visible;transform:translateY(0) scaleY(1)}
/* Magenta remains the haunted pigment. */
.section-title,.wide-art span,.radio-head,.marquee-strip{animation:pinkPulse 3.7s ease-in-out infinite alternate}
@media(max-width:660px){.submenu{position:fixed;left:8px;right:8px;top:58px;min-width:0}.signature-grad{height:18px}}

/* ===== V7: SIGNATURE BANNER + BARE HERO + TEXT-LINK MENU ===== */
.signature-banner{position:relative;z-index:3;width:100%;height:96px;overflow:hidden;margin:0;background:#00d9ff}
.signature-banner img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;image-rendering:auto}
.page-shell{margin-top:6px}
/* The logo floats directly on the cyan world: no panel, no card, no sales pitch. */
.hero,.hero.hero-free{background:transparent!important;box-shadow:none!important;border:0!important;padding-top:4px}
.tinyline{border-bottom:0;color:#d5f8ff}.hero-sub{color:#d8faff}.hero-deco{color:#d4e8ef}
/* Bare green words instead of green buttons. */
#menu-anchor{height:38px}
.main-menu{min-height:38px;padding:3px 5px;background:rgba(10,55,72,.68);border:0;border-top:1px solid rgba(0,255,174,.45);border-bottom:1px solid rgba(0,255,174,.45);align-items:center;gap:0}
.main-menu.stuck{background:rgba(10,55,72,.94);box-shadow:0 2px 0 #d24693,0 5px 12px rgba(10,55,72,.28)}
.menu-group{margin:0 7px}
.main-menu .menu-main{position:relative;background:transparent!important;border:0!important;padding:6px 1px!important;margin:0!important;color:var(--green)!important;text-decoration:none;letter-spacing:.45px;text-shadow:1px 1px 0 rgba(210,70,147,.82),0 0 5px rgba(210,70,147,.28)!important}
.main-menu .menu-main:after{content:'';position:absolute;left:50%;right:50%;bottom:2px;height:1px;background:var(--green);transition:left .12s ease,right .12s ease}
.main-menu .menu-main:hover:after,.main-menu .menu-main.active:after{left:0;right:0}
/* A small twitch, not a caffeine seizure. */
@keyframes tinyJiggle{0%,100%{transform:translate(0,0) rotate(0)}35%{transform:translate(-.7px,.4px) rotate(-.12deg)}70%{transform:translate(.7px,-.4px) rotate(.12deg)}}
.main-menu .menu-main:hover{animation:tinyJiggle .42s steps(2,end) 2,pinkPulse 2.2s ease-in-out infinite alternate!important}
.hero-logo-link:hover .hero-logo{animation:tinyJiggle .5s steps(2,end) 2;filter:drop-shadow(2px 2px 0 rgba(210,70,147,.48))}
.thumb-shelf a:hover img,.b88:hover,.portal-grid a:hover,.radio-controls button:hover{animation:tinyJiggle .42s steps(2,end) 2!important}
/* Submenus keep their dark little Windows-ish boxes. */
.submenu{top:calc(100% + 4px);left:-8px;min-width:140px}
.submenu a:hover{animation:none!important;transform:translateX(1px)}
/* Old-web rainbow copy. JS inserts real FONT tags, but links stay Hotline green. */
.rainbow-copy font{transition:text-shadow .2s ease}.rainbow-copy a,.rainbow-copy a font{color:var(--green)!important}.rainbow-copy b font,.rainbow-copy strong font{font-weight:bold}
@media(max-width:660px){.signature-banner{height:68px}.page-shell{margin-top:0}.menu-group{margin:0 4px}#menu-anchor{height:52px}.main-menu{min-height:52px}.submenu{top:58px}}

/* V8: softer Y2K ghosts, larger hero, drifting Win95-ish cloud haze */
.hero-logo-link{width:590px;max-width:98%;margin-top:7px}
.ghost-kanji{font-family:"Yu Gothic UI","Hiragino Kaku Gothic ProN","Noto Sans JP","Arial Unicode MS",sans-serif;font-weight:300;letter-spacing:-.08em}
.ghost-kanji span{opacity:.055;filter:blur(1.4px);text-shadow:0 0 20px rgba(210,70,147,.28)}
.cloud-haze{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.42;mix-blend-mode:screen}
.cloud{position:absolute;width:420px;height:125px;border-radius:50%;background:rgba(255,255,255,.28);filter:blur(28px);transform:translate3d(0,0,0);animation:cloudDrift 58s linear infinite}
.cloud:before,.cloud:after{content:"";position:absolute;border-radius:50%;background:inherit;filter:blur(4px)}
.cloud:before{width:190px;height:145px;left:72px;top:-48px}.cloud:after{width:230px;height:120px;right:35px;top:-25px}
.cloud.c1{left:-430px;top:17%;animation-duration:68s}.cloud.c2{left:-520px;top:52%;width:520px;height:150px;opacity:.55;animation-duration:91s;animation-delay:-31s}.cloud.c3{left:-390px;top:79%;width:360px;height:100px;opacity:.38;animation-duration:77s;animation-delay:-52s}
@keyframes cloudDrift{from{transform:translateX(0) translateY(0)}50%{transform:translateX(calc(50vw + 420px)) translateY(-16px)}to{transform:translateX(calc(100vw + 900px)) translateY(8px)}}
@media(prefers-reduced-motion:reduce){.cloud{animation:none!important}}

/* V9: live-test pass -------------------------------------------------------
   The body hue is driven by JS as the visitor scrolls. At scrollTop 0 it is
   exactly #00d9ff; one full page journey passes through the colour wheel. */
body{background:#00d9ff;transition:background-color .12s linear}
.page-shell{background:transparent}

/* Extra Hotline archive imagery: compact, busy, still tidy. */
.media-ribbon{display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap;margin:9px 0 2px;padding:6px 4px;border-top:1px dotted rgba(0,255,174,.65);border-bottom:1px dotted rgba(0,255,174,.65);background:rgba(10,55,72,.32)}
.media-ribbon a{display:block;border:1px solid rgba(0,217,255,.55);background:rgba(10,55,72,.7);padding:2px;box-shadow:2px 2px rgba(210,70,147,.28)}
.media-ribbon img{display:block;width:70px;height:58px;object-fit:cover;image-rendering:auto;filter:saturate(1.12)}
.media-ribbon a:hover img{animation:tinyJiggle .42s steps(2,end) 2;filter:saturate(1.3) brightness(1.08)}
.wide-art a{display:block}

/* Let more of the changing sky leak through without hurting readability. */
.cloud-haze{opacity:.48}
.content section{backdrop-filter:blur(1.5px)}
@media(max-width:660px){.media-ribbon img{width:64px;height:52px}}

/* V10 tuning -------------------------------------------------------------- */
/* Show the complete signature banner instead of cropping its lower edge. */
.signature-banner{height:auto;overflow:visible;line-height:0;background:#00d9ff}
.signature-banner img{width:100%;height:auto;object-fit:contain;object-position:center top}

/* Fit the nine text links on one line at the largest practical size. */
#menu-anchor{height:39px}
.main-menu{min-height:39px;flex-wrap:nowrap;justify-content:space-evenly;padding:3px 4px;white-space:nowrap}
.menu-group{flex:1 1 0;min-width:0;margin:0 1px;text-align:center}
.main-menu .menu-main{display:block;width:100%;font-size:clamp(9px,1.55vw,12px)!important;letter-spacing:0!important;padding:6px 0!important;white-space:nowrap}

/* Radio becomes a draggable little Win95-ish utility window. */
.radio{width:170px;right:max(8px,calc((100vw - 640px)/2 - 183px));user-select:none;touch-action:none}
.radio-head{cursor:move;cursor:grab;align-items:center;background:linear-gradient(90deg,#d24693,#00d9ff);border-bottom:1px solid #00ffae;padding:3px 4px}
.radio-head:active{cursor:grabbing}
.radio-head .radio-titlebar-buttons{display:flex;gap:2px;margin-left:auto}
.radio-head .radio-titlebar-buttons button{width:15px;height:14px;padding:0;border:1px outset #bffaff;background:#00ffae;color:#073748;font:9px/10px 'PT Mono',monospace;cursor:pointer}
.radio.dragging{opacity:.92;box-shadow:5px 5px #d24693}
.radio-hint{padding:2px 4px 3px;text-align:center;color:#8edfff;font-size:7px;border-top:1px dotted rgba(0,217,255,.35)}
@media(max-width:970px){.radio{width:160px}}
@media(max-width:660px){.main-menu{overflow-x:auto;justify-content:flex-start}.menu-group{flex:0 0 auto;margin:0 4px}.main-menu .menu-main{font-size:10px!important;padding-left:2px!important;padding-right:2px!important}.radio{width:150px}}

/* V11 refinements */
/* Keep the signature banner, but crop it back to a slim masthead strip. */
.signature-banner{height:54px!important;overflow:hidden!important;line-height:0;margin:0!important}
.signature-banner img{display:block;width:100%;height:100%!important;object-fit:cover!important;object-position:center top!important}
.page-shell{margin-top:5px!important}
.radio-controls{display:grid!important;grid-template-columns:repeat(5,1fr);gap:2px}
.radio-download{display:flex;align-items:center;justify-content:center;min-width:0;padding:3px 2px;border:1px outset #bffaff;background:#00ffae;color:#073748!important;text-decoration:none;font:7px 'PT Mono',monospace;text-shadow:none!important}
.radio-download:hover{border-style:inset;background:#8affd4}
@media(max-width:660px){.signature-banner{height:42px!important}}

/* V12: signature strip layering + disciplined menu + archive scraps -------- */
/* The live Cafe treats hotline_banner.png as atmosphere, not document flow.
   Pin it to the top and let the page/hero float above it. */
.signature-banner{position:absolute!important;z-index:1!important;top:0;left:0;width:100%;height:88px!important;overflow:hidden!important;pointer-events:none;background:transparent!important}
.signature-banner img{position:absolute;left:0;top:-34px;width:100%;height:auto!important;min-height:122px;object-fit:cover!important;object-position:center top!important;opacity:.92}
.page-shell{position:relative;z-index:3;margin-top:0!important;padding-top:0}
.hero{position:relative;z-index:4;background:transparent!important;padding-top:7px}

/* Equal columns means the text is mathematically even, not eyeballed margins. */
#menu-anchor{height:40px}
.main-menu{display:grid!important;grid-template-columns:repeat(9,minmax(0,1fr));width:100%;min-height:40px;box-sizing:border-box;overflow:visible!important;justify-content:stretch!important}
.menu-group{width:auto!important;min-width:0!important;margin:0!important;display:block!important;text-align:center}
.main-menu .menu-main{display:flex!important;align-items:center;justify-content:center;width:100%;height:32px;box-sizing:border-box;font-size:11px!important;padding:4px 0!important;overflow:visible;white-space:nowrap}
.submenu{text-align:left}

/* Small archive inserts: visual texture without turning the page into a gallery. */
.archive-scraps{display:grid;grid-template-columns:1.15fr .85fr;gap:8px;margin-top:9px}
.archive-scraps .scrap{position:relative;display:block;min-height:95px;border:1px solid rgba(0,217,255,.55);background:rgba(2,25,42,.58);padding:3px;box-shadow:2px 2px rgba(210,70,147,.4);overflow:hidden}
.archive-scraps img{display:block;width:100%;height:118px;object-fit:cover;filter:saturate(1.08)}
.archive-scraps .portrait img{object-position:center 25%}.archive-scraps .ansi img{image-rendering:auto}
.archive-scraps span{position:absolute;left:4px;bottom:4px;background:rgba(10,55,72,.9);color:#00ffae;padding:2px 4px;font-size:8px;text-shadow:1px 1px #d24693}
.archive-triptych{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:8px}
.archive-triptych a{display:block;border:1px solid rgba(0,255,174,.5);background:rgba(10,55,72,.55);padding:2px;box-shadow:2px 2px rgba(210,70,147,.3)}
.archive-triptych img{display:block;width:100%;height:88px;object-fit:cover}
.archive-triptych a:hover img,.archive-scraps a:hover img{animation:tinyJiggle .42s steps(2,end) 2}

/* A genuinely old-web button river. Two identical tracks make the loop seamless. */
.button-marquee{position:relative;overflow:hidden;margin:8px -11px -11px;padding:7px 0;background:rgba(2,25,42,.72);border-top:1px solid #00ffae;border-bottom:1px solid #d24693;white-space:nowrap}
.button-marquee-track{display:inline-flex;width:max-content;gap:5px;padding-right:5px;vertical-align:top;animation:buttonRiver 42s linear infinite}
.button-marquee:hover .button-marquee-track{animation-play-state:paused}
.button-marquee img{display:block;width:88px;height:31px;object-fit:fill;image-rendering:auto;box-shadow:1px 1px rgba(210,70,147,.5)}
@keyframes buttonRiver{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.button-marquee-note{text-align:center;color:#00d9ff;font-size:8px;margin:7px 0 2px}

@media(max-width:660px){.signature-banner{height:72px!important}.signature-banner img{top:-24px;min-height:96px}.main-menu{display:flex!important;overflow-x:auto!important}.menu-group{flex:0 0 auto!important}.main-menu .menu-main{width:auto!important;padding:4px 5px!important}.archive-scraps{grid-template-columns:1fr}.archive-triptych{grid-template-columns:1fr 1fr 1fr}.archive-triptych img{height:72px}}
@media(prefers-reduced-motion:reduce){.button-marquee-track{animation:none!important}}

/* V13: roomier masthead, two-row nav, readable utility UI ---------------- */
html{background:#025ff5;min-height:100%;}
body{min-height:100dvh;background:#00d9ff;background-attachment:fixed;}
/* Give the layered strip/hero breathing room without putting the strip back
   into document flow. */
.page-shell{margin-top:64px!important;}
.hero{padding-top:0!important;}
.tinyline{display:none!important;}

/* Five equal cells on row one, four equal cells centred on row two. */
#menu-anchor{height:78px;}
.main-menu{display:grid!important;grid-template-columns:repeat(20,minmax(0,1fr))!important;grid-template-rows:repeat(2,36px);min-height:78px!important;height:78px;padding:3px 5px!important;align-content:center;overflow:visible!important;}
.menu-group{display:block!important;width:auto!important;min-width:0!important;margin:0!important;}
.menu-group:nth-child(1){grid-column:1 / span 4;grid-row:1}.menu-group:nth-child(2){grid-column:5 / span 4;grid-row:1}.menu-group:nth-child(3){grid-column:9 / span 4;grid-row:1}.menu-group:nth-child(4){grid-column:13 / span 4;grid-row:1}.menu-group:nth-child(5){grid-column:17 / span 4;grid-row:1}
.menu-group:nth-child(6){grid-column:3 / span 4;grid-row:2}.menu-group:nth-child(7){grid-column:7 / span 4;grid-row:2}.menu-group:nth-child(8){grid-column:11 / span 4;grid-row:2}.menu-group:nth-child(9){grid-column:15 / span 4;grid-row:2}
.main-menu .menu-main{height:34px!important;font-size:14px!important;line-height:18px!important;padding:6px 2px!important;}
.main-menu.stuck{height:78px!important;min-height:78px!important;}
.submenu{top:calc(100% + 2px)!important;min-width:176px!important;}
.submenu a{font-size:12px!important;line-height:16px!important;padding:7px 9px!important;}

/* Nothing in the radio should be microscopic beside the 12px body copy. */
.radio{width:206px;font-size:12px!important;line-height:15px;}
.radio-head{font-size:12px!important;line-height:16px;padding:5px 6px;}
.radio-head .radio-titlebar-buttons button{width:19px;height:18px;font-size:12px;line-height:14px;}
.radio-display{font-size:12px!important;padding:6px;}
.radio-display marquee{height:17px;line-height:16px;}
.radio-controls{gap:3px;padding:5px;}
.radio-controls button,.radio-controls .play,.radio-download{min-height:28px!important;font:11px/14px 'PT Mono','Courier New',monospace!important;}
.radio-volume{font-size:12px!important;padding:2px 6px 6px;}
.radio-hint{font-size:10px!important;line-height:13px;padding:4px 5px;}

/* Site Directory is navigation only now: no second decorative button wall. */
.directory .paradise{margin-top:15px;}

/* Safari can expose the root element below the body during viewport/bounce
   calculations. Paint both layers and extend the body slightly past its box. */
body:after{content:"";position:fixed;z-index:-20;left:0;right:0;bottom:-64px;height:96px;background:inherit;pointer-events:none;}

@media(max-width:660px){
 .page-shell{margin-top:64px!important;}
 #menu-anchor{height:78px;}
 .main-menu{display:grid!important;grid-template-columns:repeat(20,minmax(0,1fr))!important;grid-template-rows:repeat(2,36px)!important;height:78px!important;min-height:78px!important;overflow:visible!important;}
 .menu-group{margin:0!important;min-width:0!important;}
 .main-menu .menu-main{width:100%!important;font-size:12px!important;padding:6px 1px!important;}
 .submenu{position:absolute!important;left:0!important;right:auto!important;top:calc(100% + 2px)!important;min-width:164px!important;}
 .submenu a{font-size:12px!important;}
 .radio{width:190px;}
}

/* V14: classic Hotline hover language + homepage archaeology ------------ */
/* Slightly larger, but still comfortable in the two-row grid. */
.main-menu .menu-main{
  font-size:15px!important;
  color:var(--green)!important;
  transition:color .18s ease, background-color .28s ease, box-shadow .28s ease, text-shadow .18s ease!important;
}
/* The original Cafe trick: white lettering blooming onto a pink field. */
.main-menu .menu-main:hover,.main-menu .menu-main:focus-visible,.main-menu .menu-main.active{
  color:#fff!important;
  background:rgba(210,70,147,.88)!important;
  box-shadow:inset 0 0 0 1px rgba(255,150,210,.62),0 0 8px rgba(210,70,147,.28)!important;
  text-shadow:1px 1px 0 #6a0b49!important;
}
.main-menu .menu-main:after{display:none!important}

/* Little Hotline badges and Japanese fragments between the 'real' sections. */
.cafe-litter{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;margin:7px auto 9px;min-height:34px;max-width:620px;overflow:hidden}
.classic-buttons{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap}
.classic-buttons a{display:block;line-height:0;filter:drop-shadow(2px 2px 0 rgba(210,70,147,.45))}
.classic-buttons img{display:block;width:88px;height:31px;image-rendering:auto}
.classic-buttons a:nth-child(2){transform:rotate(.7deg)}.classic-buttons a:nth-child(3){transform:rotate(-.55deg)}
.classic-buttons a:hover{animation:tinyJiggle .42s steps(2,end) 2;filter:drop-shadow(2px 2px 0 #00ffae)}
.love-kanji{display:block;max-width:min(96%,560px);height:auto;filter:drop-shadow(2px 2px 0 rgba(0,255,174,.36))}

/* Actual Cbox from the existing homepage, framed as a Cafe terminal. */
.hotline-chat{border-radius:1px;background:rgba(10,55,72,.8);box-shadow:3px 3px #d24693;color:#bfc4db;width:100%;margin:15px auto;padding:12px;box-sizing:border-box;font-family:"PT Mono",sans-serif;font-size:13px;line-height:16pt;text-align:left}
.chat-shell{border:1px solid #00ffae;background:rgba(2,25,42,.72);padding:4px;box-shadow:2px 2px rgba(210,70,147,.45)}
.chat-shell iframe{display:block;width:100%;height:285px;border:0;background:#fff}

/* Flamingos should float directly in the blue atmosphere. */
.wide-art.flamingos-free{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;overflow:visible!important}
.wide-art.flamingos-free img{display:block;max-width:100%;height:auto;margin:auto;filter:drop-shadow(3px 3px 0 rgba(210,70,147,.34))}
.wide-art.flamingos-free span{background:rgba(10,55,72,.72);padding:2px 5px}

@media(max-width:660px){
 .main-menu .menu-main{font-size:13px!important}
 .classic-buttons{gap:4px}.love-kanji{max-width:98%}
 .chat-shell iframe{height:260px}
}

/* V15: 800x600-era breathing room + longer archive walk ------------------ */
.page-shell{width:800px;max-width:calc(100% - 24px)}
.content{width:724px;max-width:100%;margin:0 auto;padding:9px 12px}
.content section,#news,.hotline-chat{width:700px;max-width:100%}
.main-menu.stuck{width:800px;max-width:calc(100% - 24px)}
.hero-logo-link{width:700px;max-width:94%;margin-top:4px}
.hero-sub{font-size:13px}
.main-menu .menu-main{font-size:17px!important}
.submenu a{font-size:13px!important;line-height:17px!important}
.cafe-litter,.wide-art{width:700px;max-width:100%;margin-left:auto;margin-right:auto}

/* Welcome and visit imagery now gets the full panel width. */
.welcome-stack,.visit-stack{display:block}
.welcome-stack .picture-box,.visit-stack .cafe-photo{margin-top:12px;width:100%}
.welcome-stack .picture-box img{width:100%;height:auto;max-height:none;object-fit:contain}
.visit-stack .cafe-photo img{width:100%;height:auto;max-height:none;object-fit:contain}
.picture-box div,.cafe-photo span{font-size:11px}

/* Preserve the original iframeable Cbox footprint instead of shrinking it. */
.chat-shell{width:100%;overflow:auto}
.chat-shell iframe{width:100%;height:450px;min-height:450px}

/* More archive material, laid out like labelled scraps rather than a modern gallery. */
.archive-walk{padding-bottom:14px!important}
.story-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.story-card{position:relative;display:block;min-height:180px;padding:3px;background:rgba(2,25,42,.68);border:1px solid rgba(0,255,174,.55);box-shadow:3px 3px rgba(210,70,147,.36);overflow:hidden}
.story-card.wide{grid-column:1/-1;min-height:230px}
.story-card img{display:block;width:100%;height:220px;object-fit:cover;filter:saturate(1.08)}
.story-card.wide img{height:auto;max-height:330px;object-fit:cover}
.story-card.album img{object-fit:contain;background:rgba(0,0,0,.18)}
.story-card span{position:absolute;left:7px;bottom:7px;max-width:calc(100% - 14px);padding:4px 6px;background:rgba(10,55,72,.9);color:#00ffae;font-size:11px;line-height:14px;text-shadow:1px 1px #d24693}
.story-card:hover img{animation:tinyJiggle .42s steps(2,end) 2;filter:saturate(1.2) brightness(1.05)}

footer{width:800px;max-width:100%;margin:0 auto;font-size:10px}

@media(max-width:820px){
 .page-shell{width:100%;max-width:100%}.content{width:724px;max-width:100%}.main-menu.stuck{width:100%;max-width:100%}
 .main-menu .menu-main{font-size:15px!important}.hero-logo-link{width:680px}
}
@media(max-width:660px){
 .content{padding:8px}.content section,#news,.hotline-chat,.cafe-litter,.wide-art{width:100%}
 .main-menu .menu-main{font-size:13px!important}.story-grid{grid-template-columns:1fr}.story-card.wide{grid-column:auto}.story-card img,.story-card.wide img{height:auto;max-height:none}.chat-shell iframe{height:400px;min-height:400px}
}

/* V16: one 700px rhythm, broken-up shelves, Pavilion City weather ---------- */
:root{--content-width:700px}
.content{width:var(--content-width)!important;max-width:calc(100% - 24px)!important;padding:9px 0!important}
.content section,#news,.hotline-chat,.cafe-litter,.wide-art,.city-banner{width:var(--content-width)!important;max-width:100%!important;box-sizing:border-box}
#menu-anchor,.main-menu{width:var(--content-width)!important;max-width:100%!important;margin-left:auto!important;margin-right:auto!important}
.main-menu.stuck{width:var(--content-width)!important;max-width:calc(100% - 24px)!important;left:50%!important;transform:translateX(-50%)!important}
footer{width:var(--content-width)!important;max-width:calc(100% - 24px)!important;box-sizing:border-box}

/* Keep the friendship ticker's note in its own airspace. */
.friends .button-marquee{margin-bottom:0!important}
.button-marquee{height:43px!important;overflow:hidden!important}
.button-marquee-track{height:31px!important;top:5px!important}
.button-marquee-note{position:relative!important;z-index:4;margin:9px 0 1px!important;padding-top:2px;line-height:15px!important;min-height:18px;background:transparent}

.shelf-section{margin-top:15px!important}
.shelf-music img{object-fit:cover}
.pavilion-note{margin:12px 3px 2px;padding:10px;border-left:3px solid #00ffae;background:rgba(2,25,42,.55);line-height:18px}
.city-banner{position:relative;margin:17px auto!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible}
.city-banner img{display:block;width:100%;height:auto;filter:drop-shadow(3px 3px 0 rgba(210,70,147,.36))}
.city-banner span{position:absolute;left:9px;bottom:9px;padding:4px 7px;background:rgba(10,55,72,.82);color:#00ffae;font-size:12px;text-shadow:1px 1px #d24693}

/* The cafe menu is now legible enough to order from without binoculars. */
.cafe-menu{margin:13px 0 10px;border:2px solid #00ffae;background:rgba(1,28,43,.7);box-shadow:3px 3px 0 rgba(210,70,147,.65);padding:8px 10px;color:#d7faff}
.cafe-menu-head{text-align:center;color:#fff;background:#d24693;padding:6px;margin:-8px -10px 7px;font-size:14px;letter-spacing:.6px;text-shadow:1px 1px #5e1648}
.menu-line{display:grid;grid-template-columns:1fr auto;gap:16px;padding:6px 3px;border-bottom:1px dotted rgba(0,255,174,.48);font-size:13px;line-height:17px}
.menu-line b{color:#00ffae;white-space:nowrap}.cafe-menu small{display:block;margin-top:7px;color:#bfc4db;font-size:12px;line-height:16px}

/* Clouds are now a proper moving weather layer, not shy cotton smudges. */
.cloud-haze{opacity:.72!important;filter:blur(15px)!important;mix-blend-mode:screen;overflow:hidden}
.cloud{opacity:.48!important;transform:scale(1.18)}
.cloud:before,.cloud:after{opacity:.8}
.c1{animation:cloudDrift16a 38s ease-in-out infinite alternate!important}
.c2{animation:cloudDrift16b 51s ease-in-out infinite alternate!important}
.c3{animation:cloudDrift16c 44s ease-in-out infinite alternate!important}
@keyframes cloudDrift16a{0%{transform:translate(-12vw,-5px) scale(1.12)}45%{transform:translate(23vw,18px) scale(1.3)}100%{transform:translate(58vw,-12px) scale(1.2)}}
@keyframes cloudDrift16b{0%{transform:translate(48vw,12px) scale(1.28)}50%{transform:translate(9vw,-22px) scale(1.08)}100%{transform:translate(-35vw,16px) scale(1.36)}}
@keyframes cloudDrift16c{0%{transform:translate(-30vw,30px) scale(1.05)}55%{transform:translate(18vw,-15px) scale(1.35)}100%{transform:translate(67vw,22px) scale(1.14)}}

@media(max-width:740px){.content{max-width:calc(100% - 16px)!important}.main-menu.stuck,footer{max-width:calc(100% - 16px)!important}.menu-line{font-size:12px}.city-banner span{font-size:11px}}

/* V17: louder menu, cloudier skies, bigger archive treasures ---------------- */
.hero-after-menu{width:var(--content-width);max-width:100%;margin:8px auto 3px;text-align:center}
.hero-love{display:block;max-width:520px;width:78%;height:auto;margin:4px auto 7px;filter:drop-shadow(2px 2px 0 rgba(210,70,147,.5))}
.hero-button-six{display:flex;justify-content:center;align-items:center;gap:7px;flex-wrap:nowrap}
.hero-button-six a{line-height:0;filter:drop-shadow(2px 2px 0 rgba(210,70,147,.52))}.hero-button-six img{display:block;width:88px;height:31px}.hero-button-six a:hover{animation:tinyJiggle .42s steps(2,end) 2;filter:drop-shadow(2px 2px 0 #00ffae)}
.main-menu .menu-main{font-weight:900!important;color:#00ffae!important;text-shadow:1px 1px 0 #006e64,0 0 5px rgba(0,255,174,.9),0 0 10px rgba(0,255,174,.42)!important}
.main-menu .menu-main:hover,.main-menu .menu-main:focus-visible,.main-menu .menu-main.active{color:#fff!important;text-shadow:1px 1px 0 #a4005c,0 0 7px #ff71ba!important}
.submenu a{font-weight:bold!important}

/* More Win95-ish cloud banks at several heights. */
.cloud-haze{opacity:.82!important;filter:blur(11px)!important}
.cloud{background:rgba(255,255,255,.34)!important;box-shadow:0 0 55px 18px rgba(255,255,255,.13)}
.cloud.c4{left:-28vw;top:7%;width:540px;height:145px;opacity:.42!important;animation:cloudDrift17a 62s ease-in-out infinite alternate!important;animation-delay:-19s!important}
.cloud.c5{left:38vw;top:31%;width:610px;height:155px;opacity:.34!important;animation:cloudDrift17b 71s ease-in-out infinite alternate!important;animation-delay:-37s!important}
.cloud.c6{left:-18vw;top:64%;width:480px;height:135px;opacity:.4!important;animation:cloudDrift17c 57s ease-in-out infinite alternate!important;animation-delay:-11s!important}
.cloud.c7{left:54vw;top:86%;width:560px;height:145px;opacity:.31!important;animation:cloudDrift17a 76s ease-in-out infinite alternate-reverse!important;animation-delay:-44s!important}
.cloud.c8{left:12vw;top:44%;width:360px;height:105px;opacity:.28!important;animation:cloudDrift17b 48s ease-in-out infinite alternate!important;animation-delay:-23s!important}
@keyframes cloudDrift17a{0%{transform:translate(-18vw,-18px) scale(1.05)}50%{transform:translate(18vw,22px) scale(1.35)}100%{transform:translate(55vw,-8px) scale(1.16)}}
@keyframes cloudDrift17b{0%{transform:translate(32vw,8px) scale(1.25)}55%{transform:translate(-5vw,-25px) scale(1.05)}100%{transform:translate(-42vw,17px) scale(1.38)}}
@keyframes cloudDrift17c{0%{transform:translate(-25vw,28px) scale(1.08)}50%{transform:translate(20vw,-18px) scale(1.3)}100%{transform:translate(72vw,14px) scale(1.12)}}

.radio{width:210px!important}.radio-controls{grid-template-columns:32px 1fr 32px 1fr 1.65fr!important}.radio-download{white-space:nowrap;padding-left:4px!important;padding-right:4px!important}
.radio-scrub{display:grid;grid-template-columns:34px 1fr 34px;align-items:center;gap:4px;padding:5px 6px 2px;color:#bfc4db;font-size:11px}.radio-scrub span:last-child{text-align:right}.radio-scrub input{width:100%;accent-color:#d24693;cursor:pointer}

/* Signature pink shadows on every little recovered treasure. */
.thumb-shelf img,.media-ribbon img,.story-card img,.feature-tile img,.archive-triptych img{box-shadow:3px 3px 0 rgba(210,70,147,.72)!important}
.feature-pair{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:12px 0 15px}.feature-tile{position:relative;display:block;padding:4px;background:rgba(2,25,42,.64);border:1px solid rgba(0,255,174,.52);text-decoration:none}.feature-tile img{display:block;width:100%;height:260px;object-fit:contain;background:rgba(0,0,0,.14)}.feature-tile span{position:absolute;left:9px;bottom:9px;padding:5px 7px;background:rgba(10,55,72,.9);color:#00ffae;font-weight:bold;text-shadow:1px 1px #d24693}.feature-tile:hover img{animation:tinyJiggle .42s steps(2,end) 2}

.pavilion-guide{display:grid;grid-template-columns:300px 1fr;gap:14px;margin-top:14px}.pavilion-map{position:relative;display:block;align-self:start}.pavilion-map img{display:block;width:100%;height:auto;box-shadow:4px 4px 0 rgba(210,70,147,.72)}.pavilion-map span{position:absolute;left:6px;bottom:6px;padding:4px 6px;background:rgba(10,55,72,.9);color:#00ffae;text-shadow:1px 1px #d24693}.pavilion-copy p{margin-top:0}.city-weather{padding:8px;border:1px dotted #00ffae;background:rgba(2,25,42,.45)}
@media(max-width:740px){.hero-button-six{flex-wrap:wrap}.feature-pair,.pavilion-guide{grid-template-columns:1fr}.feature-tile img{height:auto}.pavilion-map{max-width:420px;margin:auto}.radio{width:190px!important}}

/* V18: two tiny fixes, no redesign ---------------------------------------- */
/* Keep the original Hotline pink strip pinned to the browser's top edge,
   behind the hero/content layer rather than consuming document space. */
.signature-banner{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  z-index:1!important;
  width:100%!important;
  pointer-events:none!important;
}

/* Give the long download label a proper second-row berth. */
.radio{width:230px!important}
.radio-controls{
  grid-template-columns:34px minmax(54px,1fr) 34px minmax(54px,1fr)!important;
  grid-template-rows:auto auto!important;
}
.radio-controls #radio-prev{grid-column:1;grid-row:1}
.radio-controls #radio-play{grid-column:2;grid-row:1}
.radio-controls #radio-next{grid-column:3;grid-row:1}
.radio-controls #radio-mute{grid-column:4;grid-row:1}
.radio-download{
  grid-column:1 / -1!important;
  grid-row:2!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-width:0!important;
  min-height:30px!important;
  padding:5px 8px!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-align:center!important;
  font:bold 11px/16px 'PT Mono','Courier New',monospace!important;
  box-sizing:border-box!important;
}
@media(max-width:740px){.radio{width:210px!important}}

/* V19: mobile-lite rendering + radio close -------------------------------- */
.radio-titlebar-buttons{display:flex;gap:2px;margin-left:auto}
.radio-titlebar-buttons button{width:22px;height:20px;padding:0;border:2px outset #ffd3e5;background:#c7f7ff;color:#681238;font:bold 12px/15px 'PT Mono','Courier New',monospace}
.radio-titlebar-buttons button:active{border-style:inset}
.radio[hidden]{display:none!important}
/* Let sections outside the viewport skip layout/paint until needed. */
.content>section{content-visibility:auto;contain-intrinsic-size:auto 620px}

@media (max-width:600px), (hover:none) and (pointer:coarse){
  /* Mobile Lite: retain the Café, drop the expensive compositing layers. */
  html{scroll-behavior:auto!important}
  .ghost-kanji{display:none!important}
  .reveal,.reveal.visible{opacity:1!important;filter:none!important;transition:none!important;transform:none!important}
  .cloud-haze{filter:none!important;opacity:.42!important;mix-blend-mode:normal!important}
  .cloud{animation:none!important;filter:none!important;box-shadow:none!important;background:rgba(255,255,255,.16)!important;opacity:.35!important}
  .cloud.c4,.cloud.c5,.cloud.c6,.cloud.c7,.cloud.c8{display:none!important}
  .phosphor-screen{display:none!important}
  /* Fixed strip stays intact rather than cover-cropping its lower edge. */
  .signature-banner{height:54px!important;overflow:hidden!important}
  .signature-banner img{top:0!important;left:0!important;width:100%!important;height:54px!important;min-height:0!important;object-fit:fill!important;object-position:center top!important}
  .page-shell{margin-top:64px!important}
  /* Decorative animated GIF clusters are fun on desktop but costly on phones. */
  .cafe-litter .classic-buttons,.hero-button-six{display:none!important}
  .button-marquee-track{animation:none!important;overflow-x:auto!important;transform:none!important}
  .button-marquee{overflow-x:auto!important}
  .radio{width:218px!important}
}
\n\n/* V20: fixed sky, unified magenta, desktop-only reveals ------------------- */
:root{--cyan:#50c3f1;--pink:#d24693}
html,body{background:#50c3f1!important;background-color:#50c3f1!important}
.signature-banner{position:fixed!important;inset:0 0 auto 0!important;width:100%!important;height:auto!important;min-height:0!important;overflow:hidden!important;z-index:1!important;background:transparent!important;line-height:0!important;pointer-events:none!important}
.signature-banner img{position:relative!important;display:block!important;top:0!important;left:0!important;width:100%!important;height:auto!important;min-height:0!important;object-fit:contain!important;object-position:center top!important;opacity:1!important}
/* Reveal animation exists only on fine-pointer desktop layouts. */
.reveal,.reveal.visible{opacity:1;filter:none;transform:none;transition:none}
@media (min-width:741px) and (hover:hover) and (pointer:fine){
 .reveal{opacity:0;filter:blur(5px);transform:translateY(10px);transition:opacity .65s ease,filter .65s ease,transform .65s ease}
 .reveal.visible{opacity:1;filter:blur(0);transform:translateY(0)}
}
/* More defensive media layouts: images stay inside their cards/sections. */
.content img{max-width:100%;height:auto}
.feature-pair,.archive-scraps,.archive-triptych,.thumb-shelf{min-width:0}
.feature-pair>* ,.archive-scraps>* ,.archive-triptych>* ,.thumb-shelf>*{min-width:0;max-width:100%}
.feature-tile,.story-card,.archive-scraps .scrap,.archive-triptych a{overflow:hidden}
.feature-tile img,.story-card img,.archive-scraps img,.archive-triptych img{max-width:100%;object-position:center}
/* New sky banner should never be distorted on mobile. */
@media (max-width:740px){
 .signature-banner{height:auto!important;overflow:hidden!important}
 .signature-banner img{width:100%!important;height:auto!important;object-fit:contain!important}
}

/* V21: layer discipline + sticky-menu air gap + tidier image rows -------- */
/* SkyBanner is the furthest-back painted layer. Decorative atmosphere sits
   above it, while the actual Cafe UI remains above both. */
.signature-banner{z-index:0!important}
.cloud-haze,.ghost-kanji{z-index:1!important}
.page-shell{position:relative!important;z-index:2!important}
.phosphor-screen{z-index:9999!important}

/* When the menu docks, softly dissolve the page beneath it for ~16px. */
.main-menu.stuck{box-shadow:0 2px 0 rgba(210,70,147,.72),0 7px 13px rgba(4,25,39,.28)!important}
.main-menu.stuck:after{
  content:"";
  position:absolute;
  left:0;right:0;top:100%;height:16px;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(5,38,50,.82) 0%,rgba(5,38,50,.42) 42%,rgba(5,38,50,0) 100%);
}

/* Return to the cropped-card treatment: within any one row, imagery shares
   a common height and fills its frame. Different rows can still have their
   own proportions, keeping the archive pleasantly varied. */
.thumb-shelf img{height:132px!important;object-fit:cover!important}
.media-ribbon img{height:72px!important;object-fit:cover!important}
.archive-scraps img{height:190px!important;object-fit:cover!important}
.archive-triptych img{height:118px!important;object-fit:cover!important}
.feature-pair{align-items:stretch}
.feature-tile{height:100%}
.feature-tile img{height:270px!important;object-fit:cover!important}
.story-grid{align-items:stretch}
.story-card{height:100%}
.story-card img{height:220px!important;object-fit:cover!important}
.story-card.wide img{height:290px!important;max-height:none!important;object-fit:cover!important}
.story-card.album img{height:220px!important;object-fit:cover!important;background:rgba(0,0,0,.18)}

@media(max-width:740px){
  /* Mobile remains fluid, but paired/grid imagery still lines up neatly. */
  .thumb-shelf img{height:110px!important}
  .media-ribbon img{height:64px!important}
  .archive-scraps img{height:160px!important}
  .archive-triptych img{height:96px!important}
  .feature-tile img{height:210px!important;object-fit:cover!important}
  .story-card img,.story-card.album img{height:190px!important}
  .story-card.wide img{height:230px!important}
}

/* V23: user-edited homepage cleanup --------------------------------------- */
/* Ordinary content links: pale green, clean, then magenta on hover. */
.content a:not(.feature-tile):not(.story-card):not(.radio-download),
footer a{color:#bfffdc;text-decoration:none;transition:color .22s ease,text-shadow .22s ease}
.content a:not(.feature-tile):not(.story-card):hover,
footer a:hover{color:#d24693;text-decoration:none;text-shadow:0 0 5px rgba(210,70,147,.45)}
/* Keep image-card captions governed by their component styles. */
.feature-tile,.story-card,.thumb-shelf a,.media-ribbon a,.archive-triptych a,.city-banner a,.wide-art a{text-decoration:none}

/* Rainbow copy owns its colours. This also prevents an old <font> tag from
   leaking a single colour into later sections. Hyperlinks deliberately win. */
.rainbow-copy{color:#bfc4db}
.rainbow-copy a,.rainbow-copy a font{color:#bfffdc!important;text-decoration:none!important}
.rainbow-copy a:hover,.rainbow-copy a:hover font{color:#d24693!important}

/* Lost Property visitor copy: map was removed, so don't reserve its old 300px column. */
.pavilion-guide{display:block!important;width:100%!important;margin-top:14px}
.pavilion-copy{display:block;width:100%;max-width:none}
.pavilion-copy p{width:100%;max-width:none}

/* Mobile transmission/gallery alignment. */
@media(max-width:740px){
 .mini-gallery{display:block;width:100%;text-align:center;margin-top:10px}
 .mini-gallery img{display:block;margin:0 auto 7px!important;float:none!important}
 .mini-gallery span{display:block;clear:both;text-align:center}
 .update-layout{grid-template-columns:1fr!important}
}

/* Full sitemap: text, not buttons. Every submenu is visible at once. */
.site-map{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 22px;margin:4px 2px 14px}
.directory-group{min-width:0;padding:0 0 10px;border-bottom:1px dotted rgba(191,255,220,.35)}
.directory-group .directory-main{display:block!important;width:auto!important;padding:0 0 5px!important;background:none!important;border:0!important;color:#bfffdc!important;text-align:left!important;font:bold 14px 'PT Mono','Courier New',monospace!important;text-shadow:1px 1px 0 rgba(210,70,147,.8)}
.directory-group .directory-main:hover{color:#d24693!important;animation:none!important}
.directory-links{display:flex;flex-direction:column;gap:4px}
.directory-links a{display:block!important;width:auto!important;padding:0!important;background:none!important;border:0!important;text-align:left!important;font:12px/1.35 'PT Mono','Courier New',monospace!important;color:#bfffdc!important}
.directory-links a:before{content:'› ';color:#d24693}
.directory-links a:hover{color:#d24693!important;animation:none!important}
@media(max-width:740px){.site-map{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.directory-group .directory-main{font-size:13px!important}.directory-links a{font-size:12px!important}}
@media(max-width:430px){.site-map{grid-template-columns:1fr}}

/* V24 fixes -------------------------------------------------------------- */
/* The menu is always rebuilt from menu.js, so these nine slots remain exact. */
#hotline-menu.main-menu{display:grid!important;grid-template-columns:repeat(20,minmax(0,1fr))!important;grid-template-rows:repeat(2,36px)!important;height:78px!important;min-height:78px!important;align-items:center!important;align-content:center!important;column-gap:0!important;row-gap:0!important}
#hotline-menu .menu-group{position:relative!important;display:block!important;width:auto!important;min-width:0!important;margin:0!important}
#hotline-menu .menu-group:nth-child(1){grid-column:1/span 4!important;grid-row:1!important}
#hotline-menu .menu-group:nth-child(2){grid-column:5/span 4!important;grid-row:1!important}
#hotline-menu .menu-group:nth-child(3){grid-column:9/span 4!important;grid-row:1!important}
#hotline-menu .menu-group:nth-child(4){grid-column:13/span 4!important;grid-row:1!important}
#hotline-menu .menu-group:nth-child(5){grid-column:17/span 4!important;grid-row:1!important}
#hotline-menu .menu-group:nth-child(6){grid-column:3/span 4!important;grid-row:2!important}
#hotline-menu .menu-group:nth-child(7){grid-column:7/span 4!important;grid-row:2!important}
#hotline-menu .menu-group:nth-child(8){grid-column:11/span 4!important;grid-row:2!important}
#hotline-menu .menu-group:nth-child(9){grid-column:15/span 4!important;grid-row:2!important}
#hotline-menu .menu-main{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;box-sizing:border-box!important;white-space:nowrap!important}

/* Rainbow text: FONT's legacy color attribute was being defeated by a CSS
   color:inherit rule. Let the generated per-word colours actually render. */
.rainbow-copy{color:#bfc4db}
.rainbow-copy font{transition:text-shadow .2s ease}
.rainbow-copy a,.rainbow-copy a font{color:#bfffdc!important;text-decoration:none!important}
.rainbow-copy a:hover,.rainbow-copy a:hover font{color:#d24693!important}

/* Pavilion visitor information now belongs with the physical cafe visit. */
.visit-city-guide{display:block;width:100%;margin-top:16px}
.visit-city-guide .pavilion-note{width:100%;box-sizing:border-box;margin:0 0 12px}
.visit-city-guide .pavilion-guide,.visit-city-guide .pavilion-copy{display:block!important;width:100%!important;max-width:none!important;margin:0!important}
.visit-city-guide .pavilion-copy p{width:100%!important;max-width:none!important}

@media(max-width:660px){
 #hotline-menu.main-menu{grid-template-columns:repeat(20,minmax(0,1fr))!important;overflow:visible!important}
 #hotline-menu .menu-main{font-size:13px!important;padding-left:1px!important;padding-right:1px!important}
}


/* V25 --------------------------------------------------------------- */
/* Rainbow colours are now inline styles on spans, avoiding legacy FONT/CSS conflicts. */
.rainbow-copy .rainbow-word{transition:color .18s ease,text-shadow .18s ease}
.rainbow-copy a,.rainbow-copy a .rainbow-word{color:#bfffdc!important;text-decoration:none!important}
.rainbow-copy a:hover,.rainbow-copy a:hover .rainbow-word{color:#d24693!important}
.hotline-webring{border-radius:1px;background:rgba(10,55,72,.8);box-shadow:3px 3px #d24693;color:#bfc4db;width:700px;max-width:calc(100% - 24px);margin:15px auto;padding:12px;box-sizing:border-box;font-family:'PT Mono','Courier New',monospace;font-size:13px;text-align:left;line-height:16pt}
.webring-links{display:flex;justify-content:space-between;gap:10px;border-top:1px dotted rgba(191,255,220,.35);padding-top:9px;margin-top:9px;text-align:center}
.webring-links a{flex:1;color:#bfffdc;text-decoration:none;font-weight:bold;transition:color .2s ease,text-shadow .2s ease}
.webring-links a:hover{color:#d24693;text-shadow:0 0 5px rgba(210,70,147,.45)}
.radio-visualizer{display:block;width:calc(100% - 12px);height:34px;margin:0 6px 5px;background:#071c27;border:1px inset #bfffdc;image-rendering:pixelated}
@media(max-width:740px),(hover:none),(pointer:coarse){.radio-visualizer{display:none!important}}


/* V27: original-style Hotline Webring navigator */
.hotline-webring{display:none!important}
.hotline-webring-banner{
  width:700px;max-width:calc(100% - 24px);margin:18px auto;
  min-height:68px;padding:4px 14px;display:grid;grid-template-columns:minmax(92px,1fr) auto minmax(92px,1fr);
  align-items:center;gap:14px;background:rgba(10,55,72,.72);border-left:1px solid rgba(3,255,174,.35);
  border-top:1px solid rgba(3,255,174,.35);box-shadow:4px 5px #d24693;box-sizing:border-box;overflow:hidden;
  font-family:Arial Black,Impact,'PT Mono',sans-serif;font-style:italic;font-weight:900;
}
.hotline-webring-banner a{text-decoration:none!important;display:block;line-height:1}
.hotline-webring-banner .webring-title{
  color:#03ffae!important;text-align:center;white-space:nowrap;font-size:50px;letter-spacing:-2px;text-shadow:4px 3px #d24693;
}
.hotline-webring-banner .webring-nav{
  color:#65d9ff!important;font-style:normal;font-size:42px;letter-spacing:-9px;text-shadow:5px 3px #ff1687;white-space:nowrap;
}
.hotline-webring-banner .webring-prev{text-align:left}
.hotline-webring-banner .webring-next{text-align:right}
.hotline-webring-banner .webring-title:hover{color:#d24693!important;text-shadow:4px 3px #03ffae}
.hotline-webring-banner .webring-nav:hover{color:#03ffae!important;text-shadow:5px 3px #d24693}
@media(max-width:740px){
 .hotline-webring-banner{min-height:52px;padding:4px 8px;gap:7px;grid-template-columns:minmax(58px,1fr) auto minmax(58px,1fr)}
 .hotline-webring-banner .webring-title{font-size:clamp(23px,7.5vw,38px);letter-spacing:-1px;text-shadow:3px 2px #d24693}
 .hotline-webring-banner .webring-nav{font-size:clamp(22px,6.5vw,34px);letter-spacing:-6px;text-shadow:3px 2px #ff1687}
}

/* Utility: add class="no-rainbow" to a rainbow-copy block (or an ancestor) to keep one text colour. */
.no-rainbow,.no-rainbow .rainbow-word{color:#bfc4db!important}
.no-rainbow a,.no-rainbow a .rainbow-word{color:#bfffdc!important}
.no-rainbow a:hover,.no-rainbow a:hover .rainbow-word{color:#d24693!important}

/* V28: mobile polish ------------------------------------------------------ */
/* Fill the Behind the Curtain ribbon edge-to-edge with as many square-ish
   archive scraps as the current width permits. */
.media-ribbon{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(58px,1fr))!important;gap:5px!important;width:100%!important}
.media-ribbon a{min-width:0!important}
.media-ribbon img{width:100%!important;aspect-ratio:1/1!important;height:auto!important;object-fit:cover!important}

footer{flex-wrap:wrap!important}
footer .storage-note{flex:0 0 100%;display:block;margin-top:5px;padding-top:5px;border-top:1px dotted rgba(191,255,220,.25);font-size:8px;line-height:11px;color:#9fd5df;text-align:center;font-weight:normal}

@media(max-width:740px){
  /* Keep SkyBanner at its natural proportions and crop equally from both
     sides rather than pinning the artwork to the left edge. */
  .signature-banner{height:54px!important;overflow:hidden!important}
  .signature-banner img{position:absolute!important;top:0!important;left:50%!important;width:auto!important;max-width:none!important;height:54px!important;min-width:100%!important;object-fit:cover!important;object-position:center top!important;transform:translateX(-50%)!important}

  /* The little 88x31 Café badges stay alive on mobile too. */
  .hero-button-six{display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start!important;gap:5px!important;width:100%!important;overflow-x:auto!important;padding:3px 2px 6px!important;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .hero-button-six::-webkit-scrollbar{display:none}
  .hero-button-six a{flex:0 0 88px!important}

  /* Webring: reserve compact fixed arrow columns and let the title consume
     everything left in the middle. No clipping, even on narrow phones. */
  .hotline-webring-banner{width:calc(100% - 16px)!important;max-width:none!important;min-height:50px!important;padding:5px 6px!important;gap:3px!important;grid-template-columns:42px minmax(0,1fr) 42px!important;overflow:visible!important}
  .hotline-webring-banner .webring-nav{font-size:20px!important;letter-spacing:-5px!important;text-shadow:2px 2px #ff1687!important;overflow:visible!important}
  .hotline-webring-banner .webring-title{min-width:0!important;font-size:clamp(18px,7.1vw,31px)!important;letter-spacing:-1.4px!important;white-space:nowrap!important;text-shadow:3px 2px #d24693!important}

  /* Three-card shelves become swipeable single rows instead of wrapping 2+1. */
  .thumb-shelf{display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start!important;gap:7px!important;overflow-x:auto!important;overflow-y:hidden!important;padding:2px 3px 8px!important;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .thumb-shelf>a{flex:0 0 calc((100% - 7px)/2)!important;scroll-snap-align:start!important}
  .thumb-shelf img{width:100%!important;height:110px!important;object-fit:cover!important}

  /* Keep the thumbnail ribbon full-width and non-scrolling: auto-fit simply
     packs however many squares the handset can comfortably hold. */
  .media-ribbon{grid-template-columns:repeat(auto-fit,minmax(48px,1fr))!important;gap:4px!important}
}

/* V29: final layout/mobile fixes ----------------------------------------- */
/* Keep the hero artwork visually sitting directly on the sky layer. */
.hero-logo-link,.hero-logo{background:transparent!important}
.hero-logo{mix-blend-mode:multiply}

/* Webring: arrows are pinned to the physical edges; title owns the centre. */
.hotline-webring-banner{
  position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;
  width:700px!important;max-width:calc(100% - 24px)!important;min-height:68px!important;
  padding:5px 82px!important;box-sizing:border-box!important;overflow:visible!important;
}
.hotline-webring-banner .webring-title{
  display:block!important;min-width:0!important;max-width:100%!important;margin:0 auto!important;
  text-align:center!important;white-space:nowrap!important;font-size:clamp(30px,6.2vw,50px)!important;
  font-style:italic!important;line-height:1!important;
}
.hotline-webring-banner .webring-nav{
  position:absolute!important;top:50%!important;transform:translateY(-50%)!important;
  width:auto!important;margin:0!important;font-size:38px!important;line-height:1!important;
}
.hotline-webring-banner .webring-prev{left:10px!important;text-align:left!important}
.hotline-webring-banner .webring-next{right:10px!important;text-align:right!important}

/* What's New feature is now image-only and clickable. */
.mini-gallery .news-feature-link{display:block!important;line-height:0!important;text-decoration:none!important}
.mini-gallery .news-feature-link img{margin:0 auto!important}

@media(max-width:740px){
  /* Multiply removes the flat cyan matte in the logo artwork and lets the
     SkyBanner/cloud texture read through while retaining the dark lettering. */
  .hero-logo{mix-blend-mode:multiply!important}

  .hotline-webring-banner{
    width:calc(100% - 16px)!important;max-width:none!important;min-height:52px!important;
    padding:5px 49px!important;margin-left:auto!important;margin-right:auto!important;
  }
  .hotline-webring-banner .webring-title{
    font-size:clamp(17px,7vw,30px)!important;letter-spacing:-1.2px!important;
  }
  .hotline-webring-banner .webring-nav{font-size:21px!important;letter-spacing:-5px!important}
  .hotline-webring-banner .webring-prev{left:5px!important}
  .hotline-webring-banner .webring-next{right:5px!important}

  /* Behind the Curtain thumbnail strip stays one line and becomes a native,
     JS-free swipe rail. */
  .media-ribbon{
    display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start!important;
    width:100%!important;max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;
    gap:5px!important;padding:6px 4px 9px!important;box-sizing:border-box!important;
    -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scrollbar-width:thin;
  }
  .media-ribbon a{flex:0 0 58px!important;width:58px!important;scroll-snap-align:start!important}
  .media-ribbon img{display:block!important;width:58px!important;height:58px!important;aspect-ratio:1/1!important;object-fit:cover!important}
}

/* V30: portrait sky fix --------------------------------------------------- */
/* On narrow portrait screens the old 54px crop ended before the masthead did,
   so the transparent parts of titletext3.png exposed the flat body cyan. Keep
   a taller slice of SkyBanner behind the whole hero instead. */
.hero-logo{mix-blend-mode:normal!important}
@media (max-width:740px){
  .signature-banner{
    position:absolute!important;
    top:0!important;left:0!important;right:0!important;
    width:100%!important;height:250px!important;
    overflow:hidden!important;
  }
  .signature-banner img{
    position:absolute!important;
    top:0!important;left:50%!important;
    width:auto!important;height:250px!important;
    min-width:100%!important;max-width:none!important;
    object-fit:cover!important;
    object-position:center top!important;
    transform:translateX(-50%)!important;
  }
  .page-shell{margin-top:64px!important}
  .hero,.hero-logo-link,.hero-logo{background:transparent!important}
}

/* V21: current-page navigation stays still ------------------------------- */
/* Preserve the active-page visual treatment, but only animate a menu item
   while the pointer is actually hovering over it. */
.main-menu .menu-main.active:not(:hover) {
  animation: none !important;
}