/* v23 (16 Oct): phone and tablet layout.
   Every rule sits inside a max-width query, so the desktop site is unchanged.
   Breakpoints follow the rest of the site: 940px (tablet / menu) and 640px (phones). */

html,body{overflow-x:clip}

@media(max-width:940px){
  /* ---------- menu: a full-screen sheet under the header ---------- */
  html.menu-open{overflow:hidden}
  /* the header's blur would trap the sheet inside the header, so drop it while the menu is open */
  .site-header:has(.nav-main.open),html.menu-open .site-header{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}
  .site-header .nav-main.open{position:fixed;left:0;right:0;top:var(--hdr,85px);bottom:0;z-index:49;margin:0;padding:6px 20px calc(28px + env(safe-area-inset-bottom));background:#fff;overflow-y:auto;overscroll-behavior:contain;border-top:1px solid var(--rule);animation:fv-sheet .28s var(--ease)}
  @keyframes fv-sheet{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  /* menu links in the headline face, like the desktop species menu */
  .site-header .nav-main.open>a:not(.m-store),.site-header .nav-main.open .dd-btn{font-family:var(--head);font-weight:400;font-size:1.65rem;line-height:1;letter-spacing:-.02em;text-transform:uppercase;color:var(--navy);padding:17px 0;border-top:1px solid var(--rule)}
  .site-header .nav-main.open>a:first-child{border-top:0}
  .site-header .nav-main.open>a:not(.m-store):after{display:none}
  .site-header .nav-main.open>a[aria-current=page]{color:var(--jungle)}
  .site-header .nav-main.open .dd-btn span{font-family:var(--mono);font-size:.9rem;color:var(--jungle)}
  /* species list inside the menu: photo, name, no big preview image */
  .site-header .nav-main .dd-menu .mm{display:block}
  .site-header .nav-main .dd-menu .mm-media{display:none}
  .site-header .nav-main .dd-menu{padding:0 0 12px}
  .site-header .nav-main .mm-list{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}
  .site-header .nav-main .mm-list a{display:flex;align-items:center;gap:10px;padding:8px 0;font-family:var(--mono);font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);border:0}
  .site-header .nav-main .mm-list a img{display:block;width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none}
  .site-header .nav-main .mm-list .dd-more{grid-column:1/-1;color:var(--navy);border-top:1px solid var(--rule)!important;margin-top:6px;padding-top:14px}
  .site-header .nav-main .m-store{min-height:52px;display:flex!important;align-items:center;justify-content:center;font-size:.8rem;letter-spacing:.14em;background:var(--jungle);color:#fff;border-radius:4px}
  .site-header .nav-main .m-store+.m-store{margin-top:10px}
  .site-header .nav-main .m-store:first-of-type{margin-top:22px}
}

@media(max-width:640px){
  /* ---------- type ---------- */
  /* short headline lines stay as written (mobile.js adds .ln-keep only when a small size cut makes them fit) */
  .ln-keep .ln>span{white-space:nowrap}
  h1,h2{text-wrap:balance}
  .final h2{font-size:clamp(2rem,10vw,2.7rem)}
  .lead,.section-lead{font-size:1.08rem}

  /* ---------- homepage ---------- */
  /* stats: two even columns that stay inside the margins */
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .stat{padding:24px 10px 22px}
  .stat .num{font-size:clamp(3rem,15vw,4.2rem)}
  .stat .unit{font-size:1.15rem;margin:6px 0 10px}
  .stat p{font-size:.64rem;letter-spacing:.1em;max-width:none}
  /* layered photo + film: less empty space around it */
  .layer{gap:36px}
  .layer-art{aspect-ratio:1/.88}
  /* species tiles and the "more species" card read cleanly at half width */
  .flip-grid{gap:12px}
  .flip-front .nm{left:12px;right:12px;bottom:12px}
  .flip-back{padding:16px 14px}
  .flip-back h3{font-size:1.15rem;margin-bottom:8px}
  .flip-back ul{font-size:.84rem}
  .flip-back li{padding:6px 0}
  .flip-cta{padding:18px 14px}
  .flip-cta h3{font-size:1.3rem}
  .flip-cta p{font-size:.88rem;line-height:1.45}

  /* ---------- How it works: phone demos swipe sideways ---------- */
  .phone-demo-section{padding:72px 0}
  .phone-demo-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:4px 16px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .phone-demo-grid::-webkit-scrollbar{display:none}
  .phone-demo-card{flex:0 0 82%;scroll-snap-align:center}
  .phone-demo-hint{display:flex;align-items:center;gap:10px;margin:-28px 0 18px;font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--navy)}
  .phone-demo-dots{display:flex;justify-content:center;gap:8px;margin-top:10px}
  .phone-demo-dots i{width:8px;height:8px;border-radius:50%;background:var(--rule-d);transition:background .3s,transform .3s}
  .phone-demo-dots i.on{background:var(--jungle);transform:scale(1.25)}

  /* ---------- Coming next: shorter tiles so the list is easier to scroll ---------- */
  .nx.nx-flip{aspect-ratio:5/4}
  .nx-grid{gap:12px}

  /* ---------- footer: link columns side by side ---------- */
  .footer-main{grid-template-columns:1fr 1fr;gap:36px 20px}
  .footer-brand{grid-column:1/-1}
  .footer-links{gap:12px}
  .site-footer{padding:64px 0 28px}
}