/* --- Marketing mobile chrome ------------------------------------------------
   Ported from designs/MobileNav.dc.html and designs/MobileFooter.dc.html.

   Breakpoint rule, set in the design session: the new chrome takes over BELOW
   560px. Between 560 and 900 the existing drawer stays exactly as it is, so
   tablets do not get a phone layout and nothing about the desktop site moves.

   Targets are 44px minimum throughout, and anything bottom-anchored carries
   safe-area padding so it clears the home indicator.
   -------------------------------------------------------------------------- */

.mnav, .mfoot { display: none; }

@media (max-width: 559.98px) {
  /* Hand the page over. The desktop nav and footer are left in the markup and
     simply stand down, so nothing about them has to change to ship this. */
  .nav, .foot, .nav-backdrop { display: none !important; }
  .mnav { display: flex; }
  .mfoot { display: block; }

  /* --- the bar --------------------------------------------------------- */
  .mnav {
    position: sticky; top: 0; z-index: 60; flex-direction: column;
    background: var(--bg-0, #f7f5f1); border-bottom: 1px solid var(--line, #e7e3da);
    font-family: 'Onest', system-ui, sans-serif; color: var(--ink, #1c1915);
  }
  .mnav-bar { height: 56px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 14px; }
  .mnav-brand { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; min-height: 44px; color: inherit; text-decoration: none; }
  .mnav-mark { width: 24px; height: 24px; flex: none; display: block; }
  .mnav-mark svg { width: 100%; height: 100%; display: block; }
  .mnav-word { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
  .mnav-theme {
    width: 44px; height: 44px; flex: none; border: none; background: transparent;
    color: var(--ink-3, #7b7466); cursor: pointer; display: flex; align-items: center;
    justify-content: center; padding: 0;
  }
  .mnav-menu {
    width: 44px; height: 44px; flex: none; position: relative; display: flex;
    align-items: center; justify-content: center; padding: 0; cursor: pointer;
    border: 1px solid var(--line-2, #d7d2c6); border-radius: 10px;
    background: var(--bg-1, #fff); color: var(--ink, #1c1915);
    box-shadow: 0 3px 0 var(--bg-3, #e8e4db);
  }
  .mnav-menu:active { transform: translateY(3px); box-shadow: 0 0 0 var(--bg-3, #e8e4db); }
  .mnav-gate, .mnav-x { display: block; }
  .mnav-x { position: absolute; opacity: 0; }
  .mnav.is-open .mnav-gate { opacity: 0; }
  .mnav.is-open .mnav-x { opacity: 1; }

  /* --- the sheet ------------------------------------------------------- */
  .mnav-sheet {
    display: flex; flex-direction: column;
    max-height: calc(100vh - 56px); overflow-y: auto; scrollbar-width: none;
    padding: 10px 12px calc(16px + env(safe-area-inset-bottom));
    background: var(--bg-1, #fff); border-top: 1px solid var(--line, #e7e3da);
    box-shadow: 0 22px 48px rgba(0,0,0,.20);
  }
  .mnav-sheet[hidden] { display: none; }
  .mnav-sheet::-webkit-scrollbar { width: 0; }
  .mnav-cta { display: flex; align-items: center; gap: 9px; padding: 2px 0 12px; margin-bottom: 8px; border-bottom: 1px solid var(--line, #e7e3da); }
  .mnav-cta a { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 10px; font-family: 'DM Mono', ui-monospace, monospace; font-size: 13.5px; font-weight: 500; text-decoration: none; }
  .mnav-cta a:active { transform: translateY(3px); box-shadow: none; }
  .mnav-cta-primary { flex: 1; background: var(--brand, #ef5920); color: var(--on-brand, #201009); box-shadow: 0 3px 0 #a83a12; }
  .mnav-cta-ghost { flex: none; padding: 0 18px; border: 1px solid var(--line-2, #d7d2c6); color: var(--ink-2, #4c463d); background: var(--bg-1, #fff); box-shadow: 0 3px 0 var(--bg-3, #e8e4db); }

  .mnav-row {
    display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 12px;
    border-radius: 11px; font-size: 16px; color: var(--ink-2, #4c463d); text-decoration: none;
  }
  .mnav-row svg { flex: none; color: var(--ink-4, #aaa294); }
  .mnav-row.is-on { color: var(--brand-2, #c4471a); background: var(--brand-soft, rgba(239,89,32,.10)); }
  .mnav-row.is-on svg { color: var(--brand, #ef5920); }
  .mnav-new { font-family: 'DM Mono', ui-monospace, monospace; font-size: 9px; letter-spacing: .1em; padding: 3px 6px; border-radius: 5px; background: rgba(139,92,246,.14); color: var(--purple, #8b5cf6); }

  .mnav-more-label { font-family: 'DM Mono', ui-monospace, monospace; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4, #aaa294); padding: 14px 12px 6px; }
  .mnav-more { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .mnav-more-item { display: flex; align-items: center; min-height: 46px; padding: 0 12px; border-radius: 10px; font-size: 14.5px; color: var(--ink-2, #4c463d); background: var(--bg-2, #f1eee8); text-decoration: none; }
  .mnav-more-item.is-on { color: var(--brand-2, #c4471a); background: var(--brand-soft, rgba(239,89,32,.10)); }

  /* --- the footer ------------------------------------------------------ */
  .mfoot {
    padding: 30px 16px calc(26px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line, #e7e3da); background: var(--bg-0, #f7f5f1);
    font-family: 'Onest', system-ui, sans-serif; color: var(--ink, #1c1915);
  }
  /* min-height, not just the mark size: 44px is the floor for anything
     tappable on a phone, and the logo is a link home. */
  .mfoot-brand { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-bottom: 12px; color: inherit; text-decoration: none; }
  .mfoot-mark { width: 28px; height: 28px; flex: none; display: block; }
  .mfoot-mark svg { width: 100%; height: 100%; display: block; }
  .mfoot-word { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
  .mfoot-blurb { font-size: 14px; color: var(--ink-3, #7b7466); line-height: 1.55; margin: 0 0 22px; }
  .mfoot-kicker { font-family: 'DM Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4, #aaa294); margin-bottom: 8px; }
  .mfoot-news { padding-top: 22px; border-top: 1px solid var(--line, #e7e3da); }
  .mfoot-news .mfoot-blurb { margin-bottom: 14px; }
  .mfoot-news-form { display: flex; gap: 8px; }
  .mfoot-news-form input {
    flex: 1; min-width: 0; height: 48px; padding: 0 14px; outline: none;
    border: 1px solid var(--line-2, #d7d2c6); border-radius: 10px;
    background: var(--bg-1, #fff); color: var(--ink, #1c1915);
    font-family: 'Onest', sans-serif; font-size: 16px; /* 16px: anything less zooms iOS on focus */
  }
  .mfoot-news-form input:focus { border-color: var(--brand, #ef5920); }
  .mfoot-news-form button { width: 48px; height: 48px; flex: none; border: none; border-radius: 10px; background: var(--brand, #ef5920); color: var(--on-brand, #201009); font-size: 17px; cursor: pointer; box-shadow: 0 3px 0 #a83a12; }
  .mfoot-news-form button:active { transform: translateY(3px); box-shadow: none; }

  .mfoot-secs { margin-top: 22px; border-top: 1px solid var(--line, #e7e3da); }
  .mfoot-sec { border-bottom: 1px solid var(--line, #e7e3da); }
  .mfoot-sec-head {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    min-height: 52px; padding: 0 2px; border: none; background: transparent;
    color: var(--ink-4, #aaa294); cursor: pointer;
    font-family: 'DM Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  }
  .mfoot-sec-head svg { flex: none; transition: transform 180ms; }
  .mfoot-sec-head[aria-expanded="true"] svg { transform: rotate(180deg); }
  .mfoot-sec-body { display: flex; flex-direction: column; padding-bottom: 8px; }
  .mfoot-sec-body[hidden] { display: none; }
  .mfoot-sec-body a { display: flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--ink-2, #4c463d); text-decoration: none; }

  .mfoot-guild-label { margin: 22px 0 10px; }
  .mfoot-guild { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .mfoot-guild a { height: 52px; border-radius: 11px; display: grid; place-items: center; background: var(--bg-2, #f1eee8); border: 1px solid var(--line, #e7e3da); }
  .mfoot-guild img { width: 24px; height: 24px; display: block; object-fit: contain; }

  .mfoot-base { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line, #e7e3da); display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--ink-3, #7b7466); }
  .mfoot-base-links { display: flex; gap: 14px; flex-wrap: wrap; }
  .mfoot-base-links a { display: flex; align-items: center; min-height: 44px; }

  /* The Founder's ribbon runs slim on a phone and scrolls away with the page
     rather than eating a fixed strip of a 390px screen. */
  .founder-ribbon, [data-founder-ribbon] {
    position: static !important; font-size: 12px !important; padding: 7px 12px !important;
    white-space: nowrap; overflow-x: auto; scrollbar-width: none;
  }
}