/* y2kmallrat design system. ONE look for every page of every static site (hub + io.): the dead mall after the Y2K crash.
   Colour comes from the theme kit tokens (themes/themes.css: --bg --card --line --text --muted --accent --link --on-accent ...).
   skin.css re-lights the same parts for each of the six themes. Twilight ("Mall After Dark") is the default and is defined here.
   Signature parts: the storefront AWNING on every panel, the sign-painter lettering, the lit-sign tabs in the header. */
html:not([data-theme]){--bg:#070818;--panel:#12143a;--text:#eef0ff;--muted:#a9b0d8;--cyan:#6ee7ff;--pink:#ff7ac6;--lilac:#b79cff;--mint:#7dffb8;--ink:#08091f;--line:#a0b4ff38;--card:#12143a;--accent:#ff7ac6;--link:#6ee7ff;--on-accent:#08091f;}

@font-face { font-family:'Barlow Condensed'; font-weight:500; font-display:swap; src:url('/brand/fonts/barlow-condensed-500.woff2') format('woff2'); }
@font-face { font-family:'Barlow Condensed'; font-weight:700; font-display:swap; src:url('/brand/fonts/barlow-condensed-700.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-weight:400; font-display:swap; src:url('/brand/fonts/barlow-400.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-weight:600; font-display:swap; src:url('/brand/fonts/barlow-600.woff2') format('woff2'); }

:root {
  /* names older pages still use, now following the active theme */
  --cyan:var(--link); --pink:var(--accent); --lilac:#b79cff; --mint:#7dffb8; --ink:var(--on-accent); --panel:var(--card);
  --r:3px; --awn-a:var(--accent); --awn-b:var(--link); --glow:var(--accent);
}
/* Mall After Dark (the default theme, no data-theme). Every other theme sets these same names in themes/themes.css + skin.css. */
html:not([data-theme]) {
  --bg:#0a0920; --card:#15133a; --line:#3b3b7a; --text:#eef0ff; --muted:#aeb4dc; --accent:#ff7ac6; --link:#7ee9ff; --on-accent:#13062c;
  --ok:#7dffb8; --bad:#ff8aa0; --card-border:1px solid var(--line); --shadow:0 22px 34px -22px #000;
  --font:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif; --font-head:'Barlow Condensed','Arial Narrow',sans-serif;
  --awn-a:#ff7ac6; --awn-b:#b79cff; --glow:#ff7ac6;
}
* { box-sizing:border-box; }
html { color-scheme:dark; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
html[data-theme] { color-scheme:dark; }
body { margin:0; min-height:100vh; color:var(--text); font:400 1.0625rem/1.55 var(--font); background:var(--body-bg,var(--bg)); background-attachment:fixed; }
::selection { background:var(--accent); color:var(--on-accent); }
a { color:var(--link); text-underline-offset:.2em; }
a:focus-visible, .btn:focus-visible, summary:focus-visible, button:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.skip { position:absolute; left:-999px; } .skip:focus { left:12px; top:12px; z-index:50; background:var(--bg); padding:8px 12px; }
* { scrollbar-color:var(--line) var(--bg); }

.wrap { position:relative; z-index:1; width:min(1080px,100% - 32px); margin-inline:auto; }

/* ---- header: the concourse sign. Tabs are lit signs; the current one is switched on. ---- */
header.top { position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--bg) 92%,transparent); border-bottom:1px solid var(--line); box-shadow:0 1px 0 color-mix(in srgb,var(--glow) 30%,transparent); }
header.top .wrap { display:flex; align-items:center; gap:18px; padding:8px 0; flex-wrap:wrap; }
.logo { font:700 1.5rem/1 var(--font-head); letter-spacing:.005em; text-decoration:none; color:var(--text); display:flex; align-items:center; gap:10px; }
.logo i { width:30px; height:30px; display:block; background:url(/brand/mascot-128.png) center/contain no-repeat; filter:drop-shadow(0 0 6px color-mix(in srgb,var(--glow) 60%,transparent)); }
nav.main { margin-left:auto; display:flex; gap:2px; flex-wrap:wrap; }
nav.main a { position:relative; text-decoration:none; color:var(--muted); padding:10px 14px; font:500 1.15rem/1 var(--font-head); letter-spacing:.02em; }
nav.main a::after { content:''; position:absolute; left:14px; right:14px; bottom:2px; height:3px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .25s cubic-bezier(.2,.8,.2,1); }
nav.main a:hover { color:var(--text); }
nav.main a:hover::after, nav.main a[aria-current="page"]::after { transform:scaleX(1); }
nav.main a[aria-current="page"] { color:var(--text); text-shadow:0 0 12px color-mix(in srgb,var(--glow) 70%,transparent); }
nav.main a[aria-current="page"]::after { box-shadow:0 0 10px var(--accent); }

/* ---- page banner: every page opens in its own stretch of corridor ---- */
.hero { display:grid; grid-template-columns:1fr auto; align-items:center; gap:24px; padding:56px 0 28px; }
.hero.small, .banner { position:relative; padding:44px 0 22px; grid-template-columns:1fr; }
.banner::before, .hero.small::before { content:''; position:absolute; z-index:-1; left:50%; width:100vw; transform:translateX(-50%); top:0; height:150px; pointer-events:none;
  background:var(--banner-img,none) left top/auto 130px repeat-x; opacity:.28; filter:var(--scene-filter,none); -webkit-mask:linear-gradient(#000 25%,transparent 95%); mask:linear-gradient(#000 25%,transparent 95%); }
.eyebrow { display:none; }
.wordmark, h1.page { margin:0; font:700 clamp(2.6rem,10vw,5.6rem)/.92 var(--font-head); letter-spacing:-.005em; color:var(--text); text-shadow:0 0 28px color-mix(in srgb,var(--glow) 40%,transparent); }
h1.page { font-size:clamp(2.2rem,7vw,3.6rem); }
.lede { max-width:52ch; color:var(--muted); font-size:1.15rem; margin:14px 0 0; }
.cta-row { display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }
.hours { display:none; }
.orb { display:none; }

/* ---- buttons: little shop signs ---- */
.btn { display:inline-flex; align-items:center; gap:8px; padding:11px 20px 12px; border-radius:var(--r); text-decoration:none; color:var(--text); cursor:pointer;
  font:700 1.2rem/1 var(--font-head); letter-spacing:.015em; border:2px solid color-mix(in srgb,var(--text) 55%,transparent); background:transparent; transition:background .15s,color .15s,box-shadow .2s,transform .15s; }
.btn:hover { background:var(--text); color:var(--bg); }
.btn:active { transform:translateY(1px); }
.btn-primary { color:var(--on-accent); background:var(--accent); border-color:var(--accent); box-shadow:0 8px 20px -8px var(--accent); }
.btn-primary:hover { background:color-mix(in srgb,var(--accent) 70%,var(--text)); border-color:transparent; color:var(--on-accent); box-shadow:0 10px 24px -8px var(--accent); }

/* ---- sections ---- */
section { padding:34px 0; }
h2.section-title { margin:0 0 6px; font:700 2rem/1.05 var(--font-head); }
.sub { margin:0 0 22px; color:var(--muted); max-width:60ch; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px; }

/* ---- the panel: a storefront. Its awning hangs from the top edge. ---- */
.card { position:relative; display:flex; flex-direction:column; gap:8px; padding:40px 20px 20px; border:var(--card-border); border-radius:0 0 var(--r) var(--r); background:var(--card); box-shadow:var(--shadow); }
.card::before { content:''; position:absolute; z-index:1; left:-1px; right:-1px; top:-1px; height:26px; pointer-events:none;
  background:
    radial-gradient(circle at 9px 0, var(--awn-a) 8.6px, transparent 9px) 0 100% / 36px 9px repeat-x,
    radial-gradient(circle at 27px 0, var(--awn-b) 8.6px, transparent 9px) 0 100% / 36px 9px repeat-x,
    linear-gradient(90deg, var(--awn-a) 50%, var(--awn-b) 50%) 0 0 / 36px calc(100% - 8px) repeat-x; }
.card::after { content:''; position:absolute; left:0; right:0; top:26px; height:14px; pointer-events:none; background:linear-gradient(color-mix(in srgb,#000 38%,transparent),transparent); } /* the shade under the awning */
.card-top { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.floor { color:var(--muted); font:500 1.05rem/1 var(--font-head); letter-spacing:.04em; }
.badge { font:700 .95rem/1 var(--font-head); letter-spacing:.03em; padding:5px 9px 6px; border-radius:2px; color:var(--on-accent); background:var(--accent); }
.icon { display:none; } .card h3 { margin:2px 0 0; font:700 1.7rem/1.05 var(--font-head); } .card p { margin:0; color:var(--muted); flex:1; max-width:60ch; } .card .btn { align-self:flex-start; margin-top:8px; }
.card-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; } .card-actions .btn { margin-top:0; }
.meta { font-size:.9rem; color:var(--link); }
.card .note { flex:none; margin:4px 0 0; padding:8px 12px; border:1px dashed var(--line); border-radius:var(--r); color:var(--text); font-size:.9rem; }
.ticker { display:none; }

/* ---- steps ---- */
ol.steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; counter-reset:s; }
ol.steps li { counter-increment:s; padding:16px 18px; border:1px solid var(--line); border-radius:var(--r); background:color-mix(in srgb,var(--text) 5%,var(--card)); }
ol.steps li::before { content:counter(s); display:inline-grid; place-items:center; width:28px; height:28px; margin-right:10px; border-radius:50%; font:700 1.1rem/1 var(--font-head); color:var(--on-accent); background:var(--accent); }
ol.steps b { display:inline; } ol.steps span { display:block; color:var(--muted); margin-top:4px; }

/* ---- footer ---- */
footer.bottom { position:relative; z-index:1; margin-top:36px; border-top:1px solid var(--line); background:color-mix(in srgb,var(--bg) 78%,#000); }
footer.bottom .wrap { padding:22px 0 34px; color:var(--muted); font-size:.92rem; display:grid; gap:8px; }
footer.bottom a { color:var(--text); }
.foot-more summary { cursor:pointer; width:max-content; max-width:100%; }
.foot-more[open] summary { margin-bottom:6px; }
.foot-more > div { margin-top:6px; }

/* ---- header drop-down menus ---- */
.dd { position:relative; display:flex; align-items:center; }
.dd > a { padding-right:6px; }
.dd-btn { font:inherit; color:var(--muted); background:none; border:1px solid transparent; border-radius:2px; padding:4px 8px; cursor:pointer; margin-left:-6px; }
.dd-btn:hover, .dd.open .dd-btn { color:var(--text); border-color:var(--line); }
.dd-menu { display:none; position:absolute; top:100%; left:0; z-index:40; min-width:250px; margin:6px 0 0; padding:8px; list-style:none; border:var(--card-border); border-radius:var(--r); background:var(--card); box-shadow:0 18px 40px #000a; }
.dd:hover .dd-menu, .dd:focus-within .dd-menu, .dd.open .dd-menu { display:block; }
.dd-menu a { display:block; padding:9px 12px; border-radius:2px; color:var(--text); text-decoration:none; font-size:1rem; white-space:nowrap; }
.dd-menu a:hover { background:color-mix(in srgb,var(--text) 12%,transparent); }
.dd-menu ul { list-style:none; margin:0 0 4px 14px; padding:0 0 0 8px; border-left:1px solid var(--line); }
.dd-menu ul a { font-size:.92rem; color:var(--muted); }
.dd-group > a { font-weight:600; }
.dd-menu::before { content:''; position:absolute; left:-6px; right:-6px; top:-14px; height:14px; } /* keeps the menu open while the pointer travels down to it */
.dd-soon > span { display:block; padding:8px 12px; color:var(--muted); font-size:.95rem; cursor:default; }
.dd-soon small { margin-left:6px; padding:1px 7px; border:1px dashed var(--line); border-radius:2px; font-size:.72rem; }
.dd-soon ul span { font-size:.88rem; }
.card-soon { opacity:.72; }
.btn-soon { opacity:.6; cursor:default; border-style:dashed; }
.sub-group { display:inline-flex; flex-wrap:wrap; align-items:center; gap:8px; margin-left:6px; padding-left:10px; border-left:2px solid var(--line); }
.sub-title { color:var(--muted); font-size:.85rem; }

/* ---- the donate sign and the account button ---- */
.bmc { position:fixed; left:14px; bottom:14px; z-index:7; display:inline-flex; align-items:center; gap:8px; padding:9px 16px 10px; border-radius:var(--r);
  background:var(--accent); color:var(--on-accent); font:700 1.1rem/1.1 var(--font-head); letter-spacing:.02em; text-decoration:none; box-shadow:0 10px 24px -8px #000; transition:transform .15s; }
.bmc:hover, .bmc:focus-visible { transform:translateY(-2px); }
html[data-theme] .bmc, html[data-theme] .bmc:hover, .bmc, .bmc:hover { color:var(--on-accent); } /* themes recolour every link; keep this readable on its sign */
.acct-link { display:inline-flex; align-items:center; gap:6px; flex:none; text-decoration:none; color:var(--text); padding:7px 12px 8px; border:2px solid var(--line); border-radius:var(--r); font:500 1.1rem/1 var(--font-head); }
.acct-link:hover, .acct-link[aria-current="page"] { border-color:var(--accent); }

/* ---- phones: one slim header line; tabs scroll sideways; menus open as a panel under the header ---- */
@media (max-width:760px) {
  header.top .wrap { flex-wrap:nowrap; gap:4px; padding:4px 0; }
  .logo { display:none; }
  .acct-link { padding:6px 9px; }
  .acct-link-text { display:none; }
  nav.main { flex:1 1 auto; min-width:0; margin-left:0; flex-wrap:nowrap; gap:0; overflow-x:auto; scrollbar-width:none; }
  nav.main::-webkit-scrollbar { display:none; }
  nav.main a { padding:11px 8px; font-size:1.05rem; white-space:nowrap; }
  nav.main a::after { left:8px; right:8px; }
  .dd { flex:none; flex-wrap:nowrap; }
  .dd > a { padding-right:2px; }
  .dd-btn { padding:3px 3px; margin-left:0; font-size:.7rem; }
  .dd-menu { position:fixed; top:48px; left:8px; right:8px; width:auto; min-width:0; max-height:70vh; overflow:auto; margin:0; }
  .dd-menu a { white-space:normal; }
  #theme-slot { flex:none; }
  footer.bottom { margin-top:20px; }
  .bmc { position:static; display:flex; width:max-content; margin:28px auto 8px; }
  .hero { grid-template-columns:1fr; }
}
@media (max-width:380px) { nav.main a { font-size:.98rem; padding:11px 6px; } footer.bottom .wrap { padding:12px 0 18px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } nav.main a::after, .btn { transition:none; } }