/* ============================================================
   home-mobile.css
   Mobile-only overlay for index.html (≤ 640px viewports).
   Loaded via <link media="(max-width: 640px)"> AND wrapped in
   @media here for belt-and-braces. Desktop is untouched.
   ============================================================ */

@media (max-width: 640px) {

  /* ---------- Body / page padding ---------- */
  body { overscroll-behavior-y: none; padding-bottom: 80px; }

  .page {
    padding-left:  max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }

  /* ---------- Top bar — collapse to [ <mascot> ] + theme + hamburger ---------- */
  .site-nav { border-bottom: 1px solid var(--rule); }
  .site-nav__inner { padding: 12px 0 !important; gap: 12px; }

  /* Hide brand text label, keep brackets + mascot.
     Markup is: [span.bracket][span.brand-mascot][span][span.bracket]
     so target the unclassed span. */
  .nav__brand > span:not(.bracket):not(.brand-mascot) { display: none !important; }
  .nav__brand .bracket { font-size: 12px; }

  /* Already hidden by existing rules at this width but pin to be safe */
  .nav__anchors { display: none; }

  /* Drop the noise: products + dividers in the topbar on mobile */
  .nav__right .nav__divider,
  .nav__right .nav__product { display: none !important; }
  .nav__right { gap: 8px; }

  /* Theme + hamburger as 36×36 icon buttons */
  .theme-toggle, .menu-button {
    width: 36px; height: 36px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* Hamburger morph to × when expanded */
  .menu-button[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); }

  /* ---------- Boot line ---------- */
  .m-boot {
    padding: 10px 18px 4px;
    font-family: var(--font-mono); font-size: 10px;
    color: var(--text-dim); letter-spacing: 0.1em;
  }
  .m-boot .ready { color: var(--accent); }
  .m-boot .caret {
    display: inline-block; width: 5px; height: 9px;
    background: var(--accent); vertical-align: -1px;
    animation: m-blink 1.1s steps(1) infinite;
  }
  @keyframes m-blink { 50% { opacity: 0; } }

  /* ---------- Sections — breathing-room padding ----------
     Use shorthand so left/right are explicit. The inline desktop rule
     `.hero { padding: var(--s-9) 0 var(--s-9) }` would otherwise zero-out
     horizontal padding even when .page set its own. */
  .hero    { padding: 8px  18px 28px !important; }
  .section { padding: 16px 18px 28px !important; }

  .section-head {
    display: flex; align-items: baseline; gap: 8px;
    padding-bottom: 8px; border-bottom: 1px solid var(--rule);
    margin-bottom: 14px;
  }
  .section-head__num { font-size: 10px; letter-spacing: 0.08em; }
  .section-head__title { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
  .section-head__hint {
    margin-left: auto;
    font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  }

  /* ---------- Hero ---------- */
  .hero h1 {
    font-size: 36px !important;
    line-height: 1.04 !important;
    font-weight: 700 !important;
    letter-spacing: -0.028em !important;
    max-width: none !important;
    margin: 0 0 12px !important;
  }
  .hero__lede {
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: var(--text-muted);
    margin: 0 0 18px !important;
    max-width: none !important;
  }

  /* NOW-bar: tighten on mobile */
  .now-bar {
    font-size: 10px;
    margin-bottom: 18px;
    max-width: 100%;
  }
  .now-bar__label, .now-bar__body { padding: 6px 10px; }
  .now-bar__body {
    flex: 1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* CTA buttons */
  .hero .btn, .section .btn {
    padding: 11px 14px;
    font-size: 13px;
    border-radius: 4px;
  }

  /* ---------- About: bio card + principles ---------- */
  .about-card {
    border: 1px solid var(--rule);
    background: var(--bg-raised);
    padding: 14px !important;
    margin-bottom: 22px !important;
    max-width: none !important;
  }
  .about-card .card-chip {
    top: -8px; left: 12px;
    padding: 0 6px;
    background: var(--bg);
    font-size: 9px; letter-spacing: 0.08em;
    color: var(--text-dim);
  }
  .about-card p {
    font-size: 13px !important; line-height: 1.6 !important;
    color: var(--text-muted);
    margin: 0 0 8px !important;
  }
  .about-card p:last-child { margin: 0 !important; }

  /* "[ how I think ]" eyebrow above principles */
  #about > h3 {
    font-family: var(--font-mono);
    font-size: 10px !important;
    color: var(--accent);
    letter-spacing: 0.08em;
    margin: 0 0 10px !important;
  }

  .principle-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .principle {
    border: 1px solid var(--rule);
    background: var(--bg-raised);
    padding: 14px !important;
    border-radius: 0 !important;
    transition: border-color 160ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .principle:active { border-color: var(--accent); }
  .principle__num {
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 8px !important;
  }
  .principle__title {
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 8px !important;
  }
  .principle__body {
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
  }

  /* ---------- Work: tabs + project rows ---------- */
  .work-tabs {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--rule);
    margin-bottom: 12px !important;
    gap: 0 !important;
  }
  .work-tab {
    border: none !important;
    background: transparent;
    padding: 10px !important;
    font-size: 10px !important;
    letter-spacing: 0.06em !important;
    text-align: center;
    border-radius: 0 !important;
  }
  .work-tab + .work-tab { border-left: 1px solid var(--rule) !important; }
  .work-tab[aria-selected="true"] {
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
  }

  .project {
    padding: 14px 0 !important;
    border-top: none !important;
    border-bottom: 1px solid var(--rule) !important;
    -webkit-tap-highlight-color: transparent;
    transition: background 160ms ease;
  }
  .project:active { background: color-mix(in oklch, var(--accent) 6%, transparent); }
  .project:active .project__title { color: var(--accent); }

  .project__row {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    column-gap: 10px !important;
    align-items: baseline !important;
  }
  .project__num {
    font-size: 10px !important;
    letter-spacing: 0.06em !important;
  }
  .project__title {
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
  }
  .project__meta {
    grid-column: 2 !important;
    font-size: 9px !important;
    color: var(--accent) !important;
    letter-spacing: 0.06em !important;
    margin-top: 2px !important;
  }
  .project__desc {
    grid-column: 2 !important;
    margin: 8px 0 0 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: var(--text-muted) !important;
    max-width: none !important;
  }
  .project__tags {
    grid-column: 2 !important;
    margin-top: 10px !important;
    gap: 4px !important;
  }
  .project__tags .tag, .project__tags > * {
    padding: 3px 6px !important;
    font-size: 9px !important;
  }

  /* ---------- Career timeline — terse rail with Foundation collapse ---------- */
  /* Override the 720px stack: rebuild as a vertical rail */
  .timeline {
    position: relative;
    padding-left: 18px;
    display: block !important;
  }
  .timeline::before {
    content: ""; display: block !important;
    position: absolute; left: 4px; top: 6px; bottom: 6px;
    width: 1px; background: var(--rule);
  }

  /* Each role: a single column block on the rail.
     NOTE: must come BEFORE the --m-hidden rule below — equal specificity,
     same !important, source-order wins, so the hide rule is last. */
  .timeline__row {
    display: block !important;
    grid-template-columns: none !important;
    position: relative;
    padding: 0 0 16px !important;
    border-top: none !important;
    margin: 0 !important;
    opacity: 0; transform: translateY(6px);
    transition: opacity 380ms ease, transform 380ms cubic-bezier(0.22,1,0.36,1);
  }
  .timeline__row.is-in,
  .timeline__row--m-foundation { opacity: 1; transform: none; }

  /* Hide early years on mobile, show synthetic Foundation row.
     Keep this AFTER `.timeline__row` so it wins source-order on display. */
  .timeline__row--m-hidden { display: none !important; }
  .timeline__row--m-foundation,
  .timeline__row--m-foundation[hidden] { display: block !important; }

  .timeline__when {
    display: block !important;
    font-family: var(--font-mono);
    font-size: 9px !important;
    color: var(--text-muted) !important;
    letter-spacing: 0.06em !important;
    text-align: left !important;
    padding: 0 !important;
    text-transform: none !important;
  }
  .timeline__row--current .timeline__when { color: var(--accent) !important; }

  .timeline__body {
    display: block !important;
    padding: 0 !important;
    margin-top: 0 !important;
    position: relative;
  }

  /* Dots: lock with !important to override the inline desktop rule
     (left:-7px, width:13px, height:13px) and the [data-mascot-host]
     override (left:-9px, width:18px) on the current row. */
  .timeline__dot {
    display: block !important;
    position: absolute !important;
    left: -18px !important;
    top: 5px !important;
    width: 7px !important;
    height: 7px !important;
    background: var(--bg) !important;
    border: 1px solid var(--rule) !important;
    border-radius: 50% !important;
    padding: 0 !important;
  }
  .timeline__dot > * { display: none !important; } /* hide nested mascot in dot */
  .timeline__row--current .timeline__dot {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
  }

  .timeline__role {
    font-size: 14px !important;
    font-weight: 500 !important;
    margin-top: 2px !important;
  }
  .timeline__company {
    font-family: var(--font-mono);
    font-size: 10px !important;
    color: var(--accent) !important;
    letter-spacing: 0.04em !important;
    margin-top: 2px !important;
    text-transform: none !important;
  }

  /* Drop description and sub-roles for the terse rail */
  .timeline__desc, .timeline__sub { display: none !important; }

  /* ---------- Hide the floating scroll-to-top button on mobile ----------
     pixel-mascot.js mounts a fixed bottom-right button that clashes with
     our bottom pager. The pager's HOME stop scrolls to top, same affordance. */
  .pm-scroll-top { display: none !important; }

  /* ---------- Contact: stack 4 tiles vertically ---------- */
  #contact > p {
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
  }
  .contact-grid {
    display: flex !important;
    flex-direction: column;
    gap: 8px !important;
  }
  .contact-tile {
    grid-template-columns: auto 1fr !important;
    padding: 14px !important;
    gap: 12px !important;
    min-height: 56px;
  }
  .contact-tile__icon {
    width: 34px !important; height: 34px !important;
  }
  .contact-tile__label { font-size: 9px; }
  .contact-tile__value { font-size: 13px !important; }

  .site-footer {
    margin-top: 24px !important;
    padding: 24px 0 !important;
    font-size: 9px;
    letter-spacing: 0.08em;
  }

  /* ---------- Bottom pager (fixed) ---------- */
  .m-pager {
    position: fixed; left: 12px; right: 12px; bottom: 12px;
    max-width: 616px; margin: 0 auto;
    background: color-mix(in oklch, var(--bg) 92%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--rule);
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.06em; z-index: 25;
  }
  .m-pager > * {
    padding: 10px 12px;
    min-height: 44px;
    display: flex; align-items: center;
  }
  .m-pager .mid {
    text-align: center; color: var(--accent);
    border-left: 1px solid var(--rule); border-right: 1px solid var(--rule);
    justify-content: center;
  }
  .m-pager__nav {
    color: var(--text-muted);
    gap: 6px;
    background: transparent;
    border: none;
    font: inherit; letter-spacing: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .m-pager__nav:disabled { opacity: 0.3; cursor: default; }
  .m-pager__nav.right { justify-content: flex-end; }

  /* ---------- Mascot coach bubble (mobile-only, first-load) ---------- */
  .m-coach {
    position: fixed; left: 0; right: 0; bottom: 64px;
    z-index: 26;
    display: flex !important; justify-content: center;
    pointer-events: none;
  }
  .m-coach[hidden] { display: none !important; }
  .m-coach__inner {
    display: flex; align-items: flex-end; gap: 8px;
    pointer-events: auto; cursor: pointer;
    transform: translateY(20px); opacity: 0;
    transition: transform 280ms cubic-bezier(0.22,1,0.36,1), opacity 220ms ease;
  }
  .m-coach.is-show .m-coach__inner { transform: translateY(0); opacity: 1; }
  .m-coach.is-leave .m-coach__inner { transform: translateY(20px); opacity: 0; }
  .m-coach__bubble {
    background: var(--bg);
    border: 1px solid var(--accent);
    color: var(--text);
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.04em;
    padding: 8px 12px;
    margin-bottom: 8px;
    position: relative;
    white-space: nowrap;
  }
  .m-coach__bubble .a { color: var(--accent); }
  .m-coach__bubble::before {
    content: ""; position: absolute; bottom: 8px; right: -7px;
    width: 0; height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid var(--accent);
  }
  .m-coach__bubble::after {
    content: ""; position: absolute; bottom: 8px; right: -5px;
    width: 0; height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid var(--bg);
  }

  /* ---------- Drawer: tighten typography on mobile ---------- */
  .mobile-overlay__nav { gap: 0; }

  /* ---------- Reduced motion ---------- */
  @media (prefers-reduced-motion: reduce) {
    .timeline__row,
    .m-coach__inner,
    .m-boot .caret {
      animation: none !important;
      transition: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
  }
}

/* ---------- Default (desktop) hides for new mobile-only DOM ----------
   These rules apply at all widths so the new pager / coach / Foundation
   row don't appear on desktop. Mobile @media block above unhides them. */
.m-pager,
.m-coach,
.m-boot,
.timeline__row--m-foundation { display: none; }