/* Vulnary masthead + footer on CONTENT/ROOM pages. Self-contained (own tokens)
   so the chrome renders like the home (which vulnary.css styles) even though
   room pages load output.css, not vulnary.css. Scroll-morph .solid is toggled
   by vulnary-page.js (loaded via VulnaryColophon). */
.top, footer {
  --ice:#67d3e8; --baby:#a9cbff; --baby-dim:#7d9bdb; --fg:#eaf0fb; --fg-dim:#aebdd9; --fg-faint:#6f80a3;
  --line:rgba(140,165,215,.14); --line-2:rgba(140,165,215,.28); --maxw:1280px;
  --disp:'Fraunces',Georgia,serif; --mono:'Geist Mono',ui-monospace,monospace; --body:'Source Serif 4',Georgia,serif;
}
.top{position:sticky; top:0; z-index:50; backdrop-filter:blur(8px); background:rgba(4,7,15,.92); border-bottom:1px solid var(--line)}
.top .wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,72px)}
.top .bar{display:flex; align-items:center; justify-content:space-between; gap:28px; height:74px; max-width:min(1560px,96vw)}
.top .brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.top .brand svg{width:26px; height:26px; overflow:visible}
.top .brand .wm{font-family:var(--disp); font-weight:500; font-size:1.42rem; letter-spacing:.12em; color:var(--fg)}
.top .brand .wm b{color:var(--ice); font-weight:500}
.top .nav{display:flex; gap:clamp(14px,1.4vw,26px); align-items:center; white-space:nowrap; flex-wrap:nowrap}
.top .nav a{font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-faint); position:relative; padding:6px 0; transition:color .3s; text-decoration:none; white-space:nowrap}
.top .nav a::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--ice); transition:width .35s cubic-bezier(.16,1,.3,1)}
.top .nav a:hover{color:var(--fg)} .top .nav a:hover::after{width:100%}
.top .nav .eng{color:var(--baby); border:1px solid var(--line-2); padding:9px 16px; border-radius:2px}
.top .nav .eng:hover{border-color:var(--ice); background:rgba(103,211,232,.06)}
.top .nav .eng::after{display:none}
.top .nav .res{position:relative}
.top .nav .res summary{list-style:none;cursor:pointer;font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);transition:color .3s}
.top .nav .res summary::-webkit-details-marker{display:none}
.top .nav .res summary::after{content:" \25BE"}
.top .nav .res[open] summary,.top .nav .res summary:hover{color:var(--fg)}
.top .nav .res-menu{position:absolute;right:0;top:160%;min-width:16rem;background:rgba(7,11,22,.97);border:1px solid var(--line-2);border-radius:6px;padding:8px;display:flex;flex-direction:column;backdrop-filter:blur(8px);box-shadow:0 30px 60px -30px rgba(0,0,0,.9);z-index:60}
.top .nav .res-menu a{font-family:var(--body);font-size:.95rem;letter-spacing:0;text-transform:none;color:var(--fg-dim);padding:9px 12px;border-radius:4px;transition:.2s;text-decoration:none}
.top .nav .res-menu a:hover{background:rgba(103,211,232,.08);color:var(--fg)}
.top .nav .platforms .res-menu{min-width:19rem}
.top .nav .platforms .res-menu a{display:flex;flex-direction:column;gap:2px;font-weight:600}
.top .nav .platforms .res-menu a .rm-sub{font-family:var(--mono);font-size:.66rem;font-weight:400;letter-spacing:.04em;color:var(--fg-faint);text-transform:none}
.top .nav .platforms .res-menu a:hover .rm-sub{color:var(--ice)}
/* scroll-morph (≥881px): bar lifts into a floating, blurred pill on scroll */
@media(min-width:881px){
  .top{transition:padding .5s cubic-bezier(.4,0,.2,1), background .4s}
  .top .bar{transition:height .5s cubic-bezier(.4,0,.2,1), padding .5s, background .45s, border-color .45s, box-shadow .45s, border-radius .45s; border:1px solid transparent; border-radius:0}
  .top.solid{background:transparent; border-bottom:none; backdrop-filter:none; padding-top:14px}
  .top.solid .bar{height:58px; padding-left:26px; padding-right:16px; background:rgba(8,12,22,.74); border-color:var(--line-2); border-radius:16px; box-shadow:0 28px 64px -30px rgba(0,0,0,.92); backdrop-filter:blur(16px) saturate(1.3)}
  .top.solid .brand .wm{font-size:1.3rem; transition:font-size .5s}
}
/* mobile hamburger — desktop hides the button; ≤880px collapses the nav into a drawer */
.top .nav-toggle{display:none}
@media(max-width:880px){
  .top .bar{position:relative}
  .top .nav-toggle{display:inline-flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:46px; height:40px; background:transparent; border:1px solid var(--line-2); border-radius:9px; cursor:pointer; -webkit-tap-highlight-color:transparent; padding:0}
  .top .nav-toggle span{display:block; width:22px; height:2px; background:var(--fg-dim); border-radius:2px; transition:transform .2s ease, opacity .2s ease}
  .top .nav-toggle[aria-expanded="true"]{border-color:var(--ice)}
  .top .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .top .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .top .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .top .nav{display:none}
  .top .nav.open{display:flex; position:absolute; top:calc(100% + 10px); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:2px; white-space:normal;
    background:rgba(7,11,22,.98); border:1px solid var(--line-2); border-radius:14px;
    padding:10px; box-shadow:0 30px 70px -24px rgba(0,0,0,.92); backdrop-filter:blur(14px); z-index:70}
  .top .nav.open a{display:block; padding:13px 14px; border-radius:8px}
  .top .nav.open a::after{display:none}
  .top .nav.open a:hover,.top .nav.open a:focus-visible{background:rgba(103,211,232,.08); color:var(--fg)}
  .top .nav.open .eng{margin-top:6px; text-align:center; border-radius:8px; padding:13px 14px}
  .top .nav.open .res{display:block; position:static}
  .top .nav.open .res summary{padding:13px 14px}
  .top .nav.open .res-menu{position:static; min-width:0; margin:2px 0 8px; background:rgba(4,7,15,.45);
    box-shadow:none; border:none; border-left:1px solid var(--line-2); border-radius:0; padding:2px 0 2px 10px; backdrop-filter:none}
  .top .nav.open .platforms .res-menu{min-width:0}
}
/* footer (VulnaryColophon) — matches the home footer */
footer{margin-top:clamp(56px,12vh,128px); border-top:1px solid var(--line)}
footer .row{max-width:var(--maxw); margin:0 auto; padding:clamp(26px,4vw,40px) clamp(20px,5vw,72px); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px}
footer .brand{display:flex; align-items:center; gap:11px; text-decoration:none}
footer .brand svg{width:22px; height:22px; overflow:visible}
footer .brand .wm{font-family:var(--disp); font-weight:500; font-size:1.2rem; letter-spacing:.12em; color:var(--fg)}
footer .brand .wm b{color:var(--ice); font-weight:500}
footer .tag{font-family:var(--body); font-style:italic; font-size:.95rem; color:var(--fg-dim)}
footer .meta{font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-faint)}

/* floating "Let's talk" FAB — mirrored from vulnary.css so it is styled on the
   Vulnary CONTENT pages (/c/*, category, etc.) which load vulnary-nav.css instead
   of the full vulnary.css. vulnary-nav.css is gated to SITE=vulnary in layout.templ,
   so this never reaches the Resident site — the fab is Vulnary-only, as intended.
   Without these rules the fab-stage (robot + placard) renders at full size because
   its default opacity:0 is missing; the morph is driven by lets-talk-fab.js. */
#vly-fab { position: fixed; right: 22px; bottom: 22px; z-index: 60; text-decoration: none; display: inline-flex; }
.fab-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: #67d3e8; color: #04070f; font-weight: 700; font-size: .9rem;
  padding: .72rem 1.35rem; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 8px 26px -6px rgba(0, 0, 0, .55), 0 0 0 1px rgba(103, 211, 232, .35);
}
.fab-dot { width: 8px; height: 8px; border-radius: 50%; background: #04070f; opacity: .5; animation: fabDot 1.8s ease-in-out infinite; }
@keyframes fabDot { 50% { opacity: .12; transform: scale(.65); } }
.fab-stage { position: absolute; right: 0; bottom: 0; width: 230px; height: 300px; opacity: 0; pointer-events: none; }
#vly-fab.fab-open .fab-stage { pointer-events: auto; }
.fab-glow { position: absolute; right: 8px; bottom: 6px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(103, 211, 232, .38), transparent 68%); opacity: 0; transform: scale(.25); }
.fab-botwrap { position: absolute; right: 6px; bottom: 2px; width: 104px; height: 186px; transform-origin: 70% 100%; opacity: 0; }
.fab-botwrap svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .55)); }
.fab-sign {
  position: absolute; right: 10px; top: 4px; z-index: 2;
  background: #eaf0fb; color: #04121a; font-family: var(--body); font-weight: 700; font-size: .86rem;
  padding: .52rem .9rem; border-radius: 11px; white-space: nowrap;
  box-shadow: 0 10px 22px -6px rgba(0, 0, 0, .5); transform-origin: 30% 120%; opacity: 0;
}
.fab-sign b { color: #1466ff; }
.fab-sign::after { content: ''; position: absolute; left: 22px; bottom: -5px; width: 12px; height: 12px; background: #eaf0fb; transform: rotate(45deg); border-radius: 2px; }
#vly-fab.fab-open .fab-botwrap svg { animation: fabBob 2.8s ease-in-out infinite; }
@keyframes fabBob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(1deg); } }
@media (max-width: 560px) {
  #vly-fab { right: 14px; bottom: 14px; }
  .fab-pill { font-size: .84rem; padding: .62rem 1.1rem; }
  .fab-stage { display: none; }
}

/* footer columns (VulnaryColophon → vulnaryFooterCols) — mirrored from vulnary.css.
   vulnary-nav.css only had the OLD single-row footer; the current colophon uses the
   .fcols grid + .foot-bottom bar, so on content pages those rendered unstyled. */
footer .fcols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 30px; max-width: 1100px; margin: 0 auto; padding: 18px 22px 26px; }
footer .fcol h4 { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: #7f90a8; margin: 0 0 12px; font-weight: 600; }
footer .fcol a { display: block; color: #a9bad4; text-decoration: none; font-size: .88rem; margin-bottom: 8px; }
footer .fcol a.brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; }
footer .fcol a:hover { color: #eaf2ff; }
footer .fcol .blurb { color: #8496af; font-size: .84rem; line-height: 1.55; max-width: 260px; }
@media (max-width: 720px) { footer .fcols { grid-template-columns: 1fr 1fr; gap: 22px; } }
footer .foot-bottom {
  max-width: 1100px; margin: 0 auto; padding: 16px 22px 6px;
  border-top: 1px solid rgba(120, 160, 210, .12);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
}
footer .foot-bottom .tag { color: #8496af; font-size: .84rem; font-style: italic; }
footer .foot-bottom .meta { color: #6b7c96; font-size: .78rem; }