/* ================================================================
   MOBILE  —  max-width: 768px  |  rebuilt from scratch
================================================================ */
@media (max-width: 768px) {

/* ══ ROOT TOUCH FIX ═══════════════════════════════════════════
   style.css blocks touch globally via user-select:none on body
   and pointer-events:none on pages. Override with max specificity.
════════════════════════════════════════════════════════════ */

/* Fix 1: body user-select:none kills iOS touch */
html body {
  -webkit-user-select: auto !important;
  user-select: auto !important;
  -webkit-touch-callout: none;
  touch-action: auto !important;
}

/* Fix 2: All pages need touch events */
html body .page {
  pointer-events: auto !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Fix 3: P1 specifically has pointer-events:none in style.css */
html body #p1 {
  pointer-events: auto !important;
  touch-action: auto !important;
  overflow: hidden !important;
}

/* Fix 4: P2, P7 scroll */
html body #p2,
html body #p7 {
  pointer-events: auto !important;
  touch-action: pan-y !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Fix 5: P3-P6 scroll containers */
html body #p3,
html body #p4,
html body #p5,
html body #p6 {
  pointer-events: auto !important;
  touch-action: pan-y !important;
}

html body #p3-scroll,
html body #p4-scroll,
html body #p5-scroll,
html body #p6-scroll {
  pointer-events: auto !important;
  touch-action: pan-y !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Fix 6: Portrait must receive clicks */
html body #p1-portrait-wrap,
html body #p1-portrait-wrap img,
html body #p2-portrait-fixed,
html body #p2-portrait-fixed img {
  pointer-events: auto !important;
  touch-action: auto !important;
  cursor: pointer !important;
}

/* Fix 7: P1 scene — pass-through except portrait */
html body #p1-scene {
  pointer-events: none !important;
}

/* Fix 8: Project cards */
html body .p3-card,
html body .p4-card,
html body .p5-card,
html body .p6-card {
  pointer-events: auto !important;
  touch-action: auto !important;
  cursor: pointer !important;
}

/* Fix 9: Menu and nav */
html body #side-nav,
html body #menu-panel,
html body #menu-overlay,
html body .snav-item,
html body .snav-sub,
html body .myproj-btn,
html body #snav-burger {
  pointer-events: auto !important;
  touch-action: auto !important;
}

/* Fix 10: Language screen on top */
html body #lang-screen {
  pointer-events: auto !important;
  touch-action: auto !important;
  z-index: 9999 !important;
}

html body .lang-btn {
  pointer-events: auto !important;
  touch-action: auto !important;
  cursor: pointer !important;
}

/* Fix 11: Floating words — click only, no drag */
html body .rw {
  touch-action: auto !important;
}

/* Fix 12: Project overlay */
html body #proj-overlay.slide-in,
html body #proj-scroll,
html body #proj-back {
  pointer-events: auto !important;
  touch-action: pan-y !important;
}

/* ══ END ROOT TOUCH FIX ════════════════════════════════════ */

/* ── GLOBAL ─────────────────────────────────────────────────── */
body { cursor: auto; }
#cursor { display: none; }

.lang-btn, .rw, .snav-item, .snav-sub, .myproj-btn,
#snav-burger, #proj-back, a, button,
.p3-card, .p4-card, .p5-card, .p6-card {
  cursor: pointer;
}

.page {
  position: fixed !important;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  height: 100% !important;
  min-height: unset !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* P1: no scroll — content is fixed/absolute inside */
#p1 {
  overflow: hidden !important;
}

/* ── LANGUAGE SCREEN ────────────────────────────────────────── */
#lang-screen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
  touch-action: auto !important;
  display: flex !important;
}

#lang-screen.out,
#lang-screen.hide {
  pointer-events: none !important;
  display: none !important;
}

.lang-btn {
  pointer-events: auto !important;
  touch-action: auto !important;
  cursor: pointer !important;
  min-height: 56px !important;
  min-width: 80px !important;
  padding: 18px 32px !important;
  -webkit-tap-highlight-color: rgba(255,255,255,0.1) !important;
  position: relative !important;
  z-index: 10000 !important;
}

/* ── HOME (P1) ──────────────────────────────────────────────── */
:root { --pw: 60vw; }

@media (orientation: landscape) {
  :root { --pw: 38vh; }
}

#p1-scene {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  pointer-events: none !important;
  padding-top: 0 !important;
  margin: 0 !important;
}

#p1-portrait-wrap {
  pointer-events: auto !important;
  display: block !important;
}

#p1-name-block {
  width: var(--pw) !important;
  text-align: center !important;
  padding: 0 16px 16px !important;
  box-sizing: border-box !important;
}

#p1-name-block h1 {
  font-size: clamp(11px, 3.5vw, 18px) !important;
  letter-spacing: .13em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  width: 100% !important;
  text-align: center !important;
}

#p1-name-block .sub {
  font-size: clamp(6px, 1.8vw, 10px) !important;
  letter-spacing: .10em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  width: 100% !important;
  text-align: center !important;
}

/* Hint: fixed, same vertical row as burger */
#p1-hint {
  position: fixed !important;
  top: max(14px, env(safe-area-inset-top, 14px)) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: unset !important;
  width: max-content !important;
  max-width: 60vw !important;
  text-align: center !important;
  font-size: clamp(7px, 1.8vw, 9px) !important;
  letter-spacing: .20em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  z-index: 500 !important;
  pointer-events: none !important;
}

/* Floating words */
.rw {
  font-size: clamp(13px, 3.4vw, 17px) !important;
  letter-spacing: .14em;
}

/* ── ABOUT (P2) ─────────────────────────────────────────────── */

/* Hide portrait */
#p2-portrait-fixed { display: none !important; }

/* Hide p2-hint */
#p2-hint { display: none !important; }

/* Single column layout */
#p2 {
  display: flex !important;
  flex-direction: column;
  padding: 0;
}

#p2-left,
#p2-right {
  display: contents;
}

/* Section order and padding */
#p2-sec-about {
  order: 1;
  padding: calc(7vh + 32px) 6vw 24px;
  opacity: 1 !important;
  pointer-events: auto !important;
}
#p2-sec-films {
  order: 2;
  padding: 0 6vw 24px;
  opacity: 1 !important;
  pointer-events: auto !important;
}
#p2-sec-sw {
  order: 3;
  padding: 0 6vw 24px;
  opacity: 1 !important;
  pointer-events: auto !important;
}
#p2-sec-exp {
  order: 4;
  padding: 0 6vw 48px;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* All text left-aligned */
#p2-sec-about, #p2-sec-about *,
#p2-sec-films, #p2-sec-films *,
#p2-sec-sw,    #p2-sec-sw *,
#p2-sec-exp,   #p2-sec-exp * {
  text-align: left !important;
}

/* Text sizing */
.p2-lbl   { font-size: clamp(18px, 5vw, 26px); }
.p2-about { font-size: clamp(13px, 3.8vw, 16px); line-height: 1.8; }
.p2-sw, .p2-swn, .p2-swd { text-align: left !important; }

/* Quote border */
.p2-quote {
  border-right: none !important;
  border-top: 1px solid rgba(245,242,238,.15);
  padding: 16px 0;
  text-align: left !important;
}

/* ── CONTACT (P7) ───────────────────────────────────────────── */
#p7 {
  display: flex !important;
  flex-direction: column;
}

#p7-left, #p7-right { display: contents; }

#p7-left.in,
#p7-right.in {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

#p7-left .p2s {
  padding: calc(7vh + 32px) 6vw 24px;
  text-align: left;
}
#p7-right .p2s {
  padding: 0 6vw 48px;
  text-align: left;
}

.p7-quote {
  border-right: none !important;
  border-top: 1px solid rgba(245,242,238,.15);
  padding: 16px 0;
  text-align: left;
}

.p7-cval {
  display: block;
  padding: 12px 0;
  min-height: 44px;
  cursor: pointer;
  pointer-events: auto !important;
  -webkit-tap-highlight-color: rgba(245,242,238,.08);
}

/* ── PROJECT PAGES P3–P6 ────────────────────────────────────── */
#p3-scroll, #p4-scroll, #p5-scroll, #p6-scroll {
  position: absolute !important;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  height: 100% !important;
  pointer-events: auto !important;
}

/* P2, P7: fill height and scroll */
#p2, #p7 {
  position: fixed !important;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  height: 100% !important;
}

#p3-header, #p4-header, #p5-header, #p6-header {
  padding-top: calc(7vh + 24px);
}

#p3-title, #p4-title, #p5-title, #p6-title {
  font-size: clamp(20px, 5.5vw, 32px);
  letter-spacing: .16em;
  white-space: normal;
}

/* Single column grid */
#p3-grid, #p4-grid, #p5-grid, #p6-grid {
  grid-template-columns: 1fr !important;
  gap: 20px !important;
  padding: 16px 4vw 48px !important;
  pointer-events: auto !important;
}

.p3-card, .p4-card, .p5-card, .p6-card {
  width: 100% !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: rgba(255,255,255,0.04);
}

.p3-card *, .p4-card *, .p5-card *, .p6-card * {
  pointer-events: none !important;
}

/* Cards: full colour, no hover overlay */
.p3-card img, .p4-card img,
.p5-card img, .p6-card img {
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.p3-card-img-overlay, .p4-card-img-overlay,
.p5-card-img-overlay, .p6-card-img-overlay {
  display: none !important;
}

/* Tap feedback */
.p3-card:active, .p4-card:active,
.p5-card:active, .p6-card:active {
  opacity: 0.75;
  transition: opacity 0.1s;
}

/* ── PROJECT DETAIL OVERLAY ─────────────────────────────────── */
#proj-overlay {
  display: block !important;
  position: fixed !important;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 8000 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

#proj-overlay.slide-in {
  pointer-events: auto !important;
}

#proj-scroll {
  display: block !important;
  position: absolute !important;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  padding: calc(7vh + 60px) 5vw calc(env(safe-area-inset-bottom, 0px) + 48px) !important;
  pointer-events: auto !important;
}

#proj-back {
  display: flex !important;
  position: fixed !important;
  top: max(12px, env(safe-area-inset-top, 12px)) !important;
  right: 4vw !important;
  min-height: 44px !important;
  min-width: 44px !important;
  padding: 10px 16px !important;
  font-size: 9px !important;
  cursor: pointer !important;
  z-index: 9000 !important;
  align-items: center !important;
  pointer-events: auto !important;
}

#proj-title {
  font-size: clamp(20px, 5.5vw, 32px) !important;
  letter-spacing: .12em !important;
  white-space: normal !important;
  margin-bottom: 16px !important;
}

.proj-credit-row {
  flex-direction: column !important;
  gap: 4px !important;
  margin-bottom: 12px !important;
}

.proj-credit-label,
.proj-credit-value {
  text-align: left !important;
  width: 100% !important;
}

.proj-desc,
.proj-about p {
  font-size: clamp(13px, 3.8vw, 16px) !important;
  line-height: 1.8 !important;
  text-align: left !important;
}

.proj-img-grid {
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
}

.proj-section-label {
  font-size: clamp(9px, 2.5vw, 12px) !important;
  letter-spacing: .28em !important;
  margin-top: 24px !important;
  margin-bottom: 12px !important;
  text-align: left !important;
}

/* ── SIDE NAV / MENU ────────────────────────────────────────── */
#side-nav {
  top: max(12px, env(safe-area-inset-top, 12px));
  left: 16px;
  z-index: 8600;
}

#snav-burger { cursor: pointer; }

#menu-panel {
  width: min(82vw, 280px);
  padding-top: calc(7vh + 24px);
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  max-height: 100vh;
}

.snav-item, .snav-sub, .myproj-btn {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.snav-proj {
  cursor: pointer;
  min-height: 36px;
}

.snav-proj-list {
  max-height: none !important;
  opacity: 1 !important;
}

#lang-switcher { margin-top: 8px; }

/* ── TOAST ──────────────────────────────────────────────────── */
#editor-toast, #toast {
  font-size: 9px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 10vh);
}

} /* end @media (max-width: 768px) */