/* Hùng Paris — Mobile Editorial Fidelity V17
   Keep desktop composition and gallery rhythm on phones; scale each component,
   not the whole document (which would make text and controls unusable). */
@media (max-width:760px) {
  :root {
    --mobile-gutter:clamp(10px,3.2vw,20px);
    --mobile-gap:clamp(7px,2vw,13px);
  }

  /* Header: same brand / download / navigation hierarchy, touch-safe controls. */
  html { scroll-padding-top:64px; }
  .topbar { min-height:64px;gap:8px;padding:8px var(--mobile-gutter); }
  .brand { flex:0 1 auto;min-width:0;font-size:clamp(17px,4.7vw,23px); }
  .brand small { font-size:clamp(6px,1.55vw,8px);letter-spacing:.12em; }
  .nav-actions { gap:3px;flex-shrink:0; }
  .nav-download { min-width:105px;min-height:44px;padding:8px 9px;gap:5px;font-size:9px; }
  .nav-download span { display:inline-block;font-size:17px; }
  .menu-trigger { display:flex;flex:none;width:44px;height:44px;padding:10px;align-items:center; }
  .menu-trigger span { flex:none; }
  .mobile-menu { top:64px;max-height:calc(100dvh - 64px);overflow-y:auto;overscroll-behavior:contain; }

  /* Original asymmetric split hero, scaled typography and image framing. */
  .hero { display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
    min-height:0;align-items:stretch; }
  .hero-copy { min-height:clamp(570px,145vw,730px);padding:clamp(22px,5vw,43px)
    clamp(10px,2.8vw,22px) 19px;min-width:0;justify-content:center; }
  .hero-kicker { gap:5px;margin-bottom:clamp(22px,5vw,36px);
    font-size:clamp(7px,1.3vw,9px);line-height:1.4;letter-spacing:.045em; }
  .kicker-line { width:clamp(12px,3vw,25px);flex-shrink:0; }
  .hero-intro { font-size:clamp(8px,1.45vw,10px);line-height:1.4;
    letter-spacing:.025em;margin-bottom:5px; }
  .hero h1 { min-width:0;margin:12px 0 19px;letter-spacing:-.075em; }
  .hero h1 .hero-lead { font-size:clamp(37px,11.3vw,82px);line-height:1.13; }
  .hero h1 .hero-feature { font-size:clamp(17px,5.55vw,43px);
    line-height:1.3;letter-spacing:-.09em; }
  .hero h1 .hero-end { font-size:clamp(12px,3.65vw,29px);
    line-height:1.36;letter-spacing:-.078em; }
  .hero-asterisk { font-size:.28em;margin-left:.07em;top:-.18em; }
  .hero-desc { max-width:100%;font-size:clamp(12px,1.75vw,14px);
    line-height:1.58;letter-spacing:-.012em;margin-bottom:15px; }
  .hero-buttons { flex-direction:column;align-items:stretch;gap:7px; }
  .hero-buttons .btn { width:100%;font-size:clamp(8px,1.35vw,10px);
    letter-spacing:0;min-height:44px;padding-inline:9px;gap:4px; }
  .hero-pdf { width:fit-content;max-width:100%;padding:9px 0;
    font-size:11px;line-height:1.4; }
  .hero-pdf span { margin-left:5px; }
  .hero-foot { position:static;display:flex;flex-direction:column;gap:5px;
    margin-top:auto;padding-top:20px;font-size:clamp(7px,1.15vw,9px);
    line-height:1.3;letter-spacing:.045em; }
  .hero-visual { min-height:0;align-self:stretch; }
  .hero-photo { inset:12px 9px 61px 0; }
  .hero-photo img { object-position:59% 50%; }
  .hero-image-tag { left:0;right:8px;bottom:60px;padding:7px 5px;
    display:flex;flex-wrap:wrap;gap:3px 7px;font-size:7px;
    line-height:1.3;letter-spacing:.03em; }
  .hero-serial { left:9px;bottom:13px;font-size:clamp(14px,3vw,21px); }
  .hero-serial .number-mark { font-size:8px;margin-left:3px; }
  .ticker { padding:11px 0; }
  .ticker>div { font-size:clamp(10px,2vw,14px); }

  /* Keep the two-line editorial metadata and the number counter. */
  .section-shell { padding:clamp(48px,9.5vw,76px) var(--mobile-gutter); }
  .section-eyebrow { gap:10px;margin-bottom:clamp(23px,5vw,43px);
    padding-top:11px;font-size:clamp(7px,1.45vw,9px);
    letter-spacing:.06em;line-height:1.35; }
  .section-eyebrow span { min-width:0;max-width:50%; }
  .section-eyebrow span:last-child { display:block;text-align:right; }
  .section-heading { align-items:flex-end;gap:8px;margin-bottom:24px; }
  .section-heading>div:first-child { min-width:0; }
  .section-heading h2 { font-size:clamp(27px,7.3vw,57px);
    line-height:1.05;margin-bottom:12px;letter-spacing:-.07em; }
  .section-heading p { font-size:clamp(12px,1.8vw,14px);line-height:1.6; }
  .works-count { flex:0 0 auto;min-width:42px; }
  .works-count>span { font-size:clamp(35px,9vw,65px); }
  .works-count small { font-size:7px;letter-spacing:.03em;margin-top:5px; }
  .filter-bar { gap:7px;padding:5px 0 18px;scroll-snap-type:x proximity;
    overscroll-behavior-x:contain; }
  .filter { min-height:44px;padding:10px 12px;font-size:11px;scroll-snap-align:start; }

  /* Preserve the ORIGINAL 12-column 7/5 + 4/4/4 mosaic, not a 2-column list. */
  .work-grid { grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--mobile-gap); }
  .work-card,.work-card:nth-child(n),.work-card:nth-child(5n+1) {
    grid-column:span 4;aspect-ratio:1/1.12; }
  .work-card:nth-child(7n+1) { grid-column:span 7;aspect-ratio:1.58; }
  .work-card:nth-child(7n+2) { grid-column:span 5;aspect-ratio:1.1; }
  .work-card:nth-child(7n+3),.work-card:nth-child(7n+4),
  .work-card:nth-child(7n+5) { grid-column:span 4;aspect-ratio:1; }
  .work-card:nth-child(7n+6) { grid-column:span 5;aspect-ratio:1.3; }
  .work-card:nth-child(7n) { grid-column:span 7;aspect-ratio:1.84; }
  .work-card-info { bottom:clamp(5px,1.3vw,11px);left:clamp(5px,1.3vw,11px);
    right:clamp(5px,1.3vw,11px);gap:3px; }
  .work-card-info div span { display:none; }
  .work-card-info div b { font-size:clamp(10px,2.7vw,15px);
    line-height:1.15;letter-spacing:-.035em;overflow-wrap:anywhere; }
  .work-card-info i { font-size:clamp(13px,2.7vw,19px); }
  .works-bottom { gap:10px;margin-top:22px; }
  .works-bottom .btn { min-height:44px;padding-inline:12px;font-size:10px; }

  /* Original two-column manifesto; headline remains alongside narrative. */
  .statement { padding:20px var(--mobile-gutter) 54px; }
  .statement-head { gap:10px;font-size:clamp(7px,1.4vw,9px);
    line-height:1.35;letter-spacing:.05em; }
  .statement-head span:last-child { display:block;text-align:right;max-width:50%; }
  .statement-layout { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
    align-items:start;gap:clamp(10px,2.8vw,23px);padding:clamp(40px,7vw,60px) 0 45px; }
  .statement-layout>div:first-child { min-width:0;position:sticky;top:84px; }
  .statement-overline { font-size:clamp(7px,1.3vw,9px);
    letter-spacing:.05em;line-height:1.4; }
  .statement h2 { font-size:clamp(18px,5.35vw,44px);
    line-height:1.24;letter-spacing:-.07em;margin-top:13px; }
  .statement-detail { align-self:start;min-width:0; }
  .statement-detail .statement-lead { font-size:clamp(13px,2.4vw,19px);
    line-height:1.38;letter-spacing:-.025em;margin-bottom:17px; }
  .statement-detail p { font-size:clamp(12px,1.65vw,13px);
    line-height:1.57;margin-bottom:13px; }
  .statement-link { font-size:clamp(10px,1.7vw,12px);
    gap:6px;line-height:1.4;min-height:44px;align-items:center;
    margin-top:6px;padding:10px 0; }
  .method-grid { grid-template-columns:repeat(4,minmax(0,1fr));gap:0; }
  .method-grid>div { min-height:0;margin-right:5px;padding:12px 5px 5px 0; }
  .method-grid>div:nth-child(2) { border-right:1px solid #dc877b; }
  .method-grid>div:nth-child(n+3) { border-top:0; }
  .method-grid>div:last-child { border-right:0;margin-right:0; }
  .method-grid b { font-size:11px; }
  .method-grid h3 { margin:19px 0 8px;font-size:clamp(9px,2.1vw,13px);
    line-height:1.3;letter-spacing:-.02em;overflow-wrap:anywhere; }
  .method-grid p { font-size:clamp(10px,1.55vw,12px);
    line-height:1.45;overflow-wrap:break-word; }

  /* About retains the portrait/text diptych; sticky image tracks long copy. */
  .about-layout { display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1fr);
    align-items:start;gap:clamp(11px,3vw,32px); }
  .about-photo { width:100%;margin:0;position:sticky;top:82px;
    aspect-ratio:.78;border-width:clamp(4px,1vw,9px); }
  .about-photo-label { max-width:100%;padding:6px 5px;
    font-size:clamp(7px,1.3vw,9px);line-height:1.25;letter-spacing:.02em; }
  .about-text { min-width:0; }
  .micro-label { font-size:clamp(8px,1.35vw,11px);letter-spacing:.07em; }
  .about h2 { font-size:clamp(36px,9.6vw,83px);
    line-height:1.02;margin:10px 0 20px; }
  .about-intro { padding-left:9px;border-left-width:2px; }
  .about-intro p { font-size:clamp(12px,1.8vw,14px);
    line-height:1.58;margin-bottom:15px; }
  .about-signature { flex-direction:column;gap:6px;
    padding-top:12px;margin-top:15px;font-size:9px;letter-spacing:.035em; }
  .about-contact { width:100%;min-height:44px;
    margin-top:17px;padding-inline:10px;font-size:clamp(9px,1.4vw,11px);gap:5px; }

  /* PDF keeps the same two-column sales copy / stacked-pages composition. */
  .book-layout { display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
    align-items:start;gap:clamp(11px,3.5vw,30px); }
  .book-info { min-width:0;padding:0; }
  .book h2 { font-size:clamp(25px,6.8vw,55px);line-height:1.12;
    margin:12px 0 18px;letter-spacing:-.075em; }
  .book-info>p:not(.micro-label) { font-size:clamp(12px,1.8vw,14px);
    line-height:1.6; }
  .book-buttons { flex-direction:column;align-items:stretch;
    margin-top:21px;gap:8px; }
  .book-buttons .btn { width:100%;min-height:44px;padding-inline:9px;
    font-size:clamp(9px,1.4vw,11px);gap:5px; }
  .pdf-details { font-size:9px;line-height:1.4;letter-spacing:.04em;margin-top:15px; }
  .book-preview { position:sticky;top:90px;width:calc(100% - 8px);
    max-width:none;max-height:none;min-width:0;margin:28px 0 0;aspect-ratio:1.23; }
  .book-tap { left:5px;bottom:5px;padding:5px;font-size:clamp(7px,1.3vw,10px);letter-spacing:0; }
  .book-tap span { font-size:12px;margin-left:3px; }

  /* Footer: preserve left headline / right contact list instead of stacking. */
  .footer { padding:21px var(--mobile-gutter) 32px; }
  .footer-top { gap:9px;font-size:clamp(7px,1.4vw,9px);
    letter-spacing:.04em;line-height:1.35; }
  .footer-top span:last-child { display:block;max-width:53%;text-align:right; }
  .footer-main { display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    align-items:end;gap:clamp(10px,2.5vw,22px);padding:53px 0 60px; }
  .footer-main>div { min-width:0; }
  .footer-main h2 { font-size:clamp(21px,5.7vw,50px);
    line-height:1.13;letter-spacing:-.07em;margin-bottom:17px; }
  .footer-main p { font-size:clamp(12px,1.7vw,13px);line-height:1.55; }
  .footer-links { min-width:0;max-width:none;margin-top:0;align-self:end; }
  .footer-links a { font-size:clamp(10px,2vw,13px);
    line-height:1.4;padding:13px 0;gap:4px;min-height:44px;
    overflow-wrap:anywhere; }
  .footer-links a span { flex:0 0 auto;font-size:16px; }
  .footer-bottom { flex-wrap:wrap;gap:7px;font-size:8px;letter-spacing:.025em; }

  /* No extra full-width mobile CTA over the original composition. */
  .mobile-pdf { display:none; }
  .backtop { bottom:calc(12px + env(safe-area-inset-bottom));right:12px;
    width:44px;height:44px; }

  /* Full-screen viewers: preserve centre image, ensure controls have 44px targets. */
  .lightbox-shell { padding:calc(11px + env(safe-area-inset-top)) 12px
    calc(11px + env(safe-area-inset-bottom)); }
  .lightbox-body { position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:0; }
  .lightbox-media { width:100%;padding-inline:12px; }
  .lightbox-arrow { position:absolute;z-index:2;top:50%;
    width:44px;height:56px;transform:translateY(-50%);
    background:rgba(23,16,15,.65);border:1px solid #6d554d; }
  .lightbox-arrow:first-child { left:0; }
  .lightbox-arrow:last-child { right:0; }
  .lightbox-bottom { gap:10px; }
  .lightbox-bottom h2 { font-size:clamp(17px,4vw,24px); }
  .book-dialog { padding:calc(12px + env(safe-area-inset-top)) 9px
    calc(12px + env(safe-area-inset-bottom)); }
  .book-dialog-stage { grid-template-columns:44px minmax(0,1fr) 44px;gap:0; }
  .book-nav { width:44px;height:56px;border:1px solid #7a544c; }
  .book-dialog-stage>img { min-width:0;max-width:100%; }
  .book-dialog-foot { gap:9px; }
  .book-dialog-foot input { min-height:44px; }
  .mini-download { min-height:44px;display:inline-flex;align-items:center; }

  /* Intrinsic media bounds: avoid page-level horizontal scrolling. */
  .hero-copy,.statement-layout>*,.about-layout>*,.book-layout>*,
  .footer-main>* { min-width:0; }
}
@media (max-width:360px) {
  .hero-copy { padding-inline:9px; }
  .hero h1 .hero-feature { font-size:clamp(16px,5.1vw,19px); }
  .hero h1 .hero-end { font-size:clamp(12px,3.4vw,14px); }
  .hero-serial .number-mark { display:block;margin:6px 0 0; }
  .nav-download { min-width:99px;font-size:8px; }
  .method-grid>div { padding-right:3px;margin-right:3px; }
  .work-card-info i { display:none; }
  .footer-links a span { font-size:13px; }
}
@media (max-width:760px) and (hover:none) {
  .about-photo,.book-preview { -webkit-tap-highlight-color:transparent; }
}