/* Retail Drama Online :: full-page, mobile-optimized Y2K editorial */
:root{
  --ink:#0b0b0b; --paper:#fbfaf6; --white:#fff; --char:#3a3a3a; --char-2:#555;
  --rule:#b9b9b9; --rule-lt:#dedede; --link:#1a2fd0; --link-hi:#0012a3; --red:#c00;
  --slot-a:#f1f0ea; --slot-b:#e7e6df;
  --display:"Oswald","Arial Narrow","Helvetica Neue Condensed",Impact,sans-serif;
  --sans:Arial,"Helvetica Neue",Helvetica,sans-serif;
  --mono:"IBM Plex Mono","Courier New",monospace;
  /* full-screen layout: small side gutter that grows a little on big screens */
  --gut:clamp(16px, 2vw, 40px);
  --gut-l:max(var(--gut), env(safe-area-inset-left, 0px));
  --gut-r:max(var(--gut), env(safe-area-inset-right, 0px));
}
html.goth{ /* mall-goth mode (konami code) */
  --ink:#f2f2f2; --paper:#0d0d0f; --white:#18181b; --char:#1f1f23; --char-2:#9a9aa3;
  --rule:#3a3a40; --rule-lt:#2a2a2e; --link:#b9a6ff; --link-hi:#e1d8ff; --red:#ff4d6d;
  --slot-a:#17171a; --slot-b:#1d1d21; color-scheme:dark;
}
html.goth .masthead{background:#000}
html.goth .wordmark{color:#fff}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--paper);scroll-padding-top:56px}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--paper);color:var(--ink);font:12px/1.5 var(--sans);-webkit-tap-highlight-color:rgba(26,47,208,.15)}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--link-hi)}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.mono{font-family:var(--mono)}
.small{font-size:10px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:#000;color:#fff;padding:8px 12px;z-index:99}
.skip:focus{left:8px;top:calc(8px + env(safe-area-inset-top,0px))}

/* full page shell: footer always at the bottom */
.page{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.layout{flex:1}

/* ---------- masthead ---------- */
.masthead{background:var(--white);padding:calc(10px + env(safe-area-inset-top,0px)) var(--gut-r) 10px var(--gut-l);border-bottom:3px solid var(--ink)}
.mast-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px}
.h1{margin:0}
.logo{width:100%;max-width:max(600px, 44vw);margin:-14px 0 -12px -10px}
.tagline{margin:0;font:600 11px/1.4 var(--sans);letter-spacing:.04em}
.dateline{align-self:start;text-align:right;font-size:10px;letter-spacing:.06em;font-weight:500;padding-top:6px}
.dateline span{color:var(--char-2)}
.star-btn,.inline-star,.big-star{background:none;border:0;padding:0 2px;color:var(--ink)}
.big-star{font-size:56px;line-height:1;transition:transform .5s}
.inline-star{transition:transform .4s}
.spin{transform:rotate(360deg) scale(1.15)}

/* ---------- nav ---------- */
.topnav{position:relative;z-index:20;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px;background:#3a3a3a;color:#fff;padding:7px var(--gut-r) 7px var(--gut-l);border-bottom:1px solid #000}
.topnav ul{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.topnav li+li::before{content:"::";color:#999;padding:0 9px}
.topnav a{color:#fff;text-decoration:none;font:600 10px/1 var(--sans);letter-spacing:.07em;text-transform:uppercase}
.topnav a:hover,.topnav a[aria-current]{text-decoration:underline;text-underline-offset:4px}
.search{display:flex;align-items:center;gap:6px}
.search label{font:600 10px var(--sans);letter-spacing:.06em}
.search input{width:160px;border:1px solid #888;padding:4px 6px;font:11px var(--sans);border-radius:0;background:#fff;color:#000;-webkit-appearance:none;appearance:none}
.search button{border:1px solid #888;background:#e6e6e6;color:#000;padding:3px 9px;font-weight:700;font-size:10px;border-radius:0}

/* ---------- layout ---------- */
.layout.home,.layout.sub{display:block}
.shell{flex:1;display:grid;grid-template-columns:160px minmax(0,1fr);gap:0 22px;padding:14px var(--gut-r) 0 var(--gut-l)}
.shell-main{display:flex;flex-direction:column;min-width:0}
.shell-main>.layout{flex:1;padding:0 0 28px}
.layout.sub main{max-width:none}

/* directory */
.directory{border-top:2px solid var(--ink);font-size:11px}
.dir-wrap>summary{display:none}
.directory h2{font:700 10px/1 var(--sans);text-transform:uppercase;letter-spacing:.04em;margin:10px 0 3px;padding-top:8px;border-top:1px solid var(--rule)}
.directory h2::first-letter{color:var(--red)}
.directory ul{list-style:none;margin:0;padding:0 0 0 12px}
.directory li{padding:1px 0}
.dir-home{margin:6px 0 0;font-weight:700;font-size:10px}
.dir-home a{color:var(--ink);text-decoration:none}

/* type */
.display{margin:0;font:500 clamp(38px,6vw,62px)/1 var(--display);color:var(--link);letter-spacing:-.01em}
.display-sm{font:600 26px/1 var(--display);color:var(--red)}
.kicker{margin:4px 0 14px;font-size:10px;letter-spacing:.08em;color:var(--char)}
.crumb{margin:0 0 6px;font-size:10px;color:var(--char-2)}
.h3{font:700 13px var(--sans);margin:0 0 6px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.small-h{font:500 10px var(--mono);margin:0 0 6px;border-bottom:1px solid var(--rule);padding-bottom:3px}
.badge{font-size:10px;font-weight:500;background:var(--ink);color:var(--paper);padding:2px 6px;letter-spacing:.06em;white-space:nowrap}
.bar{font:700 10px var(--sans);text-transform:uppercase;letter-spacing:.06em;background:#3a3a3a;color:#fff;padding:6px 9px;margin:24px 0 10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bar .mono{font-weight:400;text-transform:none;color:#ccc}
.bar-more{margin-left:auto;color:#fff;font-weight:400;text-transform:none;font-size:10px;letter-spacing:0}
.bar-more:hover{color:#fff}

/* collections head (home) */
.coll-head{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:8px 14px;border-bottom:1px solid var(--rule);padding-bottom:8px;margin-bottom:14px}
.coll-head .kicker{margin-bottom:0}
.mast-art{border:2px solid var(--ink);padding:0;background:#fff;height:clamp(100px,7vw,170px);width:100%;overflow:hidden}
.mast-art img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;transform:scale(1.35)}

/* strips & slots */
.strip{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin:0 0 10px;padding:4px;border:1px solid var(--rule);background:var(--white)}
.strip.three{grid-template-columns:repeat(3,1fr)}
.photo-slot{width:100%;aspect-ratio:4/5;border:1px dashed var(--char-2);background:repeating-linear-gradient(45deg,var(--slot-a) 0 6px,var(--slot-b) 6px 12px);font:600 10px/1.3 var(--mono);text-transform:uppercase;color:var(--char-2);padding:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.photo-slot small{font-weight:400;text-transform:lowercase}
.photo-slot:hover{border-style:solid;border-color:var(--ink)}
.photo-slot.sm{aspect-ratio:1}
.wiggle{animation:wig .4s}
@keyframes wig{25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}

/* filters */
.filters{margin:14px 0 4px;display:grid;gap:8px;max-width:360px}
.f-row{display:flex;align-items:center;gap:18px}
.f-num{color:var(--link);font-weight:700;width:10px}
.filters select{flex:1;font:11px var(--sans);padding:4px;border:1px solid #888;border-radius:0;background:var(--white);color:var(--link)}
.go-link{justify-self:start;background:none;border:0;padding:4px 0;color:var(--link);text-decoration:underline;font-size:11px}
.filter-out{min-height:1.4em;margin:0;font-size:10px;color:var(--char)}
.view-all{font-size:11px}

/* about / split */
.about-body{display:grid;grid-template-columns:220px 1fr;gap:16px;align-items:start}
.about-body img{border:1px solid var(--rule);background:#fff}
.about-body p,.split p{margin:0 0 10px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.feature-art{padding:0;border:2px solid var(--ink);background:#fff;box-shadow:5px 5px 0 var(--ink)}

/* bulletins & small things */
.bulletins{list-style:none;margin:0;padding:0}
.bulletins li{padding:7px 0;border-bottom:1px dotted var(--rule)}
.tiny{background:none;border:1px solid var(--rule);padding:1px 6px;font:10px var(--mono);color:var(--link);vertical-align:1px}
.tiny:hover{border-color:var(--ink)}
.btn{display:inline-block;background:var(--ink);color:var(--paper);text-decoration:none;font:700 10px var(--sans);letter-spacing:.05em;padding:8px 14px;border:0}
.btn:hover{color:var(--paper);text-decoration:underline}
.notice{border:2px solid var(--ink);background:var(--white);padding:10px 12px;margin:0 0 6px}
.notice.raccoon{display:flex;gap:12px;align-items:center}
.notice.raccoon p{margin:0}
.ascii{font-size:18px;white-space:pre;margin:0}

/* tables */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ruled{width:100%;border-collapse:collapse;background:var(--white);font-size:11px}
.ruled th,.ruled td{border:1px solid var(--rule);padding:6px 8px;text-align:left;vertical-align:top}
.ruled thead th{background:var(--rule-lt);font:700 10px var(--sans);text-transform:uppercase;letter-spacing:.05em}
.mini td{border-bottom:1px dotted var(--rule);padding:2px 10px 2px 0;font:10px var(--mono)}

/* vibes, steps, eras, catalog, top 8 */
.vibes,.steps,.top8,.gallery,.features{list-style:none;margin:0;padding:0}
.vibes{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px}
.vibes button,.steps button{width:100%;height:100%;text-align:left;background:var(--white);border:1px solid var(--rule);padding:8px 10px;display:grid;gap:2px;align-content:start}
.vibes button:hover,.steps button:hover{border-color:var(--ink)}
.vibes b{color:var(--link);text-decoration:underline}
.vibes span,.steps span{font-size:10px;color:var(--char-2)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.steps b{font:600 10px var(--mono)}
.era-row{display:flex;flex-wrap:wrap;gap:6px}
.era-row button,.catalog button{background:var(--white);border:1px solid var(--ink);padding:6px 12px;font:600 11px var(--mono);border-radius:0}
.era-row button:hover,.catalog button:hover{background:var(--ink);color:var(--paper)}
.catalog{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:4px}
.catalog button{padding:8px 0;box-shadow:inset 0 -6px 0 var(--rule-lt)}
.rules,.plain-list{padding-left:20px}
.rules li,.plain-list li{margin-bottom:6px}
.top8{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.top8 button{width:100%;background:var(--white);border:1px solid var(--rule);padding:8px 4px;font:600 10px var(--sans);color:var(--link);text-decoration:underline;display:grid;gap:4px;justify-items:center}
.top8 .pic{width:64px;height:64px;display:grid;place-items:center;border:1px solid var(--ink);background:var(--paper);font-size:26px;text-decoration:none;color:var(--ink);overflow:hidden}
.top8 .pic.mono{font-size:13px}
.top8 .pic img{width:100%;height:100%;object-fit:cover;object-position:62% 40%;transform:scale(1.8)}

/* gallery, tv, lookbook */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.gallery button:not(.photo-slot){padding:0;border:1px solid var(--ink);background:#fff;aspect-ratio:4/5;overflow:hidden;width:100%}
.gallery .photo-slot{aspect-ratio:4/5}
.gallery button img{width:100%;height:100%;object-fit:cover}
.gallery p{margin:4px 0 0;color:var(--char-2)}
.tv{display:grid;max-width:640px;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:14px;align-items:center}
.tv-screen{aspect-ratio:4/3;border:10px solid #222;border-radius:18px;background:repeating-linear-gradient(0deg,#ddd 0 2px,#aaa 2px 3px,#ccc 3px 5px,#999 5px 6px);display:grid;place-items:center;box-shadow:inset 0 0 40px rgba(0,0,0,.5)}
.tv-screen span{background:#000;color:#fff;padding:4px 10px;font-size:12px;letter-spacing:.2em}
.tv-controls{display:grid;gap:6px;justify-items:start}
.tv-controls p{margin:0}
.tv-controls button{background:var(--white);border:1px solid var(--ink);padding:5px 10px;font:600 10px var(--sans)}
.lookbook{border:2px solid var(--ink);background:var(--white);max-width:520px}
.lb-page{min-height:300px;padding:14px;display:grid;align-content:center;justify-items:center;text-align:center;gap:8px}
.lb-page img{max-height:240px;width:auto;border:1px solid var(--rule)}
.lb-page .photo-slot{width:180px}
.lb-title{font:600 28px/1.05 var(--display);margin:0;text-transform:uppercase}
.lb-nav{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--rule);padding:6px 10px}
.lb-nav button{background:none;border:0;color:var(--link);text-decoration:underline;padding:6px 4px}
.features li{padding:8px 0;border-bottom:1px dotted var(--rule)}

/* community */
.comm-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.guestbook,.composer{display:grid;gap:4px;max-width:520px}
.guestbook label,.composer label{font-weight:700;font-size:10px;margin-top:4px}
.guestbook input,.guestbook textarea,.composer textarea,.composer select{font:12px var(--sans);border:1px solid #888;border-radius:0;padding:6px;background:var(--white);color:var(--ink)}
.guestbook input,.guestbook textarea,.composer textarea{-webkit-appearance:none;appearance:none}
.guestbook button,.composer button{justify-self:start;margin-top:6px;background:var(--ink);color:var(--paper);border:0;padding:8px 14px;font-weight:700;font-size:10px;letter-spacing:.05em}
.note{margin:0 0 4px;color:var(--char-2)}
.gb-list{list-style:none;margin:0;padding:0;font-size:11px;max-height:260px;overflow:auto}
.gb-list li{padding:6px 0;border-bottom:1px dotted var(--rule)}
.gb-list b{color:var(--link)}
.gb-empty{color:var(--char-2);font-style:italic}
.buttons88{display:flex;flex-wrap:wrap;gap:6px}
.b88{width:88px;height:31px;display:grid;place-items:center;text-align:center;font:700 8px/1.05 var(--mono);background:var(--ink);color:var(--paper);text-decoration:none;border:1px solid var(--ink);padding:0}
.b88.empty{background:var(--white);color:var(--char-2);border-style:dashed}

/* about facts, faq, contact */
.facts{display:grid;grid-template-columns:140px 1fr;margin:0;border-top:1px solid var(--rule)}
.facts dt,.facts dd{margin:0;padding:6px 0;border-bottom:1px solid var(--rule)}
.facts dt{font:600 10px var(--mono);text-transform:uppercase;color:var(--char-2)}
main details{border-bottom:1px solid var(--rule);padding:6px 0}
main summary{cursor:pointer;color:var(--link);text-decoration:underline;padding:4px 0}
main details p{margin:6px 0 4px}
.contact-card{border:2px solid var(--ink);background:var(--white);padding:14px;box-shadow:5px 5px 0 var(--ink);max-width:520px}
.contact-card p{margin:0 0 8px}
.email-big{font-size:clamp(12px,2.6vw,18px);word-break:break-all}
.tree,.tree ul{list-style:none;padding-left:18px;margin:4px 0}
.tree{padding-left:0}
.tree li{padding:2px 0}
.tree ul li::before{content:"├─ ";color:var(--char-2)}
.error-page{padding:20px 0}
.error-page .ascii{font-size:16px;line-height:1.2}

/* rail */
.rail{display:grid;gap:12px;align-content:start}
.card{border:1px solid var(--rule);background:var(--white);padding:9px}
.card h2{font:700 13px var(--sans);margin:0 0 6px;padding-bottom:4px;border-bottom:1px solid var(--rule)}
.card-body{display:grid;grid-template-columns:84px 1fr;gap:9px;font-size:11px}
.card-body p{margin:0}
.thumb{padding:0;border:1px solid var(--ink);aspect-ratio:1;overflow:hidden;background:#fff}
.thumb img{width:100%;height:100%;object-fit:cover;object-position:62% 40%;transform:scale(1.8)}
.go{display:block;text-align:right;font-size:11px;margin-top:6px}
.mailing{border:2px solid var(--ink)}
.mailing p{margin:0 0 8px}

/* footer */
.footer{position:relative;background:#3a3a3a;color:#fff;padding:12px var(--gut-r) calc(16px + env(safe-area-inset-bottom,0px)) var(--gut-l);border-top:3px solid #0b0b0b;font:600 10px var(--sans);letter-spacing:.06em}
.foot-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;padding:6px 0}
.foot-row.lower{border-top:1px solid #555;padding-top:9px}
.foot-link{color:#fff;text-decoration:none}
.foot-link:hover{text-decoration:underline;color:#fff}
.search.dark button{background:#222;color:#fff;border-color:#777}
.widgets{border-top:1px solid #555;padding-top:10px;gap:10px 18px}
.status{display:flex;align-items:center;gap:7px;background:#fff;color:#0b0b0b;border:0;padding:6px 10px;font:500 10px var(--mono);text-align:left}
.dot{width:8px;height:8px;background:#1bb83a;border:1px solid #000;flex:none}
.status.away .dot{background:#e0a400}
.radio{display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-weight:400}
.radio button{background:#222;color:#fff;border:1px solid #777;width:30px;height:26px;padding:0;font-size:10px}
.radio-now{color:#bbb;font-size:10px}
.counters{margin:0;font-weight:400;color:#ccc;font-size:10px}
.counters .sep{color:#777}
.foot-logo{width:220px;margin-top:12px;filter:invert(1);border:1px solid #555}

/* surprise panel */
.egg{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));width:min(340px,calc(100vw - 32px));max-height:70vh;overflow:auto;background:var(--white);color:var(--ink);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);z-index:50;font-size:12px}
.egg-bar{display:flex;justify-content:space-between;align-items:center;background:#0b0b0b;color:#fff;padding:4px 6px;font:500 10px var(--mono);position:sticky;top:0}
.egg-x{background:#fff;color:#000;border:0;width:28px;height:28px;line-height:1;font-weight:700;font-size:16px;padding:0}
.egg-body{padding:12px}
.egg-body p{margin:0 0 6px}
.egg-body .big{font:600 20px/1.05 var(--display);text-transform:uppercase}
.egg-foot{border-top:1px solid var(--rule);padding:8px 12px;font-size:11px}
.results{margin:4px 0 8px;padding-left:18px}
.results li{padding:3px 0}
.award{background:var(--ink);color:var(--paper);padding:6px 8px;font-size:10px;margin-top:8px!important}

/* automatic screen-name intake :: shares the RDO_message.txt window language */
.rdo-entry-backdrop{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.52)}
.rdo-entry-backdrop[hidden]{display:none}
.rdo-entry.egg{position:relative;inset:auto;right:auto;bottom:auto;width:min(440px,100%);max-height:min(80vh,680px);margin:0;overflow:auto}
.rdo-entry-backdrop.is-room:not([hidden]){display:block;inset:0;padding:0;background:transparent;pointer-events:none;z-index:40}
.rdo-entry-backdrop.is-room .rdo-entry.egg{position:fixed;left:max(16px,env(safe-area-inset-left,0px));right:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:min(680px,calc(100vw - 32px));max-height:72vh;pointer-events:auto;z-index:40}
.rdo-entry .egg-body{padding:14px}
.rdo-entry .egg-body p{margin:0 0 9px}
.rdo-chat-room-layout{display:grid;grid-template-columns:170px minmax(0,1fr);gap:12px}
.rdo-chat-buddy-pane{border-right:1px solid var(--rule);padding-right:10px;min-width:0}
.rdo-chat-buddy-pane .small-h{margin:0 0 5px;padding:0 0 5px;border-bottom:1px solid var(--rule);font:700 11px var(--mono)}
.rdo-chat-conversation{min-width:0}
.rdo-entry-form,.rdo-chat-form{display:grid;gap:6px;margin-top:12px}
.rdo-entry-form label,.rdo-chat-form label{font:700 10px var(--mono);text-transform:uppercase;letter-spacing:.04em}
.rdo-entry-form input,.rdo-chat-form input{min-width:0;width:100%;padding:8px;border:1px solid #777;border-radius:0;background:var(--white);color:var(--ink);font:12px var(--sans)}
.rdo-entry-form button,.rdo-chat-form button,.rdo-change-name{justify-self:start;border:1px solid var(--ink);border-radius:0;background:var(--ink);color:#fff;padding:8px 12px;font:700 10px var(--sans);letter-spacing:.04em;cursor:pointer}
.rdo-chat-log{max-height:220px;overflow:auto;border:1px solid var(--rule);background:#fafafa;padding:10px;font:11px/1.45 var(--mono)}
.rdo-chat-log p{overflow-wrap:anywhere}
.rdo-chat-form{grid-template-columns:minmax(0,1fr) auto;align-items:end}
.rdo-chat-form label{grid-column:1/-1}
.rdo-change-name{margin-top:10px;background:#fff;color:var(--ink);font-weight:500}
.rdo-chat-launch{justify-self:start;border:1px solid #fff;background:transparent;color:#fff;padding:7px 9px;font:700 10px var(--mono);cursor:pointer}
.rdo-chat-restore{position:fixed;left:max(16px,env(safe-area-inset-left,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:45;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);background:#0b0b0b;color:#fff;padding:8px 12px;font:700 12px var(--mono);cursor:pointer}
.rdo-chat-restore span{font-weight:400;color:#bde5bc}
.rdo-chat-restore[hidden]{display:none}
.rdo-buddy-list{list-style:none;margin:8px 0;padding:0;border-top:1px solid var(--rule)}
.rdo-buddy-list li{display:flex;align-items:center;gap:8px;padding:7px 4px;border-bottom:1px solid var(--rule);font:12px var(--mono);overflow-wrap:anywhere}
.rdo-buddy-status{font-size:13px;color:#777;flex:0 0 auto}
.rdo-buddy-status.online{color:#25823b}
.rdo-buddy-state{margin-left:auto;color:#666;font-size:9px;white-space:nowrap}
.rdo-buddy-state.online{color:#25823b}
.rdo-buddy-empty{font:12px var(--mono);color:var(--char-2)}
body.rdo-entry-open{overflow:hidden}
@media (max-width:620px){.rdo-chat-room-layout{grid-template-columns:1fr;gap:8px}.rdo-chat-buddy-pane{border-right:0;border-bottom:1px solid var(--rule);padding:0 0 6px}.rdo-buddy-list{display:flex;flex-wrap:wrap;gap:4px 10px;max-height:70px;overflow:auto}.rdo-buddy-list li{padding:3px 0;border:0}.rdo-entry-backdrop.is-room .rdo-entry.egg{left:10px;right:10px;bottom:calc(58px + env(safe-area-inset-bottom,0px));width:auto;max-height:70vh}}
@media (max-width:420px){.rdo-entry-backdrop:not(.is-room){padding:10px}.rdo-entry-backdrop:not(.is-room) .rdo-entry.egg{width:100%;max-height:86vh}.rdo-chat-form{grid-template-columns:1fr}.rdo-chat-form button{justify-self:start}}

/* ---------- tablet ---------- */
@media (max-width:1060px){
  .rail{grid-column:1/-1;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:18px}
  .coll-head{grid-template-columns:1fr auto}
  .mast-art{grid-column:1/-1}
  .steps{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(2,1fr)}
}

/* ---------- phone ---------- */
@media (max-width:720px){
  body{font-size:13px}
  html{scroll-padding-top:100px}
  .masthead{padding-bottom:8px}
  .mast-row{grid-template-columns:1fr}
  .dateline{order:-1;font-size:10px;padding-top:0;text-align:left}
  .logo{margin:-8px 0 -6px -6px}
  .tagline{font-size:10px}
  .tagline .star-btn{min-width:28px;min-height:32px}

  /* nav: one swipeable row + full-width search; sticks under the notch */
  .topnav{padding-top:max(6px,env(safe-area-inset-top,0px));gap:4px}
  .topnav ul{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;width:100%}
  .topnav ul::-webkit-scrollbar{display:none}
  .topnav li{flex:none}
  .topnav a{display:inline-block;padding:10px 0;font-size:11px}
  .search{width:100%}
  .search input{flex:1;width:auto;min-width:0;font-size:16px;padding:7px 8px} /* 16px = no iOS zoom */
  .search button{padding:8px 14px;font-size:11px}
  .topnav .search label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

  .layout{padding-top:12px}
  .layout.home,.layout.sub{grid-template-columns:1fr}
  .layout.sub main{max-width:none}

  /* directory collapses into a tap-to-open drawer */
  .directory{border-top:0;margin-bottom:14px}
  .dir-wrap{border:2px solid var(--ink);background:var(--white)}
  .dir-wrap>summary{display:flex;justify-content:space-between;align-items:center;list-style:none;padding:12px;font:700 10px var(--sans);letter-spacing:.08em;color:var(--ink);min-height:44px;cursor:pointer}
  .dir-wrap>summary::-webkit-details-marker{display:none}
  .dir-wrap[open]>summary span{display:inline-block;transform:rotate(180deg)}
  .dir-wrap>*:not(summary){margin-left:12px;margin-right:12px}
  .dir-wrap>ul:last-child{margin-bottom:12px}
  .directory ul{display:flex;flex-wrap:wrap;gap:0 14px;padding-left:12px}
  .directory li a{display:inline-block;padding:7px 0}

  .mast-art{height:110px}
  .big-star{font-size:42px}
  .strip{grid-template-columns:repeat(3,1fr)}
  .filters{max-width:none}
  .filters select,.guestbook input,.guestbook textarea,.composer textarea,.composer select{font-size:16px;padding:8px}
  .go-link,.view-all{display:inline-block;padding:8px 0;font-size:13px}
  .about-body,.comm-grid,.split,.tv{grid-template-columns:1fr}
  .about-body img{max-width:300px}
  .rail{grid-template-columns:1fr}
  .top8{grid-template-columns:repeat(2,1fr)}
  .vibes{grid-template-columns:1fr 1fr}
  .tiny{padding:4px 8px;font-size:10px}
  .bulletins li{padding:10px 0}
  .card-body{font-size:12px}
  .go{font-size:13px;padding:6px 0}
  .facts{grid-template-columns:110px 1fr}
  .foot-row{gap:4px 18px}
  .foot-link{display:inline-block;padding:9px 0;font-size:10px}
  .search.dark input{font-size:16px}
  .radio button{width:40px;height:34px}
  .status{padding:10px 12px;width:100%}
  .egg{left:12px;right:12px;width:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:380px){
  .strip{grid-template-columns:repeat(2,1fr)}
  .vibes{grid-template-columns:1fr}
}

@media (hover:none){ .photo-slot:hover{border-style:dashed;border-color:var(--char-2)} }
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* =====================================================================
   MOCKUP MATCH (landing-page mockup, 1586px reference)
   Base rules first (phone/tablet), then the desktop block that scales
   every measurement from the mockup with --u (1u = 1/1586 of the width).
   ===================================================================== */
.wordmark{display:inline-block;font:800 clamp(28px,8.6vw,64px)/.9 "Inter Tight","Helvetica Neue",Arial,sans-serif;letter-spacing:-.06em;color:var(--ink);text-decoration:none;white-space:nowrap}
.wordmark:hover{color:var(--ink)}
.dateline{font-family:var(--sans)}
.directory h2{position:relative;padding-left:0}
.directory h2::first-letter{color:inherit}
.tri{color:var(--red);font-size:.8em;margin-right:4px}

.coll-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 14px;align-items:center;margin-bottom:16px}
.coll-h{margin:0;font:500 clamp(38px,7vw,62px)/.95 "Fira Sans Condensed","Arial Narrow",sans-serif;color:var(--link);letter-spacing:-.01em;padding-bottom:2px;border-bottom:2px solid var(--link)}
.kicker{margin:8px 0 0;font:400 10px/1.3 var(--sans);letter-spacing:.07em;color:var(--char)}
.mast-art{grid-column:1/-1;border:0;padding:0;background:#fff;height:auto;aspect-ratio:512/103;width:100%;overflow:hidden}
.mast-art img{width:100%;height:100%;object-fit:cover;transform:none}
.coll-cols{display:grid;gap:22px}
.ruled-col{border-left:1px solid var(--rule)}
.col-h{margin:0;font:700 15px/1.1 var(--sans);letter-spacing:.02em;padding:2px 0 6px 9px;border-bottom:1px solid var(--rule)}
.arrivals>:not(.col-h){margin-left:12px}
.strip{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin-top:10px;padding:0;border:0;background:none}
.pic{display:block;width:100%;padding:0;border:1px solid var(--rule);background:#fff;aspect-ratio:111/125;overflow:hidden}
.pic img{width:100%;height:100%;object-fit:cover}
.pic:hover{border-color:var(--ink)}
.intro{color:var(--char);margin-top:14px}
.filters{max-width:420px;margin-top:16px;gap:12px}
.f-row{gap:22px}
.f-num{font-weight:400;font-size:15px}
.filters select{-webkit-appearance:none;appearance:none;height:36px;padding:0 34px 0 12px;font-size:13px;border-color:#bdbdbd;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z'/%3E%3C/svg%3E") no-repeat right 10px center/12px 8px}
.view-row{margin-top:18px;font-size:13px}
.arrow{color:var(--link);font-size:.62em;margin-left:10px;vertical-align:.15em}
.rail{display:grid;gap:22px;align-content:start}
.card{border:0;border-left:1px solid var(--rule);background:none;padding:0 0 8px}
.card .col-h{font:700 15px/1.1 var(--sans);letter-spacing:.02em;margin:0;padding:2px 0 6px 9px;border-bottom:1px solid var(--rule)}
.view-all{font-size:inherit}
.card-body{position:relative}
.card-body{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:10px 34px 0 10px;align-items:start;font-size:12px}
.thumb{width:100%;aspect-ratio:132/98;border:1px solid var(--rule);background:#fff;padding:0;overflow:hidden}
.thumb img{transform:none;object-position:center}
.play{position:absolute;right:6px;bottom:0;display:grid;place-items:center;width:20px;height:20px;background:var(--link);color:#fff;font-size:10px;text-decoration:none;margin-bottom:8px}
.play:hover{color:#fff;background:var(--link-hi)}
.go-row{margin:10px 0 0;text-align:center;font-size:12px}
.go{display:inline;margin:0;text-align:left}

.footer{display:grid;gap:10px;background:#5e5e5e;border:2px solid #333;border-top-width:2px;padding:10px var(--gut-r) calc(10px + env(safe-area-inset-bottom,0px)) var(--gut-l);font:700 10px var(--sans);letter-spacing:.07em}
.foot-rows{display:grid;gap:6px}
.foot-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;padding:0;border:0}
.foot-row.lower{border:0;padding:0}
.pipe{color:#d0d0d0;font-weight:400}
.search.dark label{font:700 10px var(--sans);letter-spacing:.07em}
.search.dark input{border:0}
.search.dark button{background:none;border:0;color:#fff;font-size:13px;padding:0 6px}
.status{display:block;position:relative;background:#fff;color:#111;border:2px solid #333;padding:8px 44px 8px 12px;font:400 11px/1.25 var(--sans);letter-spacing:0;text-align:left;min-height:48px}
.status::after{content:"";position:absolute;right:4px;top:5px;bottom:5px;width:28px;background:#8a8a8a;clip-path:polygon(100% 0,100% 100%,0 50%)}
.status.away::after{background:#e0a400}

@media (max-width:1060px){
  .coll-cols .rail{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
}
@media (max-width:720px){
  .shell{display:block;padding-top:12px}
  .wordmark{font-size:clamp(26px,9.2vw,64px)}
  .masthead .dateline{margin-bottom:4px}
  .strip{grid-template-columns:repeat(3,1fr)}
  .pipe{display:none}
  .foot-row{gap:2px 18px}
  .status{width:100%}
  .card-body{grid-template-columns:110px minmax(0,1fr);font-size:13px}
  .filters select{font-size:16px;height:42px}
}

/* ---------- desktop: exact mockup proportions ---------- */
@media (min-width:1061px){
  .page{container-type:inline-size}
  .page *{--u:calc(100cqw / 1586)}

  /* masthead :: one tight line */
  .masthead{height:calc(62*var(--u));padding:0 calc(14*var(--u)) 0 calc(14*var(--u));border-bottom:0;display:flex;align-items:center}
  .mast-row{width:100%;align-items:center}
  .wordmark{font-size:calc(67*var(--u));letter-spacing:-.046em;line-height:.9}
  .dateline{align-self:center;padding:0;font:400 calc(16*var(--u)) var(--sans);letter-spacing:.02em}
  .dateline span{color:inherit;padding:0 calc(6*var(--u))}

  /* nav band */
  .topnav{height:calc(46*var(--u));padding:0 calc(18*var(--u)) 0 calc(14*var(--u));background:#575757;border-top:2px solid #2e2e2e;border-bottom:2px solid #2e2e2e;flex-wrap:nowrap;gap:0}
  .topnav a{font:500 calc(15*var(--u))/1 var(--sans);letter-spacing:.075em}
  .topnav li+li::before{padding:0 calc(19*var(--u));color:#d8d8d8}
  .topnav .search{align-self:stretch;border-left:1px solid #2e2e2e;padding-left:calc(17*var(--u));gap:calc(13*var(--u))}
  .topnav .search label{font:700 calc(12*var(--u)) var(--sans);letter-spacing:.06em}
  .topnav .search input{width:calc(291*var(--u));height:calc(29*var(--u));border:1px solid #2e2e2e;font-size:calc(13*var(--u))}
  .topnav .search button{width:calc(45*var(--u));height:calc(32*var(--u));padding:0;font:700 calc(14*var(--u)) var(--sans);background:#ececec;border:1px solid #2e2e2e}

  /* shell :: directory | main + footer */
  .shell{grid-template-columns:calc(160*var(--u)) minmax(0,1fr);column-gap:calc(28*var(--u));padding:0 0 0 calc(24*var(--u))}
  .shell-main{position:relative}
  .shell-main::before{content:"";position:absolute;left:0;top:calc(62*var(--u));bottom:0;width:calc(43*var(--u));border-left:1px solid #8c8c8c;border-top:1px solid #8c8c8c;border-top-left-radius:calc(30*var(--u));pointer-events:none}

  /* directory */
  .directory{margin-top:calc(12*var(--u));border-top:1px solid #9a9a9a;font-size:calc(16*var(--u))}
  .dir-home{margin:0;padding:calc(6*var(--u)) 0 calc(5*var(--u));font:700 calc(13*var(--u))/1.2 var(--sans)}
  .directory h2{margin:0;padding:calc(5*var(--u)) 0 calc(1*var(--u)) calc(2*var(--u));border-top:1px solid #9a9a9a;border-bottom:0;font:700 calc(13*var(--u))/1.15 var(--sans);letter-spacing:.01em;color:var(--ink)}
  .tri{position:absolute;left:calc(-15*var(--u));top:calc(7*var(--u));font-size:calc(10*var(--u));margin:0}
  .directory ul{padding:0 0 calc(8*var(--u)) calc(12*var(--u));margin:0}
  .directory li{padding:0;border-top:1px solid #b5b5b5}
  .directory li:first-child{border-top:0}
  .directory li a{display:block;line-height:calc(22.2*var(--u));font-size:calc(16*var(--u))}

  /* home */
  .layout.home{padding:calc(29*var(--u)) 0 0 calc(43*var(--u))}
  .coll-top{grid-template-columns:calc(675*var(--u)) calc(104*var(--u)) calc(514*var(--u));gap:0;align-items:start;margin:0;height:calc(105*var(--u))}
  .coll-h{font-size:calc(86*var(--u));line-height:.86;letter-spacing:-.018em;padding:0 0 calc(1*var(--u));border-bottom-width:calc(2*var(--u))}
  .kicker{margin:calc(9*var(--u)) 0 0;font-size:calc(15*var(--u));letter-spacing:.075em}
  .big-star{font-size:calc(92*var(--u));line-height:.8;justify-self:start;margin:0 0 0 calc(-2*var(--u));padding:0}
  .mast-art{grid-column:auto;width:calc(514*var(--u));height:calc(105*var(--u));aspect-ratio:auto}
  .coll-cols{grid-template-columns:calc(710*var(--u)) calc(398*var(--u));column-gap:calc(47*var(--u));margin-top:calc(30*var(--u))}
  .col-h{font-size:calc(20*var(--u));padding:calc(3*var(--u)) 0 calc(6*var(--u)) calc(9*var(--u));letter-spacing:.025em}
  .arrivals>:not(.col-h){margin-left:calc(15*var(--u))}
  .arrivals{padding-bottom:calc(25*var(--u));align-self:start}
  .strip{width:calc(692*var(--u));gap:calc(6*var(--u));margin-top:calc(12*var(--u));margin-left:calc(14*var(--u))!important}
  .intro{margin-top:calc(17*var(--u));font-size:calc(17.5*var(--u));line-height:calc(24*var(--u));max-width:calc(600*var(--u))}
  .filters{margin:calc(31*var(--u)) 0 0 calc(50*var(--u))!important;gap:calc(25*var(--u));max-width:none}
  .f-row{gap:calc(38*var(--u))}
  .f-num{font-size:calc(20*var(--u));width:auto}
  .filters select{flex:none;width:calc(387*var(--u));height:calc(40*var(--u));padding:0 calc(40*var(--u)) 0 calc(16*var(--u));font-size:calc(18*var(--u));background-position:right calc(10*var(--u)) center;background-size:calc(14*var(--u)) calc(9*var(--u))}
  .filter-out{font-size:calc(11*var(--u));min-height:0;margin-top:calc(-14*var(--u))!important}
  .filter-out:empty{display:none}
  .view-row{margin-top:calc(34*var(--u));font-size:calc(18*var(--u))}
  .arrow{margin-left:calc(15*var(--u))}

  .rail{gap:calc(28*var(--u))}
  .card{padding-bottom:0}
  .card .col-h{font-size:calc(20*var(--u));padding:calc(3*var(--u)) 0 calc(6*var(--u)) calc(9*var(--u));letter-spacing:.025em}
  .card-body p{padding-right:calc(30*var(--u))}
  .card-body{grid-template-columns:calc(132*var(--u)) calc(228*var(--u));gap:calc(22*var(--u));padding:calc(12*var(--u)) 0 0 calc(11*var(--u));font-size:calc(14.6*var(--u));line-height:calc(21.5*var(--u))}
  .thumb{height:calc(98*var(--u));aspect-ratio:auto}
  .play{width:calc(21*var(--u));height:calc(21*var(--u));font-size:calc(10*var(--u));right:calc(2*var(--u));bottom:calc(12*var(--u));margin:0}
  .go-row{margin-top:calc(4*var(--u));padding-left:calc(103*var(--u));text-align:left;font-size:calc(15*var(--u))}
  .go{font-size:inherit}

  /* sub pages */
  .layout.sub{padding:calc(29*var(--u)) calc(30*var(--u)) calc(30*var(--u)) calc(43*var(--u))}

  /* footer bar */
  .footer{grid-template-columns:minmax(0,1fr) calc(195*var(--u));gap:0;padding:0;margin:calc(40*var(--u)) calc(6*var(--u)) calc(16*var(--u)) 0;height:calc(100*var(--u));font-size:calc(12*var(--u));letter-spacing:.08em}
  .foot-rows{grid-template-rows:1fr 1fr;gap:0}
  .foot-row{flex-wrap:nowrap;justify-content:space-between;padding:0 calc(36*var(--u));border-bottom:2px solid #3a3a3a;gap:0}
  .foot-row.lower{border-bottom:0;padding:0 calc(52*var(--u)) 0 calc(175*var(--u))}
  .foot-row .search{gap:calc(42*var(--u))}
  .search.dark label{font-size:calc(12*var(--u))}
  .search.dark input{width:calc(184*var(--u));height:calc(31*var(--u));font-size:calc(12*var(--u))}
  .search.dark button{font-size:calc(13*var(--u));margin-left:calc(-22*var(--u))}
  .foot-link{font-size:calc(12*var(--u))}
  .pipe{font-size:calc(14*var(--u))}
  .status{border:0;border-left:2px solid #333;min-height:0;padding:calc(6*var(--u)) calc(44*var(--u)) 0 calc(14*var(--u));font-size:calc(12.5*var(--u));line-height:calc(17.5*var(--u));display:flex;align-items:center;outline-offset:-4px}
  .status::after{right:calc(4*var(--u));top:calc(6*var(--u));bottom:calc(6*var(--u));width:calc(30*var(--u))}
}

/* radio + visitor counter strip (under the footer) */
.foot-strip{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 18px;padding:8px var(--gut-r) calc(12px + env(safe-area-inset-bottom,0px)) var(--gut-l);font:600 10px var(--sans);color:var(--char);letter-spacing:.06em}
.foot-strip .radio{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.radio-label{font-weight:500}
.foot-strip .radio-btn{background:#3a3a3a;color:#fff;border:1px solid #111;width:30px;height:22px;padding:0;font-size:10px;border-radius:0}
.foot-strip .radio-btn:hover{background:#111}
.radio-now{color:var(--link)}
.counters{margin:0;color:var(--char)}
.counters .sep{color:var(--rule)}
@media (max-width:720px){ .foot-strip .radio-btn{width:40px;height:34px;font-size:10px} .foot-strip{font-size:10px} }
@media (min-width:1061px){
  .footer{margin-bottom:0}
  .foot-strip{padding:calc(8*var(--u)) calc(6*var(--u)) calc(14*var(--u)) 0;font-size:calc(10*var(--u))}
  .foot-strip .radio-btn{width:calc(28*var(--u));height:calc(20*var(--u));font-size:calc(10*var(--u))}
}
.foot-strip{align-items:center}
.foot-strip .radio-now{color:var(--link);font-size:inherit}
.foot-strip .counters{font:inherit;color:inherit}
.foot-strip .radio,.foot-strip .radio-label{font-weight:inherit}
.strip-left{display:grid;gap:8px;align-content:start}
.rdo-tv{margin:0;border:2px solid #333;background:#111;color:#ddd;padding:4px}
.rdo-tv figcaption{font:500 10px var(--mono);letter-spacing:.08em;padding:0 2px 4px}
.tv-box{width:200px;height:200px;background:#000}
.tv-box iframe{display:block;width:200px;height:200px;border:0}
@media (max-width:720px){ .rdo-tv{width:100%} .tv-box,.tv-box iframe{width:100%} }

/* ---------- RDO Radio :: simple line under the search bar ---------- */

.right-col{display:grid;gap:22px;align-content:start;min-width:0}
@media (max-width:720px){
}
@media (min-width:1061px){
  .coll-cols{grid-template-columns:calc(710*var(--u)) calc(537*var(--u))}
  .right-col{gap:calc(30*var(--u))}
  .right-col .rail{width:calc(398*var(--u))}
}
@media (max-width:1060px){
  .right-col{display:contents}
}

/* collapsible directory group (Categories) */
.dir-fold>summary{list-style:none;cursor:pointer}
.dir-fold>summary::-webkit-details-marker{display:none}
.dir-fold>summary h2{pointer-events:none}
.dir-fold>summary:hover h2{color:var(--link)}
.dir-fold .tri{display:inline-block;transition:transform .15s}
.dir-fold[open] .tri{transform:rotate(90deg)}
.fold-count{font-weight:400;color:var(--char-2)}

/* RDO_Chat shared room */
.rdo-chat-line{margin:0 0 6px;overflow-wrap:anywhere}
.rdo-chat-line b{color:var(--link)}
.rdo-chat-line.mine b{color:var(--link)}
.rdo-online-star{color:var(--ink);font-size:1.1em;line-height:1}
.rdo-chat-time{font:10px var(--mono);color:var(--char-2);white-space:nowrap}
.rdo-chat-note{color:var(--char-2);margin:0 0 6px}
.rdo-chat-form button:disabled{opacity:.5;cursor:wait}

/* ---------- top-bar apps (RDO_Chat, RDO_Bot, RDO_Radio, RDO_TV) ---------- */
.nav-apps{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.nav-app{background:transparent;color:#fff;border:1px solid #9a9a9a;border-radius:0;padding:4px 8px;font:600 10px/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;cursor:pointer}
.nav-app:hover{background:#fff;color:#111;border-color:#fff}
.nav-app:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* small app windows, styled like RDO_message.txt */
.rdo-window{position:fixed;z-index:46;background:var(--white);color:var(--ink);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);font-size:12px}
.rdo-window[hidden]{display:none}
.rdo-window-note{margin:0;padding:6px 10px;font:10px var(--mono);color:var(--char-2);letter-spacing:.04em}
.rdo-tv-window{top:118px;right:max(16px,env(safe-area-inset-right,0px));width:min(480px,calc(100vw - 32px))}
.rdo-tv-window .tv-box{width:100%;height:auto;aspect-ratio:16/9;background:#000}
.rdo-tv-window .tv-box iframe{display:block;width:100%;height:100%;border:0}
.rdo-radio-window{top:118px;left:max(16px,env(safe-area-inset-left,0px));width:min(520px,calc(100vw - 32px))}
.rdo-radio-panel{padding:10px 10px 4px}
.rdo-tidal-embed{display:block;width:100%;height:600px;border:0;background:#111}
.rdo-radio-panel .radio-now{margin:0 0 8px;font:600 11px var(--sans);letter-spacing:.06em;color:var(--link)}
.radio-controls{display:flex;gap:6px}
.rdo-radio-panel .radio-btn{background:#3a3a3a;color:#fff;border:1px solid #111;width:40px;height:28px;padding:0;font-size:11px;border-radius:0}
.rdo-radio-panel .radio-btn:hover{background:#111}
.rdo-radio-panel .rdo-window-note{padding:8px 0 4px}

@media (max-width:720px){
  .nav-apps{width:100%;gap:6px}
  .nav-app{flex:1 1 calc(50% - 6px);padding:9px 6px;font-size:11px}
  .rdo-tv-window,.rdo-radio-window{top:auto;left:12px;right:12px;width:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
}
@media (min-width:1061px){
  .nav-apps{gap:calc(8*var(--u));margin-left:auto;margin-right:calc(18*var(--u))}
  .nav-app{padding:calc(5*var(--u)) calc(9*var(--u));font-size:calc(11.5*var(--u))}
}

/* window buttons (− minimize, × close) and the taskbar of minimized windows */
.win-btns{display:flex;gap:4px;align-items:center}
.win-min{background:#fff;color:#000;border:0;width:28px;height:28px;line-height:1;font-weight:700;font-size:18px;padding:0}
.win-min:hover,.egg-x:hover{background:#ddd}
.rdo-taskbar{position:fixed;left:max(12px,env(safe-area-inset-left,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:48;display:flex;flex-wrap:wrap;gap:6px;max-width:calc(100vw - 24px)}
.rdo-taskbar:empty{display:none}
.rdo-tab{border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);background:#0b0b0b;color:#fff;padding:7px 12px;font:600 11px var(--sans);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.rdo-tab:hover{background:#333}

/* RDO_Bot messenger inside RDO_message.txt */
.egg.bot-open{display:flex}
.bot-log{max-height:min(46vh,380px);overflow:auto;display:grid;gap:8px;align-content:start}
.bot-msg{max-width:92%}
.bot-msg.from-you{justify-self:end;text-align:right}
.bot-who{margin:0 0 2px;font:600 10px var(--mono);letter-spacing:.06em;color:var(--link)}
.bot-msg.from-you .bot-who{color:var(--char-2)}
.bot-text{background:var(--paper);border:1px solid var(--rule);padding:6px 8px}
.bot-msg.from-you .bot-text{background:#eef0ff;border-color:#c8ccf5}
.bot-text p{margin:0 0 4px}
.bot-text p:last-child{margin-bottom:0}
.bot-typing{font:11px var(--mono);color:var(--char-2)}
.bot-form{display:flex;gap:6px;padding:8px 12px;border-top:1px solid var(--rule)}
.bot-form input{flex:1;min-width:0;border:1px solid #888;border-radius:0;padding:6px 8px;font:13px var(--sans);background:var(--white);color:var(--ink)}
.bot-form button{background:var(--ink);color:var(--paper);border:0;padding:6px 10px;font:700 11px var(--sans);letter-spacing:.05em}
.bot-form button:disabled{opacity:.5}
@media (max-width:720px){ .bot-form input{font-size:16px} }

.rdo-tv-window .tv-box > div,.rdo-tv-window .tv-box > iframe{display:block;width:100%;height:100%;border:0}

/* ---------- phones: whole desktop page shrunk to fit (see the <head> script) ----------
   The page itself stays the 1200px desktop layout. Pop-up windows are zoomed back up so they are
   phone-sized and usable; inside them 1px = one phone pixel, sized with --phone-w / --phone-h. */
html.fit-phone body,html.fit-phone .page{min-height:0}
html.fit-phone .egg,html.fit-phone .rdo-window,html.fit-phone .rdo-entry,html.fit-phone .rdo-taskbar{zoom:var(--fitz)}
html.fit-phone .egg:not(.rdo-entry){left:8px;right:auto;bottom:8px;width:calc(var(--phone-w) - 16px);max-height:calc(var(--phone-h) * .62)}
html.fit-phone .bot-log{max-height:calc(var(--phone-h) * .34)}
html.fit-phone .rdo-window{left:8px;right:auto;top:8px;bottom:auto;width:calc(var(--phone-w) - 16px)}
html.fit-phone .rdo-taskbar{left:8px;bottom:8px;max-width:calc(var(--phone-w) - 16px)}
html.fit-phone .rdo-entry-backdrop:not(.is-room){padding:0}
html.fit-phone .rdo-entry-backdrop:not(.is-room) .rdo-entry.egg{width:calc(var(--phone-w) - 24px);max-height:calc(var(--phone-h) * .8)}
html.fit-phone .rdo-entry-backdrop.is-room .rdo-entry.egg{left:8px;bottom:8px;width:calc(var(--phone-w) - 16px);max-height:calc(var(--phone-h) * .7)}
html.fit-phone .rdo-chat-room-layout{grid-template-columns:1fr;gap:8px}
html.fit-phone .rdo-chat-buddy-pane{border-right:0;border-bottom:1px solid var(--rule);padding:0 0 6px}
html.fit-phone .rdo-entry input,html.fit-phone .bot-form input,html.fit-phone .rdo-chat-form input{font-size:16px}

/* ---------- phones held vertically: stretch the desktop layout to fill the tall screen ----------
   Same arrangement as desktop, but everything 1.6x bigger, the art full width, photos in two rows,
   side cards under New Arrivals, and the bars wrap. Phones held sideways keep the normal desktop view. */
@media (orientation: portrait){
  html.fit-phone .page *{--u:calc(100cqw / 1586 * 1.6)}
  html.fit-phone .masthead{height:auto;padding-top:calc(12*var(--u));padding-bottom:calc(12*var(--u))}
  html.fit-phone .mast-row{flex-wrap:wrap;row-gap:calc(6*var(--u))}
  html.fit-phone .mast-row .dateline{width:100%;margin-left:0;text-align:right}
  html.fit-phone .topnav{height:auto;flex-wrap:wrap;row-gap:calc(12*var(--u));padding-top:calc(12*var(--u));padding-bottom:calc(12*var(--u))}
  html.fit-phone .nav-apps{margin-left:0;margin-right:0}
  html.fit-phone .topnav .search{border-left:0;padding-left:0;margin-left:auto}
  html.fit-phone .coll-top{grid-template-columns:minmax(0,1fr) auto;height:auto;row-gap:calc(28*var(--u))}
  html.fit-phone .mast-art{grid-column:1/-1;width:100%;height:auto;aspect-ratio:512/103}
  html.fit-phone .coll-cols{grid-template-columns:minmax(0,1fr);row-gap:calc(40*var(--u))}
  html.fit-phone .right-col{display:block}
  html.fit-phone .right-col .rail,html.fit-phone .rail{width:auto;grid-template-columns:1fr 1fr;column-gap:calc(28*var(--u))}
  html.fit-phone .arrivals{align-self:stretch}
  html.fit-phone .strip{width:auto;margin-right:calc(14*var(--u));grid-template-columns:repeat(3,1fr);gap:calc(12*var(--u))}
  html.fit-phone .intro{max-width:none}
  html.fit-phone .footer{height:auto;grid-template-columns:1fr;margin-right:calc(12*var(--u))}
  html.fit-phone .foot-row,html.fit-phone .foot-row.lower{flex-wrap:wrap;justify-content:flex-start;gap:calc(12*var(--u)) calc(26*var(--u));padding:calc(14*var(--u)) calc(22*var(--u))}
  html.fit-phone .status{border-left:0;border-top:2px solid #333;padding:calc(12*var(--u)) calc(48*var(--u)) calc(12*var(--u)) calc(16*var(--u))}
  html.fit-phone .foot-strip{flex-wrap:wrap;row-gap:calc(10*var(--u))}
  html.fit-phone .layout.sub{padding-right:calc(20*var(--u))}
  html.fit-phone .layout.home{padding-right:calc(20*var(--u))}
  html.fit-phone .right-col .rail > *,html.fit-phone .rail > *{min-width:0}
  html.fit-phone .card-body{grid-template-columns:calc(132*var(--u)) minmax(0,1fr)}
  html.fit-phone .card-body p{padding-right:calc(30*var(--u))}
  html.fit-phone .go-row{padding-left:calc(20*var(--u))}
}