/* =========================================================================
   mobile.css — site-wide responsive / touch / performance layer.
   Loaded LAST on every page so it wins the cascade. Three concerns:
   1) touch ergonomics + modern mobile nav drawer
   2) paint-cost reduction on coarse-pointer devices (no backdrop blur,
      no cursor-glow layers, native scrolling)
   3) layout polish for small screens across every custom component
   ========================================================================= */

/* drawer-only nav content must never show outside the mobile drawer
   (this list item is injected by site.js on every device) */
.nav-links .nd-extra{display:none}

/* ---------- touch devices (any size) ---------- */
@media (pointer: coarse) {
  /* Hand scrolling back to the platform.
     The desktop gold bar is a design element; on a phone it became a permanent
     stripe down the edge because site.css also reserves a gutter
     (scrollbar-gutter:stable) and paints a track + gradient thumb. Phones use
     transient overlay scrollbars, so the whole custom treatment is dropped —
     including the reserved gutter, which was showing as a bare strip. */
  html{scrollbar-width:none;scrollbar-color:auto;scrollbar-gutter:auto}
  body{scrollbar-width:none}
  ::-webkit-scrollbar{width:0;height:0;background:transparent}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:transparent;border:0;box-shadow:none}
  ::-webkit-scrollbar-corner{background:transparent}

  html{-webkit-tap-highlight-color:transparent}

  /* backdrop-filter is a battery killer on mobile GPUs -> solid surfaces */
  .card,.price-card,.form-card,.ribbon,.modal-box,.track,.vidc{
    -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
    background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.02)) !important}
  .nav.scrolled{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(8,8,8,.97)}

  /* cursor-follow glow layers are pointless without a cursor */
  .card::after,.price-card::after,.track::after,.vidc::after,
  .form-card::after,.show-detail::after,.btn::before{display:none !important}

  /* hover-lift resets that can stick after taps */
  .card:hover,.price-card:hover,.contact-grid .ci:hover{transform:none}

  /* carousels: swipe instead of arrows */
  .ovf-arrow{display:none}
  .ovf-row{-webkit-overflow-scrolling:touch}

  /* comfortable tap targets */
  .btn{min-height:44px}
  .foot .socials a{width:44px;height:44px}
  .ct-pill{min-height:44px}
}

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  /* normalize the global 80% zoom on phones — full-size type is more readable
     and standard; layout is already fluid via clamps + stacked grids */
  body{zoom:1}
  .nav-in{zoom:1}
  #splash{zoom:1}

  /* iOS zooms the page when focused inputs are <16px — prevent it */
  input,select,textarea{font-size:16px !important}

  /* The canvas is CSS-blurred (20px). At exactly viewport size the blur has
     nothing to sample past the edges, so it fades to transparent and the page
     shows through as pale bands down the sides. Desktop hides this by making
     the canvas 140vw; mobile needs its own overscan. The veil and grain are
     plain gradients with no blur, so they can sit at exact viewport size. */
  #bg-canvas{width:120vw;height:120dvh;left:-10vw;top:-10dvh;filter:blur(14px)}
  #bg-veil,#grain-motion{width:100vw;height:100dvh;left:0;top:0}

  /* skip offscreen rendering work for below-fold sections */
  section:not(.hero){content-visibility:auto;contain-intrinsic-size:auto 640px}

  /* ---------- modern nav drawer (full-screen, editorial) ---------- */
  .nav{background:rgba(8,8,8,.9)}
  .nd-extra{display:none}                        /* drawer-only content */
  .nav-links.open{
    position:fixed;top:0;left:0;right:0;bottom:0;z-index:55;
    display:flex;flex-direction:column;justify-content:flex-start;gap:0;
    padding:92px clamp(24px,7vw,40px) 40px;border-bottom:0;
    background:
      radial-gradient(120% 60% at 50% 0%,rgba(217,164,65,.07),transparent 60%),
      #060608;
    overflow-y:auto;overscroll-behavior:contain;animation:navDrawer .35s var(--ease)}
  @keyframes navDrawer{from{opacity:0;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0)}}
  .nav-links.open{counter-reset:nd}
  .nav-links.open li{width:100%;list-style:none;
    opacity:0;transform:translateY(16px);animation:ndItem .45s var(--ease) forwards}
  .nav-links.open li:nth-child(1){animation-delay:.06s}
  .nav-links.open li:nth-child(2){animation-delay:.11s}
  .nav-links.open li:nth-child(3){animation-delay:.16s}
  .nav-links.open li:nth-child(4){animation-delay:.21s}
  .nav-links.open li:nth-child(5){animation-delay:.26s}
  .nav-links.open li:nth-child(6){animation-delay:.31s}
  .nav-links.open li:nth-child(7){animation-delay:.38s}
  @keyframes ndItem{to{opacity:1;transform:none}}
  .nav-links.open > li > a{
    display:flex;align-items:baseline;gap:16px;width:100%;padding:15px 4px;
    font-size:clamp(1.7rem,7.5vw,2.3rem);line-height:1.1;color:#fff;
    font-family:"Advent Pro",sans-serif;font-weight:600;letter-spacing:.03em;
    border-bottom:1px solid rgba(255,255,255,.07)}
  .nav-links.open > li > a::before{
    counter-increment:nd;content:"0" counter(nd);
    font-size:.68rem;font-weight:400;color:var(--acc);letter-spacing:.18em;
    font-variant-numeric:tabular-nums;min-width:2em}
  .nav-links.open > li > a.active{color:var(--acc)}
  .nav-links.open a::after{display:none}
  /* drawer footer: CTA + socials + contact + ghost brand */
  .nav-links.open .nd-extra{display:block;margin-top:auto;padding-top:34px;position:relative}
  .nav-links.open .nd-cta{display:flex;justify-content:center;width:100%;min-height:52px;
    font-size:1rem;margin-bottom:22px}
  .nav-links.open .nd-socials{display:flex;justify-content:center;gap:14px}
  .nav-links.open .nd-socials a{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
    border:1px solid rgba(255,255,255,.16);color:#fff;font-size:1.15rem;padding:0}
  .nav-links.open .nd-socials a:active{background:var(--acc);color:#12100a;border-color:var(--acc)}
  .nav-links.open .nd-contact{text-align:center;margin-top:18px;color:var(--f3);
    font-size:.74rem;letter-spacing:.22em}
  .nav-links.open .nd-brandmark{margin-top:20px;text-align:center;pointer-events:none;
    font-family:"Advent Pro",sans-serif;font-weight:700;font-size:clamp(3rem,16vw,5rem);line-height:1;
    color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.07)}
  /* burger -> X (burger stays above the drawer) */
  .nav{z-index:70}
  .nav .brand,.nav .nav-cta{position:relative;z-index:80}   /* clickable over the drawer */
  .nav-links.open ~ .nav-cta .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-links.open ~ .nav-cta .burger span:nth-child(2){opacity:0}
  .nav-links.open ~ .nav-cta .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  body.menu-open{overflow:hidden}

  /* top-bar CTA hidden on mobile — it lives in the open drawer (nd-cta) instead */
  .nav-cta .btn{display:none}

  /* Landing hero overlay — desktop's exact recipe, rotated into portrait.
     Desktop layer 1 is a 100deg wash: heavy on the LEFT where the headline
     sits, opening to .34 on the right so the mesh glows beside it. On a phone
     the headline stacks at the BOTTOM instead, so the same wash runs 10deg
     (bottom -> top) with identical stops: shadow behind the type, mesh
     breathing above it. Layer 2 keeps desktop's vertical frame (nav + marquee)
     with the bottom eased from .95, since layer 1 now also darkens down there
     and the two would otherwise compound to solid black across the whole
     width rather than just one corner.

     Layer 2's TOP needs a longer, heavier ramp than desktop's. Rotating layer
     1 into portrait moved its lightest stop (.34) to the top of the frame —
     which is exactly where the nav bar sits. Measured down the hero, that left
     the strip under the nav at luminance ~30 against the nav's own ~9 bar: a
     visible horizontal seam right at its lower edge. Holding .80 through the
     bar and easing out over 60% instead of 26% puts the nav in darkness and
     hands the mesh back gradually. The bottom stop is unchanged — the marquee
     already sits at luminance ~1. */
  .hero::after{background:
    linear-gradient(10deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.62) 46%,rgba(0,0,0,.34) 100%),
    linear-gradient(180deg,#000 0%,rgba(0,0,0,.88) 8%,rgba(0,0,0,.45) 24%,rgba(0,0,0,.12) 44%,
      transparent 72%,rgba(0,0,0,.55) 90%,#000 100%)}

  /* ---------- modern mobile footer ---------- */
  .foot{padding-top:44px;padding-bottom:30px}
  .foot .foot-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px 24px}
  /* brand block spans full width, centered, on top */
  .foot .foot-grid > div:first-child{grid-column:1/-1;display:flex;flex-direction:column;
    align-items:center;text-align:center;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.07);
    padding-left:0;padding-right:0}   /* cancel the desktop padding-right — it skewed the centred block left */
  /* columns hidden (foot-solo): no divider needed under the brand block */
  .foot .foot-grid.foot-solo > div:first-child{border-bottom:0;padding-bottom:0}
  /* "desktop only" mode: link columns exist in the DOM but hide on phones */
  .foot .foot-grid.foot-cols-desk > div:not(:first-child){display:none}
  .foot .foot-grid.foot-cols-desk > div:first-child{border-bottom:0;padding-bottom:0}
  .foot .brand{justify-content:center;margin-bottom:6px}
  .foot .brand img.bd{display:none}
  .foot .brand img.bm{display:block;width:min(230px,70vw);max-width:none}
  .foot .brand b{font-size:1.7rem}
  /* the full postal address is desktop detail; phones keep the footer tight
     (Contact + the map link in the drawer already cover "where are you") */
  .foot .foot-addr{display:none}
  .foot .socials{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:22px;width:100%}
  .foot .socials a{width:46px;height:46px;font-size:1.05rem;flex:0 0 auto;border:1px solid var(--line2);border-radius:50%}
  .foot .socials a::after{display:none}   /* no hover tooltip on touch */
  /* link columns: clean stacked lists, tidy 2-up, everything centered */
  .foot .foot-grid > div:not(:first-child){text-align:center}
  .foot .foot-grid h5{margin:0 0 14px;color:var(--acc);font-size:.64rem;letter-spacing:.24em;
    text-transform:uppercase;font-weight:600}
  .foot .foot-grid ul{margin:0;padding:0;list-style:none}
  .foot .foot-grid ul li{margin:0}
  .foot .foot-grid ul li a{display:inline-flex;align-items:center;justify-content:center;
    min-height:38px;color:var(--f2);font-size:.88rem;transition:color .2s var(--ease)}
  .foot .foot-grid ul li a:active{color:var(--acc)}
  .foot .foot-bot{margin-top:32px;padding-top:22px;border-top:1px solid rgba(255,255,255,.07);
    font-size:.72rem;color:var(--f3);gap:6px}
  .foot .foot-bot .legal-links{display:none}   /* keep the © line short on phones */

  /* ---------- homepage bits ---------- */
  .hero-bottom .hero-socials{display:none}          /* tooltips/hover UX are desktop-only */
  .hero-bottom .hero-socials + .marquee,
  .hero-bottom .marquee{padding-right:0;
    -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  /* kinetic bg rows: bigger type, spread evenly so they cover the whole
     section instead of a thin band in the middle */
  .ct-bg{opacity:.5;justify-content:space-evenly;gap:0}
  .ct-bgrow{font-size:clamp(2.4rem,13vw,4rem);line-height:1}
  .ct-mail{font-size:clamp(1.4rem,7.5vw,2.1rem);word-break:break-word;padding:6px 0}
  .endnote h2{font-size:clamp(1.35rem,7vw,2rem)}

  /* ---------- shared components ---------- */
  .section-head h2{font-size:clamp(1.55rem,7vw,2rem)}
  .banner{min-height:auto;padding-top:96px}
  .media-carousel{aspect-ratio:16/11;min-height:240px}
  .show-item{padding:14px 14px}
  .show-item .si-t{font-size:.94rem}
  .show-panel{padding:22px 20px}
  .show-panel .p-num{font-size:2.6rem;top:14px;right:18px}
  .show-panel .p-head{gap:12px;margin-bottom:14px}
  .show-panel .p-ic{width:46px;height:46px;font-size:1.2rem}
  .art-head h2{font-size:clamp(1.55rem,7.5vw,2.2rem)}
  .art-body{font-size:.98rem;line-height:1.7}
  .art-body .dropcap::first-letter{font-size:3.4rem;padding-right:10px}
  .art-body .pull{font-size:clamp(1.15rem,5.5vw,1.5rem);padding:16px 0}
  .tm-track span{font-size:1rem}
  .enquiry-wrap .form-card{padding:22px 18px}
  .form-card{padding:22px 18px}
  .ovf-row > *{width:min(270px,82vw)}
  .gallery{gap:8px}
  .nav-more-drop{position:static;display:block;background:transparent;border:0;box-shadow:none;padding:0;margin:0}

  /* ---------- music: swipeable inertial row (free momentum, no snap-per-card) ---------- */
  .track-grid{display:flex !important;grid-template-columns:none !important;gap:12px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:none !important;
    padding:4px 2px 14px;scrollbar-width:none;overscroll-behavior-x:contain;
    -webkit-mask:linear-gradient(90deg,#000 90%,transparent);
    mask:linear-gradient(90deg,#000 90%,transparent)}
  .track-grid::-webkit-scrollbar{display:none}
  .track-grid > *{flex:0 0 44vw;max-width:210px;scroll-snap-align:none}
  .track .meta{padding:12px 12px 14px}
  .track .meta .t{font-size:.88rem;line-height:1.25;display:block;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
  .track .meta .s{font-size:.7rem;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* videos: 2-up tiles (6 videos -> 3 quick rows instead of a long column) */
  .vid-grid{grid-template-columns:1fr 1fr !important;gap:12px}
  .vidc .meta{padding:10px 12px 12px}
  .vidc .meta .t{font-size:.85rem;line-height:1.25}
  .vidc .meta .s{font-size:.7rem;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* ---------- card inner alignment ---------- */
  .card:not(.center){display:flex;flex-direction:column;align-items:flex-start}
  .card:not(.center) .btn{width:100%;justify-content:center;margin-top:16px !important;align-self:stretch !important}
  .card.center{text-align:center}
  .card.center img{width:100%}
  .card.center h3,.card.center p{text-align:center}
  .price-card .pc-head{text-align:center}
  .price-card .badge{margin-left:auto;margin-right:auto}
  .price-card .price{font-size:2.2rem}
  .price-card .btn{width:100%;justify-content:center}
  .stat-row{justify-content:space-between;width:100%}
  .stat{text-align:center;flex:1}
  /* e-book ribbon: center the price + button row */
  .ribbon .rin{text-align:center}
  .ribbon .rin > div > div[style*="flex"]{justify-content:center;align-items:center}
  .ribbon .rin .btn{width:100%;justify-content:center}
  /* e-book page hero: center price block */
  #eb-title ~ div[style*="flex"],
  .banner .split-text > div[style*="flex"]{justify-content:center}

  /* ---------- contact: modern card-grid (email / pills / meta / clock) ---------- */
  .ct-body{text-align:center;padding:clamp(64px,14vw,110px) 0 clamp(40px,8vw,60px)}
  .ct-body .eyebrow{justify-content:center}
  .ct-mail{font-weight:500;margin-top:10px}
  /* pills become a 2-col grid of icon-over-label chips — always in the
     "active" gold state on touch (there is no hover on mobile) */
  .ct-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:360px;margin:24px auto 0}
  .ct-pill{flex-direction:row;justify-content:center;gap:8px;width:auto;min-height:42px;
    padding:9px 16px;border-radius:100px;font-size:.78rem;font-weight:500;
    background:var(--acc);border-color:var(--acc);color:#0e0a03;text-align:center;line-height:1.2}
  .ct-pill i{font-size:.95rem;color:#0e0a03}
  /* location + live time: plain centered text, no card chrome */
  .ct-meta{display:flex;flex-direction:column;align-items:center;gap:4px;margin:22px auto 0;max-width:420px;
    padding:0;border:0;border-radius:0;background:transparent;
    text-align:center;text-transform:none;letter-spacing:.04em}
  .ct-meta span{display:block;font-size:.74rem;color:var(--f2)}
  .ct-clock{font-size:1.15rem;letter-spacing:.14em;display:inline-block;margin-top:2px}

  /* footer: single column rhythm + centered bottom bar */
  .foot .wrap{text-align:center}
  /* lockup is ~5.8:1 — size it by width so the aspect ratio stays intact */
  .foot .brand img.bd{display:none}
  .foot .brand img.bm{display:block;width:min(210px,66vw);height:auto}
  .foot .foot-addr{line-height:1.7;font-size:.88rem}
  .foot-bot{flex-direction:column;gap:10px;text-align:center;align-items:center;justify-content:center}
}

/* ---------- small screens: per-page / per-component polish ---------- */
@media (max-width: 760px) {
  /* homepage hero: full viewport, not 125svh of mostly-empty space */
  .hero{min-height:100svh}

  /* path cards ("Choose Your Path"): shorter so three stack comfortably */
  .path{min-height:300px}
  .path .pin{padding:24px 22px}
  .path h3{font-size:1.4rem}

  /* reviews rotator: don't reserve a huge block */
  .reviews{min-height:150px;margin-top:40px}
  .rev-quote{font-size:1.15rem}

  /* split sections (about/intro): eyebrow + title first, then the picture,
     then the full description — reads like an article. (.split-text becomes
     display:contents so its children can be ordered around the media; banner
     splits are untouched.) */
  section .split:has(> .split-media, > .media-carousel) > .split-text{display:contents}
  section .split:has(> .split-media, > .media-carousel) > .split-text .eyebrow{order:-3}
  section .split:has(> .split-media, > .media-carousel) > .split-text h2{order:-2}
  section .split:has(> .split-media, > .media-carousel) > .split-media,
  section .split:has(> .split-media, > .media-carousel) > .media-carousel{order:-1;margin:2px 0 8px}
  /* CTA (e.g. "About the Academy") centered */
  section .split:has(> .split-media, > .media-carousel) > .split-text .btn{justify-self:center;margin-left:auto;margin-right:auto}

  /* e-book page hero: crumb + title + subtitle first, then the cover,
     then price + buttons + note (split-text becomes display:contents so its
     children can be ordered around the cover) */
  .banner .split{gap:20px}
  .banner .split:has(> .split-media) > .split-text{display:contents}
  .banner .split:has(> .split-media) > .split-text .crumb{order:-5}
  .banner .split:has(> .split-media) > .split-text .eyebrow{order:-4}
  .banner .split:has(> .split-media) > .split-text h1{order:-3}
  .banner .split:has(> .split-media) > .split-text #eb-sub{order:-2}
  .banner .split:has(> .split-media) > .split-media{order:-1;margin:4px 0 2px}
  .banner .split:has(> .split-media) > .split-text > *{text-align:center}
  #eb-title{font-size:2.1rem !important}
  .banner .split:has(> .split-media) > .split-text .eyebrow{justify-content:center}
  .banner .split-media{justify-content:center;padding-bottom:6px}
  #eb-cover{width:min(230px,62vw) !important}
  .banner[style*="min-height"]{min-height:100svh !important}

  /* checkout modal -> bottom sheet */
  .modal{padding:0;align-items:flex-end}
  .modal-box{max-width:none;max-height:94svh;border-radius:20px 20px 0 0;padding:24px 18px 30px}

  /* studio gallery: keep the 2-up grid tight */
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery .wide{grid-column:span 2}

  /* tools marquee rows breathe less */
  .tools-marquee{gap:10px}

  /* approach showcase list items: comfortable tap targets */
  .show-item{min-height:52px}
  .show-detail{min-height:0}
  .show-panel{position:relative;inset:auto;display:none}
  .show-panel.on{display:flex}

  /* forms: full-bleed friendly */
  .form-card .btn-block{min-height:50px}

  /* products grid on the e-book page: single column cards with 16/10 images */
  #product-grid .card img{aspect-ratio:16/9}

  /* endnote spacing */
  .endnote{padding:56px 0}

  /* show-more button full width for thumbs */
  .ovf-more-wrap .btn{width:min(320px,86vw);justify-content:center}

  /* ---------- card-toss stacks (grids tagged data-toss; built by reactive.js) ---------- */
  .grid.toss{display:block !important;position:relative;height:410px;
    max-width:272px;margin:0 auto;perspective:900px}
  .toss .toss-card > div{padding:16px !important}
  .toss .toss-card{position:absolute;inset:0;margin:0;
    display:flex !important;flex-direction:column;
    background:#101216 !important;-webkit-backdrop-filter:none;backdrop-filter:none;
    transition:transform .55s var(--ease),opacity .45s ease,filter .45s ease;
    will-change:transform,opacity,filter;backface-visibility:hidden;
    box-shadow:0 18px 44px rgba(0,0,0,.45)}
  .toss .toss-card.no-anim{transition:none !important}
  /* safety net: if a stack is ever left with un-stacked children (a renderer
     that replaced them without rebuilding), fall back to normal flow instead
     of clipping them inside the fixed stack height */
  .grid.toss:not(:has(.toss-card)){height:auto;max-width:none;display:grid !important}
  /* photo fills whatever the text doesn't need — name/role/socials never clip */
  .toss .toss-card img{aspect-ratio:auto;flex:1;min-height:0;
    object-fit:cover;object-position:top center;width:100%}
  .toss .toss-card > div{flex:0 0 auto}
  /* dots: one per member, gold pill = the card currently on top */
  .toss-dots{display:flex;justify-content:center;gap:9px;margin:18px 0 0}
  .toss-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25);
    cursor:pointer;transition:width .3s var(--ease),background .3s}
  .toss-dots i.on{background:var(--acc);width:22px;border-radius:5px}
}
/* dots exist only when the stack is built (mobile) — hide if a rotate leaves them */
@media (min-width: 761px){ .toss-dots{display:none} }

/* ---------- large desktops ----------
   the global 80% render scale reads too "zoomed-out" on full-HD+ screens —
   scale back up as the viewport grows */
@media (min-width: 1600px) {
  body{zoom:.9}
  .nav-in{zoom:1.03}
  #splash{zoom:1.12}
}
@media (min-width: 2200px) {
  body{zoom:1}
  .nav-in{zoom:1}
  #splash{zoom:1}
}

/* ---------- very small phones ---------- */
@media (max-width: 400px) {
  .wrap{padding-left:18px;padding-right:18px}
  .banner h1{font-size:2rem}
  .hero h1{font-size:2.3rem}
  .stat-row{gap:14px}
  .ct-meta{gap:6px 16px;font-size:.64rem}
}

/* ---------- landscape phones ---------- */
@media (max-height: 480px) and (max-width: 900px) {
  .banner{min-height:auto}
  .nav-links.open{top:52px}
}