/* A touch-first layout, with the same content and routes as the desktop site. */
@media (max-width:767px) {
  html { scroll-padding-bottom:100px; -webkit-text-size-adjust:100%; }
  body { padding-bottom:calc(94px + env(safe-area-inset-bottom,0px)); }
  .header { height:0; padding:0; }
  .header .brand { top:calc(18px + env(safe-area-inset-top,0px)); left:20px; gap:8px; font-size:14px; line-height:28px; min-height:44px; }
  .header .brand img { width:28px; height:28px; }
  .language { top:calc(18px + env(safe-area-inset-top,0px)); right:16px; display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid #ffffff1a; border-radius:50%; font-size:12px; color:#d7d7d7; }
  .nav { top:auto; bottom:calc(16px + env(safe-area-inset-bottom,0px)); width:min(310px,calc(100% - 40px)); padding:5px; gap:4px; border:1px solid #ffffff24; background:#121212ed; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); box-shadow:0 8px 40px #0008; }
  .nav a { flex:1; min-width:0; min-height:44px; display:flex; align-items:center; justify-content:center; padding:12px 14px; font-size:14px; line-height:20px; }
  .nav-indicator { background:#303030; }
  .ambient { height:740px; opacity:.55; }
  a,button { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
  .button { min-height:46px; padding:11px 16px; font-size:14px; }
  .home-hero { padding:calc(84px + env(safe-area-inset-top,0px)) 24px 56px; gap:12px; display:flex; flex-direction:column; }
  .home-portrait { order:-1; width:200px; height:200px; max-width:100%; margin:0 auto 8px; padding:0; }
  .home-copy { max-width:480px; width:100%; margin:auto; }
  .home-hello { font-size:15px; color:#c5c5c5; letter-spacing:0; }
  .home-hero h1 { font-size:clamp(28px,8.2vw,40px); line-height:1.24; letter-spacing:-.045em; margin:16px 0; }
  .home-copy>p { margin:0; max-width:38ch; font-size:16px; line-height:1.75; letter-spacing:0; }
  .home-actions { display:grid; grid-template-columns:1fr 1.2fr; gap:10px; margin-top:24px; }
  .home-actions .button { justify-content:center; padding-inline:10px; }
  .hero { padding:calc(118px + env(safe-area-inset-top,0px)) 24px 36px; text-align:left; }
  .hero h1,.hero .english-title { font-size:clamp(30px,9vw,40px); line-height:1.2; margin-bottom:16px; letter-spacing:-.045em; }
  .hero p { font-size:16px; line-height:1.7; letter-spacing:0; max-width:38ch; margin:0; }
  .work-section { padding:0 20px; max-width:560px; }
  .section-heading { margin-bottom:24px; padding-inline:4px; }
  .section-heading h2 { font-size:28px; line-height:1.25; margin:0 0 12px; }
  .section-heading p { font-size:15px; line-height:1.7; }
  .work-section>.project-grid { gap:20px; grid-template-columns:minmax(0,1fr); }
  .project-card { padding:12px; border-radius:22px; }
  .card-top { margin:2px 2px 12px; gap:8px; }
  .brand-logo { width:112px; height:36px; }
  .brand-lake,.brand-v2 { width:30px; height:30px; }
  .project-label { font-size:9px; letter-spacing:.035em; }
  .project-card[data-card] .cover-viewport { aspect-ratio:16/10; border-radius:12px; }
  .project-card[data-card=sky] .cover-viewport { aspect-ratio:16/9; }
  /* Readable, uncropped screenshots replace the overlapping mobile collage. */
  .project-card[data-card=laser] .cover-viewport { aspect-ratio:auto; }
  .project-card[data-card=laser] .cover-viewport>.growth-cover { position:relative; inset:auto; height:auto; aspect-ratio:auto; grid-template-columns:minmax(0,1fr); gap:12px; padding:12px; }
  .growth-cover .growth-shot { min-width:0; transform:none; box-shadow:none; }
  .growth-cover .growth-shot>span { padding:9px 10px; font-size:9px; }
  .growth-cover .growth-shot img { width:100%; max-width:100%; height:auto!important; margin:0; object-fit:contain!important; }
  .project-card[data-card=laser] .cover-action { position:relative; right:auto; bottom:auto; justify-content:center; border:0; border-radius:0; padding:12px; background:#1c1c1c; color:var(--text); }
  .card-body,.personal-projects .card-body { padding:18px 4px 0; }
  .card-body h2 { font-size:20px; line-height:1.45; margin-bottom:10px; }
  .card-body>p { font-size:14px; line-height:1.75; letter-spacing:0; margin-bottom:16px; }
  .card-role { font-size:11px; line-height:1.6; }
  .card-links { margin-top:16px; padding-top:8px; gap:10px; }
  .card-links a { min-height:44px; font-size:12px; gap:5px; }
  .cover-action { opacity:1; transform:none; right:10px; bottom:10px; padding:7px 10px; font-size:11px; gap:6px; background:#fffffff0; }
  .cover-action .ui-icon { width:15px; height:15px; }
  .personal-projects { margin-top:40px; padding-top:26px; }
  .personal-heading { display:block; margin:0 4px 20px; }
  .personal-heading h2 { font-size:22px; }
  .personal-heading p { font-size:14px; line-height:1.7; margin-top:8px; }
  .personal-projects .project-card { display:block; }
  .all-projects { margin-top:20px; }
  .about-hero { padding-bottom:32px; }
  .about-hero h1 { font-size:clamp(28px,8.4vw,38px); }
  .about-hero>p { font-size:14px; }
  .about-wrap { padding:0 24px; max-width:560px; margin-bottom:48px; }
  .about-intro { display:flex; flex-direction:column-reverse; align-items:stretch; gap:28px; }
  .about-portrait { width:180px; height:180px; margin:0 auto; padding:0; }
  .about-intro h2 { font-size:26px; margin-bottom:16px; }
  .about-intro p { font-size:16px; line-height:1.85; margin:0 0 16px; }
  .capability-section { margin-top:32px; }
  .capability-grid { grid-template-columns:minmax(0,1fr); }
  .capability { padding:24px 0; }
  .capability h3 { font-size:21px; line-height:1.5; margin:10px 0 12px; }
  .capability p { font-size:15px; line-height:1.85; margin-bottom:16px; }
  .experience { margin-top:36px; }
  .experience>h2 { font-size:24px; line-height:1.4; letter-spacing:-.03em; margin-bottom:24px; }
  .experience article { grid-template-columns:1fr; gap:12px; padding:24px 0; }
  .experience time { font-size:12px; }
  .experience h3 { font-size:18px; }
  .experience p { font-size:15px; line-height:1.85; }
  .experience-link { min-height:44px; font-size:13px; margin-top:0; }
  .case-header,.case-content { padding-inline:24px; max-width:560px; }
  .case-header { padding-top:calc(94px + env(safe-area-inset-top,0px)); padding-bottom:32px; }
  .back-link { min-height:44px; margin-bottom:24px; font-size:13px; }
  .case-brand { flex-wrap:wrap; align-items:center; gap:14px; margin-bottom:22px; }
  .case-brand>span:last-child { font-size:11px; line-height:1.65; }
  .case-header h1 { font-size:32px; line-height:1.3; margin-bottom:20px; }
  .case-header>p { font-size:16px; line-height:1.75; margin-bottom:24px; }
  .case-actions { gap:10px; }
  .case-actions .button { min-height:44px; font-size:13px; padding:10px 13px; white-space:normal; }
  .case-summary { padding:36px 0; }
  .case-summary h2,.showcase-heading h2 { font-size:24px; line-height:1.4; margin-bottom:16px; }
  .case-summary>p { font-size:16px; line-height:1.85; margin-bottom:24px; }
  .case-summary .metrics { display:grid; grid-template-columns:1fr; gap:0; padding:0; }
  .case-summary .metrics>div { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:76px; padding:16px 0; }
  .case-summary .metrics>div+div { border-top:1px solid var(--line); }
  .case-summary .metrics strong { font-size:28px; white-space:nowrap; }
  .case-summary .metrics span { font-size:12px; margin:0; text-align:right; max-width:45%; }
  .showcase-heading { display:block; }
  .showcase-heading>span { display:block; margin-bottom:20px; }
  .evidence-grid { grid-template-columns:minmax(0,1fr); gap:20px; }
  .evidence-image { height:auto; aspect-ratio:1.25; }
  .evidence-copy { padding:18px; }
  .evidence-copy h3 { font-size:19px; }
  .evidence-copy p { font-size:14px; line-height:1.75; }
  .case-end { display:block; padding-top:20px; }
  .case-end .button { margin-top:12px; }
  footer { max-width:560px; padding:0 20px; margin:48px auto 16px; }
  .connect { padding:24px 20px; border-radius:24px; gap:28px; }
  .connect h2 { font-size:30px; line-height:1.2; margin-bottom:16px; }
  .connect-copy>p { font-size:16px; line-height:1.75; letter-spacing:0; margin-bottom:24px; }
  .contact-actions { width:100%; display:grid; grid-template-columns:1fr 1.2fr; gap:8px; }
  .contact-actions .button { width:100%; min-width:0; padding-inline:8px; font-size:13px; justify-content:center; }
  .morph-contact,.morph-contact:hover,.morph-contact:focus-visible { width:100%; height:46px; transition:none; }
  .morph-contact .contact-short,.morph-contact:hover .contact-short,.morph-contact:focus-visible .contact-short { opacity:1; filter:none; transform:none; }
  .morph-contact .contact-long { display:none; }
  .contact-panel { min-height:190px; padding:24px 12px; gap:18px; }
  .contact-panel .email { display:flex; align-items:center; min-height:44px; font-size:13px; overflow-wrap:anywhere; }
  .contact-credit { font-size:11px; }
  #toast { bottom:calc(90px + env(safe-area-inset-bottom,0px)); width:max-content; max-width:calc(100% - 40px); text-align:center; }
}

@media (max-width:359px) {
  .home-hero,.hero,.about-wrap,.case-header,.case-content { padding-inline:20px; }
  .home-portrait { width:176px; height:176px; }
  .home-hero h1 { font-size:27px; }
  .home-actions .button { font-size:12px; gap:6px; }
  .work-section,footer { padding-inline:16px; }
  .project-label { font-size:8px; }
  .card-body h2 { font-size:18px; }
  .card-links a { font-size:11px; }
  .connect { padding:22px 16px; }
  .contact-actions { grid-template-columns:1fr 1fr; }
  .contact-actions .button { font-size:12px; gap:5px; }
}

@media (hover:none) {
  .project-card:hover,.project-card:hover .cover,.evidence-card:hover,.social-links a:hover { transform:none; }
}