/* ─────────────────────────────────────────────────────────
   mobile.css · puzaosi
   Mobile/tablet overrides (≤860px). Keeps the desktop visual
   language: lime accent, mono captions, sharp grid, char-scramble
   animations. Adapts layout to single-column where needed.
   ───────────────────────────────────────────────────────── */

/* ── hamburger button (mobile only) ────────────────────────── */
.mob-burger{
  display:none;
  width:44px;height:44px;border:1px solid var(--line);border-radius:50%;
  background:rgba(10,10,12,.55);backdrop-filter:blur(10px);
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  cursor:pointer;transition:all .35s var(--ease);position:relative;z-index:101;
}
.mob-burger span{display:block;width:18px;height:1.5px;background:var(--accent);transition:transform .45s var(--ease),opacity .25s}
.mob-burger.on span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.mob-burger.on span:nth-child(2){opacity:0}
.mob-burger.on span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* full-screen mobile menu overlay */
.mob-sheet{
  position:fixed;inset:0;z-index:95;
  background:rgba(10,10,12,.96);backdrop-filter:blur(20px);
  display:flex;flex-direction:column;justify-content:center;
  padding:120px 36px 48px;gap:0;
  opacity:0;pointer-events:none;
  transition:opacity .45s var(--ease);
}
.mob-sheet.on{opacity:1;pointer-events:auto}
.mob-sheet a{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:22px 0;border-bottom:1px solid var(--line-soft);
  font-family:var(--display);font-weight:700;font-size:34px;letter-spacing:-.01em;
  color:#fff;text-transform:lowercase;
  transform:translateY(28px);opacity:0;
  transition:all .55s var(--ease);
}
.mob-sheet a small{display:none}
.mob-sheet.on a{transform:none;opacity:1}
.mob-sheet.on a:nth-child(1){transition-delay:.08s}
.mob-sheet.on a:nth-child(2){transition-delay:.15s}
.mob-sheet.on a:nth-child(3){transition-delay:.22s}
.mob-sheet.on a:nth-child(4){transition-delay:.29s}
.mob-sheet a.cta{margin-top:24px;background:var(--accent);color:#000;border-radius:999px;padding:18px 28px;font-size:20px;border:0;justify-content:center}
.mob-sheet a.cta small{color:#000;opacity:.7}
.mob-sheet .mob-foot{
  margin-top:auto;padding-top:32px;display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.32em;color:var(--faint);text-transform:uppercase;
}

/* ═════════════════════════════════════════════════════════════
   ≤860px — TABLET / PHONE
   ═════════════════════════════════════════════════════════════ */
@media (max-width:860px){

  body{cursor:auto}
  .cursor,.cursor-ring,.side-r,.rail{display:none !important}

  /* ── nav ─────────────────────────────────────────────────── */
  .nav{padding:14px 20px}
  .nav.scrolled{padding:10px 20px}
  .nav .brand{font-size:13px}
  .nav .menu{display:none}
  .nav.nav-menu-visible .menu{
    position:absolute;right:74px;top:50%;transform:translateY(-50%);
    display:flex;gap:4px;opacity:1;visibility:visible;pointer-events:auto;
    max-width:calc(100vw - 190px);overflow:hidden;
  }
  .nav.nav-menu-visible .menu a{
    padding:8px 10px;font-size:11px;letter-spacing:.12em;white-space:nowrap;
  }
  .nav.nav-menu-visible .menu a.cta span{display:none}
  .mob-burger{display:flex}

  /* ── ticker (keep — feels native to brand) ──────────────── */
  .ticker-bar{height:24px}
  .ticker{font-size:8.5px;letter-spacing:.32em}
  .ticker span{padding:0 18px;gap:12px}
  .site-loader{padding:22px}
  .loader-inner{gap:14px}
  .loader-row{align-items:flex-start;flex-direction:column;gap:10px}
  .loader-num{text-align:left;font-size:18px}
  .loader-note{font-size:8px;line-height:1.6}

  /* ── HERO ─────────────────────────────────────────────────── */
  .s-hero{min-height:100vh;height:auto;padding:0 20px}
  .hero-content{padding:0 8px}
  .hero-est{font-size:9.5px;letter-spacing:.36em;margin-bottom:32px}
  .hero-est::before,.hero-est::after{width:18px}
  .hero-logo-stack{width:min(94vw,560px);min-width:0}
  .logo-mark{width:46vw;height:46vw;max-width:240px;max-height:240px}
  .logo-mark .ring{inset:-18px}
  .logo-mark .ring.r2{inset:-36px}
  .hero-showreel{max-height:none}
  .hero-bgtype{font-size:clamp(120px,42vw,260px);letter-spacing:-.04em}
  .hero-tag{font-size:9.5px;letter-spacing:.36em;margin-top:16px;line-height:1.7}
  .hero-tag em{margin:0 6px}
  .hero-meta{margin-top:24px;gap:6px}
  .hero-meta .pill{font-size:9.5px;letter-spacing:.18em;padding:8px 12px}
  .hero-meta .pill.solid + .pill + .pill + .pill{display:inline-flex} /* keep all */
  .scroll-cue{bottom:60px;font-size:8.5px;letter-spacing:.36em}
  .scroll-cue .line{height:32px}
  .float-pill{display:none}

  /* ── INTRO ───────────────────────────────────────────────── */
  .s-intro{
    grid-template-columns:1fr;gap:28px;
    padding:96px 24px 80px;min-height:0;align-items:start;
  }
  .vlabel{
    writing-mode:horizontal-tb;transform:none;
    font-size:9.5px;letter-spacing:.32em;padding-top:0;
  }
  .intro-l h2{font-size:clamp(48px,12vw,72px)}
  .intro-l h2 .cn{font-size:.58em;margin-top:6px}
  .intro-r .cn-text{font-size:15px;line-height:1.85}
  .intro-r .en-text{font-size:13px}
  .meta-stack .row{padding:14px 16px;font-size:9.5px}
  .meta-stack .row b{font-size:26px}

  /* ── INDEX ───────────────────────────────────────────────── */
  .s-index{padding:96px 24px 80px}
  .index-head{flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:36px}
  .index-head h2{font-size:clamp(48px,13vw,84px)}
  .index-head .desc{font-size:13px;max-width:none}
  .index-row{
    grid-template-columns:48px 1fr 36px;
    grid-template-rows:auto auto;
    gap:8px 16px;
    padding:20px 0;
  }
  .index-row:hover{padding-left:0} /* no slide-in hover on touch */
  .index-row::before{display:none}
  .index-row > *{color:inherit !important}
  .index-row:hover .row-num,.index-row:hover .row-cn,
  .index-row:hover .row-en,.index-row:hover .row-meta,
  .index-row:hover .row-arrow{color:inherit}
  .row-num{font-size:24px;grid-row:1}
  .row-cn{font-size:clamp(20px,5.5vw,28px);grid-column:2;grid-row:1}
  .row-en{
    font-size:10px;letter-spacing:.24em;border:0;padding:0;
    grid-column:2;grid-row:2;
  }
  .row-meta{display:none}
  .row-arrow{font-size:24px;grid-column:3;grid-row:1/3;align-self:center}

  /* ── WORKS (wall) ───────────────────────────────────────── */
  .s-works{padding:96px 20px 80px}
  .works-head{
    grid-template-columns:1fr;gap:18px;margin-bottom:28px;align-items:start;
  }
  .works-head h2{font-size:clamp(48px,12vw,72px)}
  .works-head h2 .cn{font-size:.72em;margin-top:8px}
  .works-head .rule{display:none}
  .works-head .filter{flex-wrap:wrap;gap:4px}
  .works-head .filter button{padding:8px 14px;font-size:9.5px;letter-spacing:.18em}

  /* mobile: full-width stacked tiles — single column, big, immersive */
  .wall{
    display:grid;grid-template-columns:1fr;grid-auto-rows:auto;
    gap:14px;
  }
  .wall .tile,
  .wall .tile.t-hero,
  .wall .tile.t-tall,
  .wall .tile.t-wide,
  .wall .tile.t-md,
  .wall .tile.t-half{
    grid-column:1 / -1;grid-row:auto;
    aspect-ratio:4/5;
  }
  .wall .tile:nth-child(odd){aspect-ratio:4/3}
  .wall .tile .ttl{transform:translateY(0)} /* always show on mobile */
  .wall .tile img{filter:saturate(.95) brightness(.85)}
  .wall .tile .badge{font-size:9px;padding:5px 10px}
  .wall .tile .yr{font-size:15px;padding:4px 8px}

  .works-foot{flex-direction:column;gap:18px;align-items:stretch;padding-top:22px}
  .works-foot .ct{font-size:9.5px;text-align:center}
  .works-foot .more{justify-content:center;padding:16px 24px;font-size:10px;letter-spacing:.28em}

  /* ── CONTACT ─────────────────────────────────────────────── */
  .s-contact{
    grid-template-columns:1fr;gap:42px;padding:96px 24px 120px;min-height:0;
  }
  .contact-l h2{font-size:clamp(56px,14vw,96px)}
  .contact-l h2 .cn{font-size:.45em}
  .contact-l .sub{font-size:14px;margin-bottom:28px}
  .contact-r .row{grid-template-columns:80px 1fr;padding:16px 18px;gap:14px}
  .contact-r .row .v{font-size:14px}
  .contact-foot{
    position:static;flex-direction:column;gap:8px;text-align:center;
    padding:32px 0 0;font-size:9.5px;letter-spacing:.24em;border:0;
    left:auto;right:auto;bottom:auto;
  }
  .contact-foot .copy{order:2}
}

/* ═════════════════════════════════════════════════════════════
   ARCHIVE (≤860px) — single column list
   ═════════════════════════════════════════════════════════════ */
@media (max-width:860px){
  .ah{padding:96px 20px 18px}
  .ah-row1{flex-wrap:wrap;gap:10px;margin-bottom:14px}
  .ah-est{font-size:9.5px;letter-spacing:.26em}
  .ah-counter{font-size:9.5px;letter-spacing:.22em}
  .ah-rule{flex-basis:100%;height:0;margin:0}
  .ah-title{font-size:clamp(72px,18vw,128px)}
  .ah-ghost{font-size:clamp(180px,52vw,360px);top:80px}
  .ah-row2{display:none!important}
  .ah-sub{font-size:14px;max-width:none}
  .ah-meta{align-items:flex-start;text-align:left}
  .ah-meta .big{font-size:42px}

  .ctrl{padding:12px 20px;flex-wrap:wrap;gap:10px;position:relative;top:auto}
  .ctrl-l{flex-basis:100%}
  .ctrl-label{display:none}
  .ctrl-r{flex-wrap:wrap;gap:6px}
  .layout-toggle button{padding:5px 9px;font-size:9px}
  .physics-trigger,.filter-trigger{font-size:9.5px;padding:7px 11px}
  .filter-trigger kbd{display:none}

  .stage{padding:24px 16px 0}
  .layout-list .cat-head{display:none!important}
  .layout-list .row{
    grid-template-columns:1fr 46px !important;
    grid-template-rows:auto auto;
    gap:6px 12px;padding:16px 4px;
  }
  .layout-list .row:hover{padding-left:4px}
  .layout-list .row .rcn{font-size:clamp(17px,5vw,22px);grid-column:1;grid-row:1}
  .layout-list .row .ren{font-size:9.5px;letter-spacing:.22em;border:0;padding:0;grid-column:1;grid-row:2}
  .layout-list .row .rcli,
  .layout-list .row .rmed,
  .layout-list .row .ryr,
  .layout-list .row .rfiles{display:none}
  .layout-list .row .rar{font-size:18px;grid-column:2;grid-row:1/3;align-self:center}

  /* Bento → 2 cols stacked */
  .layout-bento .stage-inner{grid-template-columns:repeat(6,1fr) !important;grid-auto-rows:64px;gap:8px}
  .layout-bento .tile{grid-column:span 6 !important;grid-row:span 4 !important;transform:none !important}
  .layout-bento .tile:nth-child(even){grid-column:span 6 !important;grid-row:span 3 !important}
  .layout-bento .tile.bleed{margin:0}
  .stage-cats{display:none}

  /* Spine uses image cards only on mobile. */
  .layout-spine .stage-inner{grid-template-columns:1fr;gap:14px}
  .layout-spine .spine-l{
    display:none!important;
  }
  .layout-spine .spine-r{
    display:grid;
    grid-column:1 / -1;
    width:100%;
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:12px;
    order:1;
  }
  .layout-spine .spine-r .thumb{
    width:100%;
    min-width:0;
    cursor:pointer;
  }

  /* drawer full width */
  .drawer{width:100%;max-width:100%}
  .drawer-cover{height:200px}
  .drawer-body{padding:24px 22px}
  .drawer-body h3{font-size:28px}
  .drawer-meta{grid-template-columns:1fr}

  /* tweaks panel: stretch to corners on mobile */
  .tweaks{right:14px;left:14px;bottom:64px;width:auto}

  /* palette */
  .palette{width:94vw;max-height:80vh}
  .palette-head{gap:0}
  .palette-head .ic,
  .palette-head .esc{display:none!important}
  .palette-head input{font-size:15px}
  .palette-foot span{display:none!important}
  .palette-foot{justify-content:flex-end}

  .ft{padding:32px 20px;flex-direction:column;gap:8px;text-align:center}
}

/* ═════════════════════════════════════════════════════════════
   PROJECT DETAIL (≤860px) — stack chapters & meta
   ═════════════════════════════════════════════════════════════ */
@media (max-width:860px){
  /* override the fixed 1280 body width if present */
  body[style*="width"], body{width:auto !important; max-width:100vw}

  main{padding:56px 0 40px !important}

  .ah{padding:48px 20px 18px}
  .ah-ghost{font-size:clamp(160px,48vw,300px);top:30px}
  .ah-title{font-size:clamp(64px,16vw,108px)}
  .ah-row2{display:none!important}
  .ah-meta .big{font-size:42px}
  .ah .float-pill{display:none}

  .filmhero{height:300px;margin-top:32px}
  .filmhero .tc,.filmhero .scroll-hint{display:none}

  .tagline-wrap{padding:60px 20px 36px}
  .tagline{font-size:clamp(24px,6.5vw,34px);line-height:1.4}
  .chips{margin-top:24px}

  .sec{padding:64px 20px 0}
  .cat-head{
    grid-template-columns:48px 1fr;gap:12px;
    padding:18px 0 14px;margin-bottom:24px;
  }
  .cat-head .cnum{font-size:26px}
  .cat-head .ctitle .cn{font-size:24px}
  .cat-head .ctitle .en{font-size:11px;letter-spacing:.18em}
  .cat-head .cmeta{display:none}

  .sec-body{grid-template-columns:1fr;gap:18px;padding-bottom:20px}
  .sec-body .left{display:none}
  .sec-body .right p{font-size:15px;line-height:1.8}
  .sec-body .right p.lead{font-size:19px;line-height:1.5}
  .meta-card{grid-template-columns:1fr}

  .frame-wide{padding:0 20px}
  .frame-wide > div{aspect-ratio:16/10}
  .cap-row{padding:8px 20px 0;font-size:9px;letter-spacing:.18em;flex-wrap:wrap;gap:4px}

  .two-col{grid-template-columns:1fr;gap:24px;padding:48px 20px 0}
  .two-col .brief p{font-size:17px}

  /* mosaic → 1 column */
  .mosaic{grid-template-columns:1fr !important;padding:24px 20px 0;gap:10px}
  .mosaic > div{grid-column:1 / -1 !important;grid-row:auto !important;aspect-ratio:16/10;min-height:180px}

  .small-grid{padding:48px 20px 0}
  .small-grid .grid{grid-template-columns:1fr !important;gap:10px}
  .small-grid .grid > div{grid-column:1 / -1 !important;aspect-ratio:16/10 !important}
  .small-grid .grid > div > div{display:contents !important}

  .quote{grid-template-columns:1fr;padding:72px 20px;margin-top:48px;gap:18px}
  .quote blockquote{font-size:24px;line-height:1.45}
  .quote .src{font-size:9.5px;letter-spacing:.22em;margin-top:18px}

  .outcome{grid-template-columns:repeat(2,1fr);margin:48px 20px 0;gap:1px}
  .outcome > div{padding:28px 18px}
  .outcome .num-big{font-size:48px}
  .outcome .num-big small{font-size:18px}
  .outcome .lbl{font-size:9px;letter-spacing:.22em}

  .credits-grid{grid-template-columns:1fr;gap:0}
  .credits-grid > div{padding:14px 0}

  .next{padding:72px 20px;grid-template-columns:1fr;gap:18px;text-align:left}
  .next .lbl-col{font-size:9.5px;letter-spacing:.22em}
  .next .lbl-col b{font-size:24px}
  .next .title{font-size:42px;text-align:left !important}
  .next .arrow{font-size:42px;margin-left:8px}

  .ft{padding:32px 20px;flex-direction:column;gap:8px}
}

/* very small phones — tighter still */
@media (max-width:380px){
  .hero-meta .pill{font-size:8.5px;padding:6px 9px;letter-spacing:.14em}
  .nav{padding:12px 14px}
  .nav .brand{font-size:12px}
  .ah-title{font-size:clamp(58px,16vw,88px)}
}

/* ── archive: fix oversized placeholder/image tiles on mobile ── */
@media(max-width:860px){
  /* all tile images: constrain height so SVG placeholders don't grow huge */
  .stage-inner .tile{
    max-height:280px;
    overflow:hidden;
  }
  .stage-inner .tile img{
    width:100%;
    height:100%;
    max-height:280px;
    object-fit:cover;
  }
  /* list layout rows: cap image cell height */
  .layout-list .stage-inner,
  .layout-spine .stage-inner{
    gap:12px;
  }
  .layout-list .row-img,
  .spine-r .thumb{
    max-height:200px;
    overflow:hidden;
  }
  .anim-shuffle .tile,
  .anim-shuffle .thumb,
  .anim-junni .tile,
  .anim-junni .thumb{
    opacity:0;
    transform:translateY(18px) scale(.985);
    filter:blur(6px);
  }
  .anim-shuffle .tile.in,
  .anim-shuffle .thumb.in,
  .anim-junni .tile.in,
  .anim-junni .thumb.in{
    opacity:1;
    transform:none;
    filter:none;
    transition:opacity .9s var(--ease-out) var(--d,0s), transform .9s var(--ease-out) var(--d,0s), filter .9s var(--ease-out) var(--d,0s);
  }
  .layout-list .row-img img,
  .spine-r .thumb img{
    max-height:200px;
    object-fit:cover;
  }
  .layout-bento .stage:hover .tile:not(:hover),
  .layout-spine .spine-r:hover .thumb:not(:hover):not(.linked){
    opacity:1 !important;
    filter:none !important;
  }
  .layout-bento .tile img,
  .layout-bento .tile:hover img,
  .spine-r .thumb img,
  .spine-r .thumb:hover img,
  .spine-r .thumb.linked img{
    transition:filter .85s var(--ease-out), transform 1.2s var(--ease) !important;
    filter:saturate(1.05) contrast(1.02) brightness(1) !important;
  }
}