/* ============================================================
   Project Atmosfarm — shared HUB shell + tabbed sub-navigation
   Used by the consolidated hub pages (journey/dome/channel/studio/plan).
   Matches the existing dark cinematic theme (vars mirror the pages).
   ============================================================ */
:root{
  --bg:#0c0f12; --bg2:#12171c; --panel:#161c22; --panel2:#1b232b;
  --line:#26313b; --line2:#33414e;
  --txt:#e7eef3; --muted:#9fb0bd; --dim:#6f8190;
  --accent:#3fd0c9; --accent2:#7bd389; --warn:#f0a04b; --bad:#e2615f; --blue:#4ea3e0; --purple:#c98be0;
  --rad:12px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--txt);line-height:1.6;font-size:16px}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0 0 .4em;line-height:1.18;font-weight:680}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}

/* top bar (nav.js injects the menu here) */
header{position:sticky;top:0;z-index:50;background:rgba(10,13,16,.93);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:14px;padding:10px 22px;max-width:1180px;margin:0 auto;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.5px;font-size:18px;color:var(--txt)}
.brand img{height:34px;width:34px;object-fit:contain;border-radius:7px;background:#fff}
.brand small{display:block;font-size:11px;letter-spacing:2px;color:var(--dim);font-weight:600}

/* hero */
.hero{padding:42px 0 22px;border-bottom:1px solid var(--line);background:
  radial-gradient(900px 360px at 80% -30%,rgba(63,208,201,.12),transparent),
  radial-gradient(760px 340px at 8% -25%,rgba(123,211,137,.09),transparent)}
.hero .kicker{letter-spacing:3px;font-size:12px;color:var(--accent);text-transform:uppercase;font-weight:700}
.hero h1{font-size:38px;margin:8px 0 6px}
@media(max-width:720px){.hero h1{font-size:27px}}
.hero .standfirst{color:var(--muted);max-width:860px;margin-top:12px;font-size:16.5px}

/* ---- tabbed sub-navigation ---- */
.tabsbar{position:sticky;top:55px;z-index:40;background:rgba(12,15,18,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.tablist{display:flex;gap:4px;flex-wrap:wrap;max-width:1180px;margin:0 auto;padding:8px 22px}
.tab{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:14px;font-weight:600;
  padding:8px 14px;border-radius:8px 8px 0 0;border:1px solid transparent;border-bottom:none;white-space:nowrap;
  cursor:pointer;background:transparent}
.tab:hover{background:var(--panel);color:var(--txt);text-decoration:none}
.tab[aria-selected="true"],.tab.is-active{color:var(--accent);background:var(--panel);
  border-color:var(--line2);border-bottom:2px solid var(--accent)}
.tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tab .ti{font-size:15px}

/* ---- tab panels (iframe hosts) ---- */
.panels{max-width:1180px;margin:0 auto;padding:0 0 60px}
.tabpanel{display:none}
.tabpanel.is-active{display:block}
.tabpanel iframe{width:100%;border:0;display:block;min-height:78vh;background:var(--bg)}
.panel-note{color:var(--dim);font-size:13px;padding:10px 22px 0}
.panel-note a{font-weight:600}

/* no-JS progressive fallback: CSS :target tabs */
.no-js .tab[aria-selected="true"]{background:transparent;border-color:transparent;border-bottom:2px solid transparent;color:var(--muted)}
.no-js .tabpanel:target{display:block}
.no-js:has(.tabpanel:target) .tabpanel:first-of-type{display:none}
.no-js:not(:has(.tabpanel:target)) .tabpanel:first-of-type{display:block}
.no-js:has(#__p0:target) [data-tab="__p0"],
.no-js:has(#__p1:target) [data-tab="__p1"]{} /* placeholder to keep parser calm */

footer{border-top:1px solid var(--line);color:var(--dim);font-size:13px;padding:24px 22px 50px;max-width:1180px;margin:0 auto}
footer a{color:var(--accent)}