/* ── connect.css · social connect + front-page sections ── */
    /* === Social Media Connect Here === */
    /* Desktop: all 4 in one row */
    .sGrid{
      display:flex;
      flex-direction:row;
      flex-wrap:nowrap;
      justify-content:center;
      align-items:center;
      gap:.6rem;
      max-width:600px;
      margin:0 auto 1.5rem;
    }
    .sCard{
      display:inline-flex;
      flex-direction:row;
      align-items:center;
      justify-content:center;
      gap:.45rem;
      padding:0 1rem;
      height:38px;
      border:1px solid var(--bdr);
      background:color-mix(in srgb,var(--tc) 4%,transparent);
      color:var(--txd);
      font-family:var(--fm);
      font-size:.68rem;
      letter-spacing:.16em;
      text-decoration:none;
      cursor:pointer;
      transition:border-color .3s,color .3s,background .3s,transform .3s,box-shadow .3s;
      white-space:nowrap;
      flex:1;
      min-width:0;
      max-width:150px;
      border-radius:6px;
    }
    .sCard:hover{
      border-color:var(--pg);
      color:var(--ps);
      background:var(--pdim);
      transform:translateY(-2px);
      box-shadow:0 4px 18px color-mix(in srgb,var(--tc) 18%,transparent);
    }
    .sCard svg{width:13px;height:13px;flex-shrink:0;transition:transform .3s;}
    .sCard:hover svg{transform:scale(1.15);}
    .sCard .sCardLbl{line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

    /* Mobile: 2×2 grid */
    @media(max-width:640px){
      .sGrid{
        display:grid;
        grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
        gap:.5rem;
        max-width:320px;
      }
      .sCard{
        max-width:none;
        height:46px;
        padding:0 .8rem;
        font-size:.66rem;
        flex:unset;
      }
    }



    /* ── Outer shell — darker than the rest of the dark/violet
       theme, since a footer should read as the "floor" of the
       page. Locally overrides the shared --bg/--sur tokens (set
       by the theme-scoping block above) to a deeper near-black,
       so every child element that already styles itself with
       var(--bg)/var(--sur)/var(--tx)/etc. repaints automatically. ── */
    footer.siteFooter {
      --bg: var(--fbg);
      --sur: var(--fsur);
      --sur2: var(--fsur2);
      --bdr: var(--fbdr);
      --bdrh: var(--fbdrh);
      background: var(--bg);
      border-top: 1px solid var(--bdr);
      padding: 0;
      text-align: left;
      display: block;
    }

    /* ── Main content band ── */
    .ftMain {
      max-width: 1200px;
      margin: 0 auto;
      padding: 4rem 3rem 3.5rem;
      display: flex;
      align-items: flex-start;
      gap: 5rem;
    }

    /* ── Brand column ── */
    .ftBrand {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      min-width: 0;
    }
    .ftBrandName {
      font-family: var(--fd);
      font-size: 1.45rem;
      font-weight: 900;
      letter-spacing: .06em;
      color: var(--tx);
      line-height: 1;
    }
    .ftBrandName .ftBrandAccent {
      color: var(--pg);
    }
    .ftBrandTagline {
      font-family: var(--fm);
      font-size: .64rem;
      letter-spacing: .28em;
      color: var(--txd);
      text-transform: uppercase;
      line-height: 1.4;
    }
    .ftBrandDivider {
      width: 28px;
      height: 1px;
      background: var(--bdr);
      margin: .25rem 0;
    }
    .ftBrandDesc {
      font-family: var(--fb);
      font-size: .82rem;
      line-height: 1.7;
      color: var(--txd);
      max-width: 230px;
    }

    /* ── Column group ── */
    .ftCols {
      flex: 1;
      display: flex;
      gap: 3.5rem;
      justify-content: flex-end;
      min-width: 0;
    }

    /* ── Individual column ── */
    .ftCol {
      display: flex;
      flex-direction: column;
      gap: .9rem;
      min-width: 120px;
    }
    .ftColHead {
      font-family: var(--fm);
      font-size: .62rem;
      font-weight: 700;
      letter-spacing: .32em;
      text-transform: uppercase;
      color: var(--ps);
      padding-bottom: .5rem;
      border-bottom: 1px solid var(--bdr);
      white-space: nowrap;
    }
    .ftColList {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: .1rem;
    }

    /* ── Link / button base — every clickable link in the footer
       follows the same dark/violet theme tokens as the rest of
       the page. ── */
    .ftColLink {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      font-family: var(--fb);
      font-size: .83rem;
      color: var(--txd);
      background: none;
      border: none;
      cursor: pointer;
      padding: .38rem 0;
      text-decoration: none;
      position: relative;
      transition: color .22s ease;
      text-align: left;
      line-height: 1.3;
    }
    .ftColLink::after {
      content: '';
      position: absolute;
      bottom: .32rem;
      left: 0;
      right: 0;
      height: 1px;
      background: var(--pg);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform .28s cubic-bezier(.22,1,.36,1);
    }
    .ftColLink:hover {
      color: var(--tx);
    }
    .ftColLink:hover::after {
      transform: scaleX(1);
    }
    .ftColLink:focus-visible {
      outline: 2px solid var(--pg);
      outline-offset: 2px;
      border-radius: 3px;
    }
    /* Small arrow indicator for mailto links */
    .ftColLink--mail::before {
      content: '→';
      font-family: var(--fb);
      font-size: .7rem;
      color: var(--pg);
      opacity: 0;
      transform: translateX(-4px);
      transition: opacity .22s ease, transform .22s ease;
      flex-shrink: 0;
    }
    .ftColLink--mail:hover::before {
      opacity: 1;
      transform: translateX(0);
    }

    /* ── Bottom copyright band ── */
    .ftBase {
      border-top: 1px solid var(--bdr);
      padding: 2rem 3rem;
      /* Extra bottom clearance so the fixed floating bottom nav
         bar never covers the copyright/legal line — the page
         scrolls a little further than the footer's own content. */
      padding-bottom: calc(2rem + 5.5rem);
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 1.5rem 2.5rem;
    }
    .ftBaseLogo {
      font-family: var(--fd);
      font-size: .75rem;
      font-weight: 700;
      letter-spacing: .22em;
      color: var(--ps);
      white-space: nowrap;
      flex-shrink: 0;
    }
    .ftBaseLogo .s {
      color: var(--pg);
    }
    .ftBaseCopy {
      font-family: var(--fm);
      font-size: .62rem;
      letter-spacing: .12em;
      color: var(--txd);
      text-align: center;
    }
    .ftBaseLegal {
      font-family: var(--fb);
      font-size: .73rem;
      line-height: 1.65;
      color: var(--txd);
      text-align: right;
      max-width: 480px;
    }

    /* ── Responsive: Tablet ── */
    @media (max-width: 1024px) {
      .ftMain { padding: 3.5rem 2.5rem 3rem; gap: 3.5rem; }
      .ftCols { gap: 2.5rem; }
      .ftBase { padding: 1.8rem 2.5rem; padding-bottom: calc(1.8rem + 5.5rem); gap: 1rem 2rem; }
    }
    @media (max-width: 860px) {
      .ftMain {
        flex-direction: column;
        gap: 2.5rem;
        padding: 3rem 2rem 2.5rem;
      }
      .ftBrand { max-width: 100%; }
      .ftBrandDesc { max-width: 100%; }
      .ftCols {
        justify-content: flex-start;
        gap: 2.5rem;
        flex-wrap: wrap;
      }
      .ftBase {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        padding: 1.6rem 2rem;
        padding-bottom: calc(1.6rem + 5.5rem);
        gap: .9rem 2rem;
      }
      .ftBaseCopy { text-align: left; grid-column: 1; grid-row: 1; }
      .ftBaseLogo { grid-column: 2; grid-row: 1; text-align: right; }
      .ftBaseLegal {
        grid-column: 1 / -1;
        grid-row: 2;
        text-align: left;
        max-width: 100%;
      }
    }

    /* ── Responsive: Mobile ── */
    @media (max-width: 640px) {
      .ftMain {
        padding: 2.5rem 1.4rem 2rem;
        gap: 2rem;
      }
      .ftCols {
        gap: 1.8rem 2rem;
        width: 100%;
      }
      .ftCol { min-width: calc(50% - 1rem); flex: 1 1 calc(50% - 1rem); }
      .ftBase {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        padding: 1.4rem;
        padding-bottom: calc(1.4rem + 5rem);
        gap: .75rem;
        text-align: center;
      }
      .ftBaseLogo { grid-column: 1; grid-row: 1; text-align: center; }
      .ftBaseCopy { grid-column: 1; grid-row: 2; text-align: center; }
      .ftBaseLegal { grid-column: 1; grid-row: 3; text-align: center; max-width: 100%; }
    }
    @media (max-width: 400px) {
      .ftCols { flex-direction: column; gap: 1.5rem; }
      .ftCol { min-width: 0; flex: none; width: 100%; }
    }
    @media (prefers-reduced-motion: reduce) {
      .ftColLink, .ftColLink::after, .ftColLink--mail::before { transition: none; }
    }

    /* ── Legal overlay ── */
    #legalBackdrop{
      position:fixed;inset:0;z-index:2000;
      display:flex;align-items:center;justify-content:center;
      padding:1.2rem;
      opacity:0;pointer-events:none;visibility:hidden;
      transition:opacity .3s ease,visibility 0s linear .3s;
      isolation:isolate;
    }
    /* FIX: background + blur split onto ::before (position:absolute
       takes it out of the flex flow so .legalModal still centers
       normally) — same decoupling as #bnNav, stops the flash if the
       page scrolls behind this while it's open. */
    #legalBackdrop::before{
      content:'';position:absolute;inset:0;
      background:color-mix(in srgb,var(--bg) 75%,transparent);
      backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
      z-index:-1;
    }
    #legalBackdrop.open{opacity:1;pointer-events:auto;visibility:visible;transition:opacity .3s ease,visibility 0s linear 0s;}
    .legalModal{
      background:var(--sur);
      border:1px solid var(--bdrh);
      box-shadow:0 0 60px color-mix(in srgb,var(--tc) 12%,transparent),
                 0 32px 64px rgba(5,3,8,.7),
                 inset 0 1px 0 color-mix(in srgb,var(--tc) 10%,transparent);
      width:100%;max-width:640px;
      max-height:88vh;
      display:flex;flex-direction:column;
      overflow:hidden;
      transform:translateY(22px) scale(.97);
      transition:transform .38s cubic-bezier(.22,1,.36,1),opacity .3s ease;
      opacity:0;
      border-radius:6px;
      will-change:transform,opacity;
    }
    #legalBackdrop.open .legalModal{transform:translateY(0) scale(1);opacity:1;}
    .lmHead{
      display:flex;align-items:center;justify-content:space-between;
      padding:1.4rem 1.8rem 1.2rem;
      border-bottom:1px solid var(--bdr);
      flex-shrink:0;
      background:linear-gradient(to right,color-mix(in srgb,var(--tc) 6%,transparent),transparent);
    }
    .lmTitle{
      font-family:var(--fd);
      font-size:clamp(.8rem,3vw,1rem);
      font-weight:700;letter-spacing:.12em;
      color:var(--tx);
    }
    .lmClose{
      background:none;border:1px solid var(--bdr);cursor:pointer;
      width:32px;height:32px;
      display:flex;align-items:center;justify-content:center;
      font-size:.9rem;color:var(--txd);
      transition:border-color .2s,color .2s,background .2s;
      flex-shrink:0;
      border-radius:6px;
      outline:none;
    }
    .lmClose:hover{border-color:var(--pg);color:var(--ps);background:var(--pdim);}
    .lmClose:focus-visible{outline:2px solid var(--pg);outline-offset:2px;}
    .lmBody{
      flex:1;overflow-y:auto;
      padding:1.6rem 1.8rem 2rem;
      -webkit-overflow-scrolling:touch;
      background:var(--sur2);
    }
    .lmBody::-webkit-scrollbar{width:3px;}
    .lmBody::-webkit-scrollbar-track{background:transparent;}
    .lmBody::-webkit-scrollbar-thumb{background:var(--bdrh);}
    .lmBody h2{
      font-family:var(--fd);
      font-size:clamp(.7rem,2.5vw,.85rem);
      font-weight:700;letter-spacing:.12em;
      color:var(--ps);margin-bottom:1.4rem;
    }
    .lmBody h3{
      font-family:var(--fd);
      font-size:clamp(.98rem,2.4vw,1.1rem);
      font-weight:700;letter-spacing:.01em;
      color:var(--tx);margin:1.5rem 0 .6rem;
    }
    .lmBody h4{
      font-family:var(--fb);
      font-size:clamp(.92rem,2.2vw,1rem);
      font-weight:700;letter-spacing:0;
      color:var(--tx);margin:1rem 0 .4rem;
    }
    .lmBody p,.lmBody li{
      font-family:var(--fb);
      font-size:clamp(.95rem,2.2vw,1.05rem);
      line-height:1.85;color:var(--txd);
      margin-bottom:.85rem;
    }
    .lmBody ul{padding-left:1.3rem;margin-bottom:.85rem;}
    .lmBody li{margin-bottom:.4rem;}
    .lmBody strong{color:var(--tx);font-style:normal;}
    .lmDate{
      display:inline-block;margin-top:.6rem;
      font-family:var(--fm);
      font-size:.65rem;letter-spacing:.18em;
      color:var(--ps);
      background:color-mix(in srgb,var(--tc) 10%,transparent);
      border:1px solid var(--bdr);
      padding:.28rem .7rem;
    }
    @media(max-width:480px){
      .lmHead{padding:1.1rem 1.2rem .9rem;}
      .lmBody{padding:1.2rem 1.2rem 1.6rem;}
    }

    /* ── Legacy modal remnants — only the pieces still in use ──
       .mBtn/.mBtn.sec: PREV/NEXT buttons inside the injected comic
       viewer. .upPrev: preview <img> in both
       upload popups. The rest of the old .mOvr/.modal component
       (.mIn/.mX/.mErr/.dz*) was superseded by .upPop/.laBody and
       has been removed. ── */
    .mBtn{width:100%;padding:.8rem 1rem;background:var(--pdim);border:1px solid var(--pg);color:var(--ps);font-family:var(--fm);font-size:.8rem;letter-spacing:.2em;cursor:pointer;transition:background .3s,box-shadow .3s;margin-bottom:.6rem;border-radius:6px;}
    .mBtn:hover{background:color-mix(in srgb,var(--tc) 25%,transparent);box-shadow:0 0 20px color-mix(in srgb,var(--tc) 20%,transparent);}
    .mBtn.sec{background:transparent;border-color:var(--bdr);color:var(--txd);}
    .mBtn.sec:hover{border-color:var(--txd);background:var(--sur2);}
    .upPrev{width:100%;max-height:150px;object-fit:cover;margin-bottom:.8rem;display:none;}

    


    .toast{position:fixed;bottom:5rem;left:50%;transform:translateX(-50%) translateY(20px);background:var(--sur2);border:1px solid var(--pg);color:var(--ps);font-family:var(--fm);font-size:.76rem;letter-spacing:.15em;padding:.7rem 1.5rem;z-index:20100;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;white-space:normal;max-width:min(560px,calc(100vw - 2rem));width:max-content;text-align:center;line-height:1.5;border-radius:6px;}
    .toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

    .fsHdr{max-width:1200px;margin:0 auto;padding:0 2rem;}