/* Phone edition. Desktop and tablet keep their original styles.
   Same URLs and bilingual content; narrow viewports select this layout. */
.mobile-only,.mobile-menu-toggle,.mobile-chapters { display:none; }
.wash-build-mobile { display:none; }
.site-header nav .mobile-only { display:none; }
.mobile-scroll-region { display:contents; }
.mobile-viewer { border:0;padding:0;background:#fff;color:#1a1a1a; }
.mobile-viewer:not([open]) { display:none; }
.mobile-viewer::backdrop { background:rgba(0,0,0,.65); }
.mobile-viewer[open] { position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none; }
.mobile-viewer-bar { display:flex;justify-content:space-between;align-items:center;padding:12px 20px;border-bottom:1px solid #ddd; }
.mobile-viewer button { border:1px solid #d6d6d6;background:white;color:#222;font:inherit;padding:10px 16px;min-height:44px; }
.mobile-viewer-stage { height:calc(100dvh - 80px);overflow:auto;display:flex;align-items:flex-start; }
.mobile-viewer-stage img { width:100%;height:100%;max-width:none;object-fit:contain; }
.mobile-viewer-stage.is-zoomed img { width:var(--original-width);height:auto;flex-shrink:0; }
body:has(.mobile-viewer[open]) { overflow:hidden; }
@media (max-width:719px), (max-width:1023px) and (max-height:520px) and (pointer:coarse) {
  /* 手機版把四個大級距改小；11／13／14／16px 四階與桌機相同，所以下面一律
     用 var(--text-*)，改 token 手機會跟著動。
     另有八個手機專屬的小級距，桌機那套沒有對應階：
       10px  .db-caption / .db-meta
       12px  圖說、標籤、頁尾
       15px  .db-quote
       17px  站名
       20px  案例主標裡的中文
       24px  .db-name
       38px  案例主標
       48px  首頁姓名
     加上 .home-label 的 clamp(20px,5.7vw,27px)。這些是手機版自己的階，不是漏改，
     動它們等於動已核定的手機設計。 */
  :root { --text-display:40px;--text-page:34px;--text-section:26px;--text-lead:18px;--phone-hero:280px;--phone-strip:220px; }
  html,body { min-width:0;overflow-x:clip; }
  html { scroll-padding-top:85px; }
  body { -webkit-text-size-adjust:100%; }
  main { overflow-wrap:break-word; }
  .container,.home-hero,.db-hero,.db-index,.about-page { padding-left:22px;padding-right:22px; }
  .container > * { min-width:0; }
  .mobile-only,.site-header nav .mobile-only { display:block; }
  .site-header { padding:12px 0; }
  .site-header .container { align-items:center;gap:12px;position:static;flex-wrap:wrap; }
  .site-header .container > div:first-child { min-width:0;flex:1; }
  .site-header .hdr-left { gap:14px; }
  .site-header .brand { font-size:17px; }
  .site-header .brand-secondary { display:none; }
  .mobile-brand { font-size:17px;font-weight:500; }
  .lang-toggle { min-width:44px;min-height:44px;place-items:center;padding:0 10px; }
  .mobile-menu-toggle { display:flex;align-items:center;gap:10px;border:0;background:transparent;min-height:44px;padding:0 2px 0 12px;font:13px var(--font-mono);color:#333;cursor:pointer; }
  .mobile-menu-toggle::after { content:'+';font:24px var(--font-sans);font-weight:300; }
  .mobile-menu-toggle[aria-expanded="true"]::after { content:'−'; }
  .site-header nav { width:100%;flex:1 0 100%;margin:0;padding:8px 0 0;gap:0;white-space:normal;mask-image:none!important;-webkit-mask-image:none!important;flex-direction:column; }
  .site-header.mobile-enhanced nav { display:none;position:absolute;top:100%;left:0;right:0;width:auto;background:#fff;border-bottom:1px solid #ccc;padding:8px 22px 22px;max-height:calc(100svh - 76px);overflow-y:auto;box-shadow:0 14px 18px #00000008; }
  .site-header.mobile-menu-open nav { display:flex; }
  .site-header nav a { display:block;padding:14px 0;min-height:48px;border-bottom:1px solid #eee;margin:0;font-size:var(--text-body); }
  .site-header nav a:last-child { border:0; }
  .site-header nav a[aria-current="page"] { font-weight:500;color:var(--db-accent,#5B3A8C); }
  html.nav-switch .site-header nav > * { animation:none;opacity:1; }
  .home-hero { padding-top:38px;padding-bottom:42px;gap:28px;min-height:0; }
  .home-name { font-size:48px; }
  .home-role { font-size:var(--text-micro);letter-spacing:.15em;margin-top:14px; }
  .home-epigraph { margin-top:28px; }
  .home-epigraph figcaption { font-size:12px; }
  .home-list { margin-top:34px; }
  .home-row { grid-template-columns:22px minmax(0,1fr) 18px;gap:10px;padding:19px 0; }
  .home-row .home-label { font-size:clamp(20px,5.7vw,27px);white-space:normal;line-height:1.3; }
  .home-row .home-keys,.home-row .home-arrow { opacity:1;transform:none; }
  .home-row .home-keys { font-size:12px;letter-spacing:0;line-height:1.6; }
  .home-row:hover { padding-left:0; }
  .home-markwrap { max-width:240px; }
  .home-mark { margin-bottom:0;transform:none; }
  .home-hub { margin-top:0;padding:10px 0; }
  .home-hub .home-hub-name { font-size:var(--text-section); }
  .home-hub .home-hub-full { position:static;opacity:1;transform:none;font-size:12px;margin-top:5px;color:#6e6e6e;white-space:normal;line-height:1.6; }
  .home-hub:hover .home-hub-name,.home-markwrap:has(.home-mark:hover) .home-hub-name { opacity:1;transform:none; }
  .home-hub:hover .home-hub-full,.home-markwrap:has(.home-mark:hover) .home-hub-full { transform:none; }
  .db-hero { padding-top:36px;padding-bottom:28px;gap:20px;min-height:0;grid-template-columns:1fr; }
  .db-hero > div:first-child { min-height:0; }
  .db-title { min-height:0;font-size:var(--text-page);line-height:1.2;margin-top:12px; }
  .db-desc { font-size:var(--text-body);line-height:1.8;margin-top:20px; }
  .db-markwrap { max-width:120px;justify-self:end; }
  .db-caption { font-size:10px;margin-top:5px; }
  .db-quote { margin-top:8px;font-size:15px;line-height:1.8;min-height:0;white-space:normal; }
  .db-index { margin-top:0;margin-bottom:48px; }
  .db-index-head { margin-bottom:16px; }
  .db-row { grid-template-columns:22px minmax(0,1fr) auto;gap:0 12px;padding:24px 0; }
  .db-row:hover { padding-left:0; }
  .db-thumb { grid-column:1/-1;grid-row:1;margin-bottom:18px; }
  .db-idx { grid-row:2;grid-column:1;padding-top:6px; }
  .db-body { grid-column:2;grid-row:2;min-width:0; }
  .db-meta { grid-column:3;grid-row:2;font-size:10px;letter-spacing:0; }
  .db-name { font-size:24px;line-height:1.25; }
  .db-sub { line-height:1.6;font-size:12px; }
  .db-hook { font-size:var(--text-meta);line-height:1.75;max-width:none; }
  .db-arrow { opacity:1; }
  .about-page { margin-top:34px;margin-bottom:48px; }
  .about-page .about-layout { display:flex;flex-direction:column;gap:24px; }
  .about-page .about-eyebrow { order:0; }
  .about-page .about-photo { order:1;width:100%;max-width:none;aspect-ratio:4/3; }
  .about-page .about-photo img { object-position:center 40%; }
  .about-page .about-body { order:2; }
  .about-page .about-body p { font-size:var(--text-body);line-height:1.9; }
  .case-hero-fullbleed { width:100%;margin-left:0;max-height:none;aspect-ratio:16/10; }
  .case-hero-fullbleed img { object-fit:contain;object-position:center!important; }
  .case-hero-fullbleed:has(img) { aspect-ratio:auto;background:transparent; }
  .case-hero-fullbleed img { height:auto; }
  .case-intro { padding:32px 0 12px; }
  .case-intro .case-title { font-size:38px;line-height:1.15;margin-bottom:20px;overflow-wrap:anywhere; }
  .case-intro .case-title .ch { display:block;margin:10px 0 0;font-size:20px;line-height:1.5; }
  .case-intro .case-tagline { font-size:var(--text-body);line-height:1.9; }
  .case-brief { padding-left:15px;margin-top:24px;margin-bottom:28px; }
  .case-brief .brief-row { grid-template-columns:1fr;gap:5px;padding:12px 0; }
  .case-brief .brief-text { font-size:var(--text-meta);line-height:1.8; }
  .case-intro > .case-brief:last-child { margin-bottom:28px; }
  .story-section,.story-section--dark { padding:40px 0 44px; }
  .story-heading { font-size:var(--text-section);line-height:1.4;margin-bottom:22px; }
  .story-body { max-width:none;font-size:var(--text-body);line-height:1.85; }
  .story-body p + p { margin-top:22px; }
  .mobile-chapters { display:block;margin:12px 0 28px;padding:16px 0;border-top:1px solid #ddd;border-bottom:1px solid #ddd; }
  .mobile-chapters summary { cursor:pointer;min-height:28px;font-size:var(--text-meta); }
  .mobile-chapters a { display:block;padding:10px 0;min-height:44px;font-size:var(--text-meta);line-height:1.6; }
  .mobile-chapters nav { padding-top:12px; }
  .case-diptych,.case-grid-2x2,.case-grid-3,.studio-spread,.act-row,.act-row.reverse,.mechanism-diptych,.process-grid,.process-figures,.anneal-twocol,.peer-compare,.boot-row,.feature-grid,.mech-grid,.compare-grid { grid-template-columns:minmax(0,1fr);gap:24px; }
  .act-row.reverse .case-image,.act-row.reverse .story-body { order:initial; }
  .case-diptych.wash-sketch-pair { grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
  .wash-sketch-pair .crop-frame { min-width:0; }
  .wash-sketch-pair img { object-fit:contain; }
  #modeling .case-grid-3:has(img[src*="case-washenjoy"]),
  #build .case-grid-3:has(img[src*="case-washenjoy"]) { grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
  #modeling .case-grid-3:has(img[src*="case-washenjoy"]) > *,
  #build .case-grid-3:has(img[src*="case-washenjoy"]) > * { min-width:0; }
  #modeling .case-grid-3:has(img[src*="case-washenjoy"]) > :first-child,
  #build .case-grid-3:has(img[src*="case-washenjoy"]) > :nth-child(2) { display:none; }
  .wash-build-all { display:none; }
  .wash-build-mobile { display:inline; }
  .act-row { margin:28px 0; }
  .studio-spread-right > .crop-frame { height:auto; }
  .mechanism-diptych .mech-side,.mechanism-diptych .pour-side { padding:0; }
  /* Six panels read left to right in three compact rows on phones. */
  .storyboard { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;gap:16px 10px;margin:28px 0; }
  .storyboard .story-panel { min-width:0; }
  .storyboard .story-panel img { height:auto;aspect-ratio:auto;object-fit:contain; }
  .storyboard .story-panel figcaption { min-height:0;padding:10px 10px 12px;font-size:var(--text-small);line-height:1.65; }
  .storyboard .story-panel figcaption strong { font-size:12px;margin-bottom:5px; }
  .intro-strip,.gameplay-strip,.playtest-strip,.moment-strip { display:flex;overflow-x:auto;gap:20px;margin:28px 0;padding:12px 0 20px;scroll-snap-type:x mandatory;overscroll-behavior-x:contain; }
  .intro-strip > *,.gameplay-strip > *,.playtest-strip > *,.moment-strip > * { flex:0 0 70%;min-width:0;scroll-snap-align:start; }
  .moment-strip > * { flex-basis:66%; }
  .intro-strip img,.gameplay-strip img { max-width:220px; }
  .journey-strip { display:flex;overflow-x:auto;gap:20px;scroll-snap-type:x mandatory;padding-bottom:18px; }
  .journey-strip > figure { flex:0 0 70%;min-width:0;scroll-snap-align:start; }
  .journey-strip img { max-width:220px; }
  .iter-item { grid-template-columns:minmax(0,1fr); }
  .aeiou-grid { grid-template-columns:minmax(0,1fr);gap:20px; }
  .aeiou-cell { display:grid;grid-template-columns:56px minmax(0,1fr);gap:0 14px;padding:20px; }
  .aeiou-vignette { grid-column:1/-1;margin:0 0 18px;aspect-ratio:3/2; }
  .aeiou-letter { grid-column:1;grid-row:2/4; }
  .aeiou-axis { grid-column:2;margin:0; }
  .aeiou-body { grid-column:2;margin-top:8px;line-height:1.8; }
  .bridge-row { grid-template-columns:1fr;gap:12px;padding:24px 0; }
  .bridge-arrow { transform:rotate(90deg);width:20px; }
  .team-grid,.visual-system-grid,.walkthrough-stage,.dev-process,.promo-grid { grid-template-columns:minmax(0,1fr); }
  .team-grid { grid-template-rows:none; }
  .team-grid > * { min-width:0;grid-column:auto;grid-row:auto; }
  .role-note { white-space:normal; }
  .persona-card { padding:20px;grid-template-columns:1fr; }
  .persona-quote { font-size:var(--text-lead);line-height:1.75; }
  .ocr-sign { padding:20px 14px; }
  .stat-grid { grid-template-columns:1fr;gap:14px; }
  .stat-cell { padding:24px 18px; }
  .pull-list { padding:20px; }
  .boot-row .product-frame { width:100%;max-height:none; }
  .boot-row .receipt-frame { width:220px; }
  .boot-caption { margin-bottom:44px; }
  .peer-compare .col { padding:22px; }
  .peer-compare .col + .col { border-left:0;border-top:1px solid #ddd; }
  .anneal-figure { padding:14px; }
  .mobile-scroll-region { display:block;overflow-x:auto;max-width:100%;padding-bottom:12px;overscroll-behavior-x:contain; }
  .mobile-scroll-region > svg { min-width:660px; }
  .mobile-scroll-region > table { min-width:620px; }
  .mobile-scroll-region::before { content:'Swipe to explore →';display:block;position:sticky;left:0;width:fit-content;font:11px var(--font-mono);color:#767676;margin-bottom:12px; }
  html[data-lang="zh"] .mobile-scroll-region::before { content:'左右滑動查看 →'; }
  .boot-marquee,.marquee { width:auto;margin-left:0;overflow-x:auto;overscroll-behavior-x:contain; }
  .marquee-track { animation:none;transform:none; }
  .marquee-track > [aria-hidden="true"] { display:none; }
  .compete-table { white-space:normal; }
  .maze-demo { padding:16px; }
  .maze-demo-controls { flex-wrap:wrap;gap:12px; }
  .maze-demo button { min-height:44px; }
  .paper-cite { padding:18px; }
  .site-footer { padding:24px 0; }
  .site-footer .container { flex-wrap:wrap;gap:16px 24px;font-size:12px; }
  .site-footer a { display:inline-block;min-height:36px; }
  /* 手機頁尾只留名稱＋箭頭，兩側對稱，也讓最長的一組（Product Management →
     ARMASPEED Aero Kits）留在同一行。桌機仍是 Back to X。 */
  .site-footer .back-prefix { display:none; }
  .toast { max-width:calc(100vw - 32px);white-space:normal; }
  [data-mobile-zoom] { cursor:zoom-in; }
  [data-mobile-zoom]:focus-visible { outline:2px solid #5B3A8C;outline-offset:3px; }
}

/* 平板直立（720–1023px）：只把導覽列換成漢堡選單，版面其餘部分維持桌機。

   為什麼需要這一段：桌機那排是「Home／XTDesign／User Research／Product
   Management／Industrial Design」五個長標籤，橫排展開後右緣固定落在 901px。
   手機版在 719px 以下接手，桌機版要到視窗約 1009px 才擺得下並留出 48px 天地，
   中間這段沒有人管——iPad 直立（768）正中這個空窗：Product Management 被切一半，
   Industrial Design 整個在畫面外，而且頁面沒有橫向捲軸，那兩個連結是點不到的。
   受影響的是四個領域頁與十一個案例頁；首頁、About、404 用的是短導覽，不受影響。

   上界取 1023px，對齊 styles.css 既有的平板斷點（首頁與領域頁的 hero 也在那裡
   轉成單欄），不另造新斷點。

   下面這組規則是 719px 那一段導覽部分的複本，刻意逐條重複而不是把 media query
   的上界從 719 拉到 1023：那一份是整套手機版型（字級、間距、圖片檢視器、圖表
   捲動區都在裡面），整段放寬會讓平板連版面一起變成手機版。這裡只要導覽。

   漢堡選單的 DOM 與行為由 mobile.js 無條件建立（不看寬度），所以這裡純 CSS 就夠，
   JS 不用改。 */
/* Start at the phone boundary so fractional widths under browser zoom have no menu gap. */
@media (min-width:719px) and (max-width:1023px) {
  .mobile-only,.site-header nav .mobile-only { display:block; }
  .site-header { padding:12px 0; }
  .site-header .container { align-items:center;gap:12px;position:static;flex-wrap:wrap; }
  .site-header .container > div:first-child { min-width:0;flex:1; }
  .site-header .hdr-left { gap:14px; }
  .site-header .brand { font-size:17px; }
  .site-header .brand-secondary { display:none; }
  .mobile-brand { font-size:17px;font-weight:500; }
  .lang-toggle { min-width:44px;min-height:44px;place-items:center;padding:0 10px; }
  .mobile-menu-toggle { display:flex;align-items:center;gap:10px;border:0;background:transparent;min-height:44px;padding:0 2px 0 12px;font:13px var(--font-mono);color:#333;cursor:pointer; }
  .mobile-menu-toggle::after { content:'+';font:24px var(--font-sans);font-weight:300; }
  .mobile-menu-toggle[aria-expanded="true"]::after { content:'−'; }
  .site-header nav { width:100%;flex:1 0 100%;margin:0;padding:8px 0 0;gap:0;white-space:normal;mask-image:none!important;-webkit-mask-image:none!important;flex-direction:column; }
  .site-header.mobile-enhanced nav { display:none;position:absolute;top:100%;left:0;right:0;width:auto;background:#fff;border-bottom:1px solid #ccc;padding:8px 32px 22px;max-height:calc(100svh - 76px);overflow-y:auto;box-shadow:0 14px 18px #00000008; }
  .site-header.mobile-menu-open nav { display:flex; }
  .site-header nav a { display:block;padding:14px 0;min-height:48px;border-bottom:1px solid #eee;margin:0;font-size:var(--text-body); }
  .site-header nav a:last-child { border:0; }
  .site-header nav a[aria-current="page"] { font-weight:500;color:var(--db-accent,#5B3A8C); }
  html.nav-switch .site-header nav > * { animation:none;opacity:1; }
}
/* 橫放的手機（寬 720–1023 但矮）同時落在上面那一段與 719px 那一段裡。
   那種情況下版面是手機版，左右留白是 22px 不是 32px，下拉選單要跟著收回來，
   否則選單裡的連結會比頁首的品牌名多縮 10px。 */
@media (min-width:720px) and (max-width:1023px) and (max-height:520px) and (pointer:coarse) {
  .site-header.mobile-enhanced nav { padding-left:22px;padding-right:22px; }
}