/* ═══════════════════════════════════════════════════════════════
   mobile.css — Mobile overrides for MBB Portfolio
   Add AFTER style.css:  <link rel="stylesheet" href="mobile.css">
═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Cursor off on touch ── */
  #cursor, #cursor-ring { display: none; }
  body { cursor: auto; }
  a, button, .sk, .proj-card, .stat-box, .soc,
  #theme-toggle, .btn-fire, .btn-ghost,
  .proj-link { cursor: pointer; }


  /* ══════════════════════════════
     NAV
  ══════════════════════════════ */
  nav { padding: 14px 20px; }
  /* nav-bg is already ~95% opaque — the blur is invisible but
     still costs a GPU compositing pass on every scroll frame */
  nav { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav-center { display: none; } /* projects page nav handled below */

  /* Nav links — separate outlined pill buttons */
  .nav-links,
  .nav-center {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .nav-links a,
  .nav-center a {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .2s, color .2s, background .2s;
    white-space: nowrap;
  }

  .nav-links a::after,
  .nav-center a::after {
    display: none;
  }

  .nav-links a:hover,
  .nav-center a:hover {
    border-color: var(--accent);
    color: var(--text);
  }

  .nav-links a.active,
  .nav-center a.active {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--bg);
  }


  /* ══════════════════════════════
     HERO — stacked layout
  ══════════════════════════════ */
  .hero-layout {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 88px 24px 48px;
    gap: 0;
    min-height: 100vh;
  }

  .hero-content {
    max-width: 100%;
    width: 100%;
    text-align: center;
  }

  .hero-tag {
    font-size: 10px;
    padding: 5px 12px;
    margin-bottom: 14px;
    display: inline-flex;
  }

  .hero-greeting {
    font-size: 13px;
    margin-bottom: 6px;
  }

  .hero-name {
    font-size: clamp(58px, 16vw, 92px);
    line-height: 0.88;
    margin-bottom: 16px;
  }

  .hero-sub {
    font-size: 13px;
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 100%;
  }

  .hero-ctas {
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-bottom: 36px;
  }

  .btn-fire, .btn-ghost {
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 14px 20px;
    font-size: 13px;
    border-radius: 8px;
  }

  /* ── Scroll cue ── */
  .scroll-cue {
    left: 24px;
    bottom: 20px;
  }


  /* ══════════════════════════════
     HERO BENTO — show it, stacked
  ══════════════════════════════ */
  .hero-bento {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
    animation: fadeUp .7s ease 2.4s both;
  }


  /* ══════════════════════════════
     ORBIT SYSTEM — scale to fit
     Original size: 480×520px
     We scale it to ~300px wide so
     it fits any phone screen.
     scale = 300/480 ≈ 0.625
  ══════════════════════════════ */
  .orbit-system {
    /* Keep original dimensions — transform-origin needs them */
    width: 480px;
    height: 520px;

    /* Scale the whole thing down proportionally */
    transform: scale(0.6);
    transform-origin: top center;

    /* Collapse the extra space the original size would take */
    margin-bottom: calc(-520px * 0.4); /* pull up by the scaled-away height */
    margin-top: 0;

    /* Don't clip the orbiting icons */
    overflow: visible;
  }

  /* Bubble repositions itself fine since it's inside the scaled container */


  /* ══════════════════════════════
     BENTO CARDS — 2-col grid
     Clock + Building side by side,
     Terminal full-width beneath.
  ══════════════════════════════ */
  .bento-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
    max-width: 420px;
  }

  .bento-clock    { grid-column: 1; }
  .bento-building { grid-column: 2; }
  .bento-terminal { grid-column: 1 / -1; }

  .bento-card {
    padding: 13px;
    border-radius: 13px;
  }

  /* Clock card */
  .b-clock-row  { gap: 10px; }
  .b-analog     { width: 38px; height: 38px; }
  .b-time       { font-size: 14px; }
  .b-sub        { font-size: 7px; }

  /* Building card */
  .b-build-row  { gap: 9px; margin-bottom: 8px; }
  .b-ring-svg   { width: 36px; height: 36px; }
  .bento-project-name { font-size: 16px; }
  .b-pct        { font-size: 8px; }
  .bento-stack  { gap: 3px; margin-bottom: 6px; }
  .bento-stack span { font-size: 6.5px; padding: 2px 5px; }
  .b-push       { font-size: 7.5px; gap: 5px; }
  .b-push-dot   { width: 4px; height: 4px; }

  /* Terminal card */
  .bento-terminal { min-height: 72px; }
  .b-term-prompt  { font-size: 8.5px; line-height: 1.9; }
  .b-term-out     { font-size: 8.5px; gap: 5px; min-height: 18px; }
  .b-cursor       { font-size: 10px; }

  /* Shared label */
  .bento-label  { font-size: 7.5px; letter-spacing: 1.5px; margin-bottom: 8px; }


  /* ══════════════════════════════
     ABOUT
  ══════════════════════════════ */
  .about-wrap {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 60px 24px;
  }

  .section-title {
    font-size: clamp(30px, 9vw, 46px);
    margin-bottom: 20px;
  }

  .about-p {
    font-size: 13.5px;
    line-height: 1.85;
    margin-bottom: 12px;
  }

  .about-photo {
    height: 300px;
    border-radius: 16px;
  }

  .stat-grid  { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
  .stat-box   { padding: 14px 12px; }
  .stat-n     { font-size: 34px; }
  .stat-l     { font-size: 9px; }


  /* ══════════════════════════════
     PROJECTS
  ══════════════════════════════ */
  .projects-wrap { padding: 60px 24px 70px; }

  .projects-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 28px;
  }

  .proj-grid { grid-template-columns: 1fr; gap: 14px; }

  .proj-phase-heading {
    font-size: 10px; letter-spacing: 1.5px; margin-bottom: 14px;
  }
  .proj-status-badge {
    font-size: 7px; padding: 2px 7px;
  }

  .proj-card {
    padding: 20px 18px;
    border-radius: 16px;
    transform: none !important;
    transition: border-color .3s, box-shadow .3s !important;
  }

  /* Preview bleed matches reduced card padding */
  .proj-preview {
    margin: -20px -18px 18px -18px;
    border-radius: 0;
  }
  .proj-preview-img-wrap { height: 140px; }

  .proj-num   { font-size: 9px; margin-bottom: 14px; }
  .proj-icon  { width: 38px; height: 38px; font-size: 17px; margin-bottom: 14px; border-radius: 10px; }
  .proj-title { font-size: 22px; margin-bottom: 8px; }
  .proj-desc  { font-size: 12.5px; line-height: 1.7; margin-bottom: 18px; }
  .tag        { font-size: 9px; padding: 3px 9px; }
  .proj-link  { font-size: 10px; letter-spacing: 1px; }


  /* ══════════════════════════════
     SKILLS
  ══════════════════════════════ */
  .skills-wrap { padding: 60px 24px 70px; }
  .skills-cloud { gap: 10px; }

  .sk {
    width: 72px !important;
    height: auto !important;
    padding: 12px 6px 9px !important;
    border-radius: 14px !important;
  }
  .sk svg { width: 25px !important; height: 25px !important; }
  .sk-name { font-size: .52rem !important; line-height: 1.3 !important; }


  /* ══════════════════════════════
     CONTACT
  ══════════════════════════════ */
  .contact-wrap { padding: 60px 24px 90px; }
  .contact-orb  { display: none; }

  .contact-title {
    font-size: clamp(42px, 12vw, 68px);
    line-height: 0.9;
    margin-bottom: 16px;
  }

  .contact-sub { font-size: 13px; margin-bottom: 32px; }

  .contact-email {
    font-size: 11.5px;
    padding: 15px 18px;
    word-break: break-all;
    display: block;
    margin-bottom: 24px;
    border-radius: 10px;
  }

  .socials { gap: 10px; }
  .soc     { width: 48px; height: 48px; border-radius: 12px; }


  /* ══════════════════════════════
     FOOTER
  ══════════════════════════════ */
  footer {
    padding: 20px 24px;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
  }

  .foot-logo { order: -1; margin-bottom: 2px; }
  .foot-l, .foot-r { font-size: 10px; }


  /* ══════════════════════════════
     PROJECTS PAGE
  ══════════════════════════════ */
  .page-header {
    padding: 96px 20px 36px;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .ph-title { font-size: clamp(56px, 14vw, 80px); }
  .page-header-right { display: none; }

  /* Filter tabs — scrollable row on mobile */
  .proj-filter-bar {
    margin: 0 0 20px;
    padding: 0 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .proj-filter-bar::-webkit-scrollbar { display: none; }
  .proj-filter-btn {
    flex-shrink: 0;
    font-size: 10px;
    padding: 7px 13px;
  }

  /* ── Option B: collapse two-column layout to single column ── */
  .projects-b-layout {
    grid-template-columns: 1fr;
  }
  .projects-b-left {
    border-right: none;
  }
  /* Hide the sticky preview panel entirely on mobile */
  .projects-b-right {
    display: none;
  }

  /* Stack: info on top, feature image below */
  .proj-row {
    display: block;
    min-height: unset;
  }
  .pr-info {
    padding: 20px 20px 24px;
    border-bottom: 1px solid var(--border);
  }

  /* Feature image — hidden on desktop, shown on mobile */
  .pr-img-mobile {
    display: block;
    height: 220px;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid var(--border);
  }
  .pr-img-mobile img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
  }
  .pr-img-mobile-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(var(--accent-rgb),.2) 0%, transparent 60%);
  }

  /* Typography adjustments */
  .pr-arrow { display: none; }
  .pr-phase-badge { font-size: 7px; padding: 2px 7px; }
  .pr-title { font-size: clamp(20px, 6vw, 28px); }
  .pr-tags  { gap: 4px; margin-top: 6px; }
  .pr-tag   { font-size: 9px; padding: 3px 8px; }

  /* ══════════════════════════════
     PROJECT OVERLAY — iOS fix
     position:fixed breaks when
     any ancestor has transform/
     filter (grain animation).
     Force layer isolation.
  ══════════════════════════════ */
  #proj-overlay {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100vw !important; height: 100vh !important;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    z-index: 9000 !important;
  }

  .ol-nav {
    position: sticky; top: 0;
    padding: 12px 20px;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--bg) !important;
    z-index: 10;
  }
  .ol-nav-id    { display: none; }
  .ol-type-badge { display: none; }
  .ol-close { padding: 8px 16px; font-size: 10px; gap: 6px; }

  .ol-hero { padding: 24px 20px 20px; }
  .ol-title { font-size: clamp(30px, 8vw, 48px); line-height: .9; margin-bottom: 20px; }
  .ol-meta-row { gap: 18px; margin-bottom: 16px; }
  .ol-meta-key { font-size: 7px; }
  .ol-meta-val { font-size: 12px; }

  .ol-visual { padding: 0 16px; }
  .ol-frame  { height: 200px; }
  .ol-frame-bar { font-size: 8px; padding: 6px 10px; }
  .ol-fc-tl, .ol-fc-tr, .ol-fc-bl, .ol-fc-br { width: 12px; height: 12px; }

  .ol-stats { grid-template-columns: 1fr; }
  .ol-stat  { padding: 12px 16px; }
  .ol-stat-num { font-size: 22px; }

  .ol-body { grid-template-columns: 1fr; margin-top: 20px; }
  .ol-main {
    padding: 28px 20px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .ol-aside { padding: 24px 20px; }
  .ol-desc  { font-size: 13.5px; line-height: 1.8; }
  .ol-feat  { grid-template-columns: 24px 1fr; gap: 10px; padding: 14px 0; }
  .ol-feat-title { font-size: 12px; }
  .ol-feat-desc  { font-size: 11px; }

  .ol-chip { font-size: 9.5px; padding: 4px 10px; }

  .ol-strip-section { padding: 24px 0 40px; }
  .ol-strip { padding: 4px 16px 12px; gap: 10px; }
  .ol-strip-item { width: 180px; height: 108px; border-radius: 4px; }

  #lightbox { z-index: 9999 !important; }
  #lightbox img { max-width: 96vw; max-height: 80vh; }
  #lightbox-close { top: 14px; right: 14px; padding: 6px 14px; font-size: 9px; }

}


/* ── Very small phones ≤ 390px ── */
@media (max-width: 390px) {

  .hero-layout { padding: 84px 18px 44px; }
  .hero-name   { font-size: clamp(50px, 15vw, 72px); }

  /* Scale down a touch more on tiny screens */
  .orbit-system {
    transform: scale(0.52);
    margin-bottom: calc(-520px * 0.48);
  }

  .bento-cards  { max-width: 100%; gap: 8px; }

  .b-analog     { width: 34px; height: 34px; }
  .b-time       { font-size: 13px; }

  .b-ring-svg   { width: 32px; height: 32px; }
  .bento-project-name { font-size: 14px; }

  .b-term-prompt,
  .b-term-out   { font-size: 8px; }

  .projects-wrap,
  .skills-wrap,
  .contact-wrap,
  .about-wrap { padding-left: 18px; padding-right: 18px; }

  .ol-hero  { padding: 20px 16px 18px; }
  .ol-title { font-size: clamp(26px, 7vw, 38px); }
  .ol-visual { padding: 0 12px; }
  .ol-frame  { height: 170px; }
  .ol-main, .ol-aside { padding-left: 16px; padding-right: 16px; }
  .ol-strip  { padding-left: 12px; padding-right: 12px; }
  .ol-strip-item { width: 160px; height: 96px; }
}

/* ════════════════════════════════════════════════════════════════
   ABOUT PAGE — mobile.css additions
   These work alongside about.html's inline <style> mobile blocks.
   about.html must have: <link rel="stylesheet" href="mobile.css">
════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ══════════════════════════════
     ABOUT PAGE — NAV
     (handled by the shared nav rules
     at the top of this file)
  ══════════════════════════════ */


  /* ══════════════════════════════
     ABOUT HERO — scanline subtlety
     Less heavy on small screens
  ══════════════════════════════ */
  .photo-scan::after {
    height: 2px;
  }
  .photo-lines {
    opacity: 0.6;
  }


  /* ══════════════════════════════
     BIOGRAPHY — quick-facts card
     Tighter on mobile but still
     very readable
  ══════════════════════════════ */
  .bio-fact {
    padding: 11px 14px;
    gap: 12px;
  }
  .bio-fact-icon {
    width: 26px; height: 26px; border-radius: 6px;
    flex-shrink: 0;
  }
  .bio-fact-key { font-size: 8px; }
  .bio-fact-val { font-size: 11.5px; }

  /* Stats number tweak */
  .stat-n { font-size: 38px; }
  .stat-l { font-size: 8.5px; letter-spacing: 1px; }


  /* ══════════════════════════════
     EDUCATION TIMELINE
     Collapse the dot/track a bit
  ══════════════════════════════ */
  .tl-item { margin-bottom: 28px; }
  .tl-year { font-size: 8px; }
  .tl-school { font-size: 10.5px; }
  .tl-badge { font-size: 8.5px; padding: 3px 10px; }


  /* ══════════════════════════════
     THESIS SPOTLIGHT
     Mockup scales gracefully
  ══════════════════════════════ */
  .thesis-mockup { border-radius: 14px; }
  .thesis-mockup-bar { padding: 8px 12px; }
  .tmb-dot { width: 7px; height: 7px; }
  .thesis-map { height: 130px; }
  .thesis-data-row { gap: 8px; }
  .thesis-data-label { font-size: 8.5px; width: 74px; }
  .thesis-data-pct   { font-size: 8.5px; }
  .thesis-tag { font-size: 8.5px; }
  .thesis-desc { font-size: 13px; }


  /* ══════════════════════════════
     SKILLS
     Cards feel slightly less boxy
  ══════════════════════════════ */
  .skill-item { gap: 9px; }
  .skill-icon {
    width: 26px; height: 26px; border-radius: 6px;
  }
  .skill-icon svg { width: 14px; height: 14px; }
  .skill-bar { height: 2px; }


  /* ══════════════════════════════
     VALUES / PHILOSOPHY
     Full-bleed card borders on mobile
  ══════════════════════════════ */
  .values-grid {
    border-radius: 12px;
    overflow: hidden;
  }
  .value-card:last-child { border-bottom: none; }
  .value-num { font-size: 38px; margin-bottom: 10px; }


  /* ══════════════════════════════
     BEYOND THE CODE
     2-col cards, compact content
  ══════════════════════════════ */
  .beyond-card-glow { width: 60px; height: 60px; }
  .beyond-card:hover { transform: none; box-shadow: none; }
  .beyond-card:active { border-color: rgba(var(--accent-rgb), .3); }


  /* ══════════════════════════════
     CTA SECTION
     Tighten the orb so it doesn't
     blow out the mobile layout
  ══════════════════════════════ */
  .cta-orb {
    width: 280px; height: 180px;
  }
  .cta-label { font-size: 9px; }
  .btn-fire  { font-size: 13px; gap: 7px; }
  .btn-ghost { font-size: 13px; }


  /* ══════════════════════════════
     SECTION LABEL
     Shorten the trailing line on
     small screens so it doesn't
     look awkward
  ══════════════════════════════ */
  .section-label::after {
    max-width: 60px;
  }

}


/* ── Very small phones ≤ 390px ── */
@media (max-width: 390px) {

  .nav-links a,
  .nav-center a {
    font-size: 9px;
    padding: 6px 11px;
    letter-spacing: .6px;
  }

  .bio-quote  { font-size: clamp(22px, 7vw, 32px); }
  .bio-fact   { padding: 9px 12px; }
  .bio-fact-val { font-size: 11px; }

  .value-card { padding: 22px 18px; }
  .value-num  { font-size: 34px; }
  .value-title { font-size: 18px; }

  .beyond-grid { grid-template-columns: 1fr; }

  .thesis-map { height: 110px; }
  .thesis-title { font-size: clamp(24px, 7vw, 36px); }

  .cta-title { font-size: clamp(38px, 12vw, 58px); }

  .tl-content { padding: 14px 16px; }
  .tl-degree  { font-size: 20px; }
}