/* ─── Design Tokens ─────────────────────────────────────── */
:root {
  --color-bg:   #FFFFFF;
  --color-text: #333333;
  --font:       'Roboto', sans-serif;
  --light:      300;
  --regular:    400;
  --bold:       700;
  --black:      900;
  --line:       0.8px solid #333333;

  /* Desktop type scale */
  --nav-size:         20px;
  --h1-size:          28px;
  --body-title-size:  16px;
  --body-size:        16px;
  --footer-size:      14px;

  /* Layout */
  --max-width:    1200px;
  --nav-height:   60px;
  --sidebar-width: 420px; /* width of right column — increase to move divider left */
  --padding:      60px;   /* container / nav left-right padding */
}

/* ─── Base ───────────────────────────────────────────────── */
body {
  font-family: var(--font);
  font-weight: var(--light);
  font-size: var(--body-size);
  color: var(--color-text);
  background-color: var(--color-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ─── Navigation ─────────────────────────────────────────── */
.navbar {
  width: 100%;
  background-color: var(--color-bg);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-inner {
  padding: 28px 60px 52px 60px;
  display: flex;
  align-items: baseline;
  gap: 40px;
}

.nav-name,
.nav-links a {
  font-size: var(--nav-size);
  font-weight: var(--light);
  color: var(--color-text);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

/* Reserve bold width via hidden ::after so hover doesn't shift layout */
.nav-name::after,
.nav-links a::after {
  content: attr(data-text);
  font-weight: var(--black);
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}

.nav-name.active,
.nav-name:hover,
.nav-links a.active,
.nav-links a:hover {
  font-weight: var(--black);
}

.nav-links {
  display: flex;
  gap: 40px;
  align-items: baseline;
}

.nav-border {
  border-bottom: var(--line);
}

/* ─── Page Container ─────────────────────────────────────── */
.container {
  flex: 1;              /* fill full height of <main> */
  width: 100%;
  padding: 0 60px;
  display: flex;
  flex-direction: column;
}

/* ─── Two-Column Layout ──────────────────────────────────── */
.layout-two-col {
  flex: 1;              /* fill full height of .container */
  display: grid;
  grid-template-columns: 3fr 1fr; /* left:right = 3:1 */
  gap: 0;
  align-items: stretch; /* columns same height as grid row */
}

/* Both columns carry their own top/bottom padding
   so the sidebar border-left runs nav-line → footer-line */
.layout-two-col > * {
  padding-top: 48px;
  padding-bottom: 48px;
}

/* Vertical divider line on right column (detail + publications) */
.detail-sidebar,
.pub-sidebar {
  border-left: var(--line);
  padding-left: 40px;
}

.detail-main {
  padding-right: 40px;
  padding-bottom: 60px;
}

/* ─── Footer ─────────────────────────────────────────────── */
footer {
  border-top: var(--line);
}

.footer-inner {
  padding: 20px 60px;
  font-size: var(--footer-size);
  font-weight: var(--light);
  color: var(--color-text);
  text-align: left;
}

/* ─── Divider ────────────────────────────────────────────── */
.divider {
  border: none;
  border-top: var(--line);
  margin: 32px 0;
}

/* ═══════════════════════════════════════════════════════════
   HOME PAGE — 4-cell grid
   [top-left: empty   ] [top-right: image      ]
   [bottom-left: bio  ] [bottom-right: contact ]
═══════════════════════════════════════════════════════════ */
.home-layout {
  flex: 1;
  display: grid;
  grid-template-columns: 3fr 1fr; /* left:right = 3:1 */
  grid-template-rows: auto 1fr;
}

/* Top-left: empty space matching image height */
.home-top-left {
  grid-column: 1;
  grid-row: 1;
}

/* Top-right: image + line below */
.home-image-area {
  grid-column: 2;
  grid-row: 1;
  border-left: var(--line);
  padding: 0;
  margin-right: -60px; /* break out of container right padding → image reaches edge */
}

.home-photo {
  width: 100%;
  height: auto;
  display: block;
  cursor: pointer; /* toggles profile like the name (main.js) */
}

.home-image-line {
  border: none;
  border-top: var(--line);
  margin: 0; /* extends naturally with margin-right: -40px on parent */
}

/* Bottom-left: bio text */
.home-bio {
  grid-column: 1;
  grid-row: 2;
  padding: 48px 40px 48px 0;
}

.home-bio p {
  font-size: var(--h1-size);
  font-weight: var(--light);
  line-height: 1.7;
  margin-bottom: 20px;
}

.home-bio p strong {
  font-weight: var(--black);
}

/* Name toggle: a soft light drifts around inside the name to hint it's clickable.
   Keeps running after clicks, in both bio states. */
#name-toggle {
  cursor: pointer;
  text-underline-offset: 0.15em;
  text-decoration-color: var(--color-text);
  /* Round light spot in the middle of an oversized background;
     moving background-position (x + y) pans the spot around the text */
  background: radial-gradient(ellipse at center,
    #6A6A6A 0%,
    var(--color-text) 70%);
  background-size: 300% 300%;
  background-position: 30% 40%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: name-drift 12s ease-in-out 1s infinite;
}

/* 25%–75% keeps the spot inside the name; the path loops back to the start */
@keyframes name-drift {
  0%, 100% { background-position: 30% 40%; }
  25%      { background-position: 70% 30%; }
  50%      { background-position: 60% 70%; }
  75%      { background-position: 25% 65%; }
}

#name-toggle:hover,
#name-toggle:focus-visible {
  text-decoration: underline;
}

#name-toggle:focus-visible {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  #name-toggle {
    animation: none;
    color: var(--color-text);
    background: none;
    text-decoration: underline;
  }
}

.home-bio a {
  text-decoration: underline;
}

/* Bottom-right: contact + interests */
.home-sidebar-info {
  grid-column: 2;
  grid-row: 2;
  border-left: var(--line);
  padding: 48px 0 24px 40px;
}

.sidebar-section {
  margin-bottom: 36px;
}

.sidebar-section h3 {
  font-size: var(--body-title-size);
  font-weight: var(--bold);
  margin-bottom: 8px;
}

.sidebar-section p,
.sidebar-section a,
.sidebar-section li {
  font-size: var(--body-size);
  font-weight: var(--light);
  line-height: 1.8;
}

.sidebar-section a:hover {
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════
   PROJECTS HOME PAGE
═══════════════════════════════════════════════════════════ */
.project-list {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.project-row {
  display: grid;
  grid-template-columns: 3fr 1fr; /* left:right = 3:1 */
  align-items: stretch;
  text-decoration: none;
  color: inherit;
}

.project-row:hover .project-card-content,
.project-row:hover .project-card-image-col {
  background-color: rgba(0, 0, 0, 0.03);
}

/* Horizontal borders on both cells so they span from container left to viewport right */
.project-card-content,
.project-card-image-col {
  border-bottom: var(--line);
}

.project-row:last-child .project-card-content,
.project-row:last-child .project-card-image-col {
  border-bottom: none;
}


.project-card-content {
  padding: 48px 40px 48px 0;
  margin-left: -60px;       /* extend border to viewport left edge */
  padding-left: 60px;
}

.project-card-image-col {
  border-left: var(--line);
  margin-right: -60px; /* extend image to viewport right edge */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.project-card-title {
  font-size: var(--h1-size);
  font-weight: var(--black);
  line-height: 1.3;
  margin-bottom: 20px;
}

.project-card-desc {
  font-size: 18px;
  font-weight: var(--light);
  line-height: 1.7;
  margin-bottom: 16px;
}

.project-card-desc strong,
.detail-intro strong {
  font-weight: var(--regular);
}

.project-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 20px;
  font-weight: var(--light);
}

.project-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  margin-bottom: 48px;
}

.project-keyword {
  font-size: 13px;
  font-weight: var(--light);
  line-height: 1;
  border: var(--line);
  border-radius: 100px;
  padding: 5px 12px;
}

.project-tag {
  color: var(--color-text);
}

.project-date {
  color: var(--color-text);
}

.project-card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  flex: 1;
  min-height: 0;
  object-fit: cover;
  display: block;
}

.project-card-image--crossfade {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.project-card-image--crossfade.seq-fade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.project-card-image--crossfade.seq-fade img:first-child {
  position: absolute;
}

.project-card-image--crossfade .crossfade-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-card-image--crossfade .crossfade-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-card-image--crossfade .crossfade-img--2 {
  position: absolute;
  top: 0;
  left: 0;
}

/* Sequential crossfade for multiple images (JS-controlled) */
.seq-fade {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

.seq-fade img {
  width: 100%;
  height: auto;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 1;
  transition: opacity 0.2s ease;
}

.seq-fade img:first-child {
  position: relative;
}

/* prev: previous image stays as floor, instantly visible, no transition */
.seq-fade img.seq-prev {
  opacity: 1;
  z-index: 1;
  transition: none;
}

/* active: new image fades in on top */
.seq-fade img.seq-active {
  opacity: 1;
  z-index: 2;
}

/* fig5 (2-image): faster transition */
.seq-fade--2 img {
  transition: opacity 0.05s ease;
}

.detail-hero video {
  width: 100%;
  display: block;
}

/* ═══════════════════════════════════════════════════════════
   PROJECT DETAIL PAGE
═══════════════════════════════════════════════════════════ */
.detail-title {
  font-size: var(--h1-size);
  font-weight: var(--black);
  line-height: 1.3;
  margin-bottom: 20px;
}

.detail-intro {
  font-size: 18px;
  font-weight: var(--light);
  line-height: 1.7;
  margin-bottom: 64px;
}

.detail-intro--spaced,
.project-card-desc--spaced {
  margin-top: 8px;
}

.detail-intro:has(+ .detail-intro--spaced) {
  margin-bottom: 0;
}

.project-card-desc:has(+ .project-card-desc--spaced) {
  margin-bottom: 0;
}

.detail-hero {
  margin-left: -60px;
  margin-right: -40px;
  margin-bottom: 140px;
}

.detail-hero--crossfade {
  position: relative;
}

.crossfade-img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.crossfade-img--2 {
  position: absolute;
  top: 0;
  left: 0;
  animation: crossfade 4s infinite;
}

@keyframes crossfade {
  0%   { opacity: 1; }
  40%  { opacity: 1; }
  50%  { opacity: 0; }
  90%  { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes crossfade3 {
  0%   { opacity: 1; }
  44%  { opacity: 1; }
  50%  { opacity: 0; }
  94%  { opacity: 0; }
  100% { opacity: 1; }
}

.crossfade--p3 .crossfade-img--2 {
  animation: crossfade3 8s infinite;
}

.detail-section-thumb {
  margin-left: -60px;
  margin-right: -40px;
  margin-bottom: 40px;
}

.detail-section-thumb img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.detail-section-thumb .figure-title {
  padding-left: 60px;
}

.detail-hero img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.detail-divider {
  display: none;
}

.qa-block {
  margin-bottom: 120px;
}

.qa-block > p:not(.qa-label) {
  font-size: 18px;
  font-weight: var(--light);
  line-height: 1.7;
}

.qa-block > p:not(.qa-label) + p:not(.qa-label) {
  margin-top: 20px;
}

.qa-block > p:not(.qa-label) + .figures,
.qa-block > ul + .figures,
.qa-block > .problem-cards + .figures {
  margin-top: 40px;
}

.qa-block .figures + .figures {
  margin-top: 16px;
}

/* Problem Cards */
.problem-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: stretch;
  gap: 16px;
  margin-top: 0;
}

.problem-cards--one-col {
  grid-template-columns: 1fr;
}

.problem-cards--two-col {
  grid-template-columns: 1fr 1fr;
}

.problem-cards--four-col {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.problem-cards--three-col-fixed {
  grid-template-columns: 1fr 1fr 1fr;
}

.problem-card-body--list {
  list-style: disc;
  padding-left: 1em;
}

.problem-card-body--list li + li {
  margin-top: 4px;
}

.problem-card-body--list li::marker {
  font-size: 0.8em;
}

.problem-card-body--list li.list-no-bullet {
  list-style: none;
  margin-left: -1em;
}


.problem-card {
  border: var(--line);
  border-radius: 4px;
  padding: 36px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.problem-card .figure-item,
.problem-card .figures {
  margin-top: 0;
}

.conclusion-layout {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 40px;
}

.conclusion-text {
  border-left: 1px solid #333333;
  margin-top: 0;
  width: calc(50% - 20px);
  flex-shrink: 0;
}

.conclusion-img {
  width: calc(50% - 20px);
  height: auto;
  flex-shrink: 0;
  display: block;
  border-radius: 4px;
}

.problem-cards .problem-card .problem-card-title,
.result-box .problem-card-title {
  font-size: 20px;
  font-weight: var(--bold);
  line-height: 1.4;
}

.problem-cards .problem-card .problem-card-body,
.qa-block > .problem-card .problem-card-body {
  font-size: 18px;
  font-weight: var(--light);
  line-height: 1.7;
}

.result-box {
  border: var(--line);
  border-radius: 4px;
  padding: 36px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.result-box .figure-item {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.result-box .figure-item .figure-title {
  margin-top: -12px;
}

.result-scenario {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: stretch;
}

.result-scenario-group {
  flex: 3;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 0.8px solid #DCDCDC;
  border-radius: 4px;
  padding: 16px;
}

.result-scenario-group-items {
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: flex-start;
}

.result-scenario-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 0.8px solid #DCDCDC;
  border-radius: 4px;
  padding: 16px;
}

.problem-card .result-scenario-item {
  gap: 24px;
}

.problem-card .result-scenario-item .result-scenario-label {
  margin-bottom: -16px;
}

.problem-card .result-scenario-item .figure-title {
  margin-top: -16px;
}

.result-scenario-group .result-scenario-item {
  border: none;
  border-radius: 0;
  padding: 0;
}

.result-scenario-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

.result-scenario-label {
  font-size: 16px;
  line-height: 1.4;
  min-height: 1.4em;
}

.result-scenario-sub {
  font-size: 14px;
  font-weight: var(--light);
  color: #555;
  line-height: 1.4;
  margin-bottom: 8px;
}

.alert-steps {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.alert-step {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.problem-card-figure {
  margin-top: auto;
}

.problem-card-figure img,
.problem-card-figure video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

.problem-card-figure-caption {
  font-size: 14px;
  font-weight: var(--light);
  line-height: 1.6;
  margin-top: 8px;
  color: #555;
}

.problem-card-figure-caption + img,
.problem-card-figure-caption + video {
  margin-top: 16px;
}

.qa-label {
  font-size: 24px;
  font-weight: var(--bold);
  margin-bottom: 36px;
}

.qa-statement {
  border-left: var(--line);
  padding-left: 24px;
  margin-top: 0;
  font-size: 20px;
  font-weight: var(--regular);
  font-style: italic;
  line-height: 1.4;
}

.qa-statement.conclusion-text {
  border-left: 2px solid #333333;
}

.conclusion-text-rank {
  margin-top: 8px;
}

.qa-statement--below-cards {
  margin-top: 36px;
}

.qa-statement + .problem-cards {
  margin-top: 36px;
}

.qa-block > .problem-cards + .figure-item {
  margin-top: 36px;
}

.scenario-flow {
  display: flex;
  align-items: stretch;
  gap: 16px;
}

.scenario-step {
  flex: 1;
  border: var(--line);
  border-radius: 4px;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.scenario-step-title {
  font-size: 20px;
  font-weight: var(--bold);
  line-height: 1.4;
}

.scenario-step-body {
  font-size: 18px;
  font-weight: var(--light);
  line-height: 1.7;
}

.scenario-arrow {
  display: none;
}

.scenario-step:nth-child(1) .scenario-step-title::before { content: "① "; }
.scenario-step:nth-child(3) .scenario-step-title::before { content: "② "; }
.scenario-step:nth-child(5) .scenario-step-title::before { content: "③ "; }
.scenario-step:nth-child(7) .scenario-step-title::before { content: "④ "; }
.scenario-step:nth-child(9) .scenario-step-title::before { content: "⑤ "; }

.qa-statement p + p {
  margin-top: 8px;
}

.qa-question {
  font-size: 18px;
  font-weight: var(--regular);
  line-height: 1.5;
  margin-bottom: 12px;
}

.qa-answer {
  font-size: 18px;
  font-weight: var(--light);
  line-height: 1.7;
  margin-bottom: 36px;
  list-style: disc;
  padding-left: 1em;
}

.qa-answer li::marker {
  font-size: 0.8em;
}

.figures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.figure-item--full {
  grid-column: 1 / -1;
}

.figure-item--flat {
  margin-top: 0;
  margin-bottom: 36px;
  margin-left: -60px;
  margin-right: -40px;
}

.figure-item--flat .figure-box {
  border-radius: 0;
  border: none;
}

.figure-item--bleed {
  margin-left: -60px;
  margin-right: -40px;
}

.figure-item--bleed .figure-box {
  border-radius: 0;
}

.figure-item--bleed .figure-title {
  padding-left: 60px;
}

.figure-box {
  background-color: #f5f5f5;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--body-size);
  font-weight: var(--light);
  color: #999;
  border: var(--line);
  border-radius: 4px;
}

img.figure-box,
video.figure-box {
  aspect-ratio: auto;
  width: 100%;
  height: auto;
  display: block;
  border: none;
}

.figure-title {
  font-size: 14px;
  font-weight: var(--light);
  line-height: 1.6;
  margin-top: 12px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-top: 8px;
}

.data-table th,
.data-table td {
  border: 0.8px solid #DCDCDC;
  padding: 8px 12px;
  text-align: left;
  line-height: 1.5;
}

.data-table th {
  font-weight: var(--bold);
  background-color: #F7F7F7;
}

/* Detail Sidebar */
.detail-sidebar-section {
  margin-bottom: 36px;
}

.detail-sidebar-section h3 {
  font-size: 12px;
  font-weight: var(--bold);
  margin-bottom: 10px;
}

.detail-sidebar-section p,
.detail-sidebar-section li {
  font-size: 14px;
  font-weight: var(--light);
  line-height: 1.6;
}

.detail-sidebar-section p + p {
  margin-top: 8px;
}

.detail-sidebar-section li + li {
  margin-top: 10px;
}

.detail-sidebar-section .detail-sidebar-label {
  font-size: 16px;
  font-weight: var(--bold);
  margin-bottom: 8px;
}

.detail-sidebar-section strong {
  font-weight: var(--regular);
}

.detail-sidebar-section .detail-sidebar-heading {
  margin-top: 0;
  font-weight: var(--regular);
}

.detail-sidebar-list + .detail-sidebar-heading {
  margin-top: 20px;
}

.detail-sidebar-list {
  list-style: disc;
  padding-left: 16px;
  margin-top: 8px;
}

.detail-sidebar-list li + li {
  margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════
   PUBLICATIONS PAGE
═══════════════════════════════════════════════════════════ */

/* 2×2 grid: Journal | Categories / Conference | Photos */
.pub-layout {
  flex: 1;
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 0;
  align-items: stretch;
}

.pub-section {
  padding-top: 48px;
  padding-bottom: 80px;
  padding-right: 40px;
}

.pub-section:last-of-type {
  padding-bottom: 140px;
}

.pub-section-title {
  font-size: 24px;
  font-weight: var(--bold);
  margin-bottom: 20px;
}

.pub-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pub-item {
  font-size: 18px;
  font-weight: var(--light);
  line-height: 1.7;
}

.pub-item .pub-self {
  text-decoration: none;
  font-weight: var(--regular);
}

.pub-type-letter {
  font-weight: var(--regular);
}

/* Publications Sidebar – top cell (Type): matches detail sidebar positioning */
.pub-sidebar-top {
  border-left: var(--line);
  padding-left: 40px;
  padding-top: 48px;
  padding-bottom: 48px;
}

/* Publications Sidebar – bottom cell (Photos) */
.pub-photos {
  border-left: var(--line);
  padding-top: 48px; /* align inner border with Conference title */
  margin-right: -60px; /* bleed to viewport right edge */
  display: flex;
  flex-direction: column;
}

.pub-photos-inner {
  border-top: var(--line);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.pub-photos img {
  width: 100%;
  display: block;
  object-fit: cover;
  border-bottom: var(--line);
}


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤ 1024px incl. tablet portrait, or touch tablets ≤ 1366px landscape)
═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px), (pointer: coarse) and (max-width: 1366px) {

  main {
    flex: none;
  }

  /* Mobile type scale */
  :root {
    --nav-size:        16px;
    --h1-size:         20px;
    --body-title-size: 13px;
    --body-size:       13px;
    --footer-size:     10px;
  }

  .nav-inner {
    padding: 20px 20px 32px 20px;
    gap: 20px;
    align-items: center;
  }

  .nav-links {
    gap: 16px;
  }

  .container {
    padding: 0 20px;
  }

  .layout-two-col > * {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .project-list {
    padding-top: 0;
    --sidebar-width: 140px; /* narrower image column on mobile */
  }

  .layout-two-col {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .home-sidebar,
  .detail-sidebar {
    border-left: none;
    padding-left: 0;
  }

  .detail-main {
    padding-right: 0;
  }

  /* Publications mobile: Type(1/3) + Photos(2/3) top, sections full-width below */
  .pub-layout {
    grid-template-columns: 1fr 2fr;
  }

  .pub-sidebar-top {
    grid-column: 1;
    grid-row: 1;
    border-left: none;
    border-bottom: var(--line);
    margin-left: -20px;
    padding-left: 20px;
    padding-top: 28px;
    padding-bottom: 28px;
  }

  .pub-photos {
    grid-column: 2;
    grid-row: 1;
    border-left: var(--line);
    border-bottom: var(--line);
    padding-top: 0;
    margin-right: -20px;
  }

  .pub-photos-inner {
    border-top: none;
  }

  .pub-photos img {
    border-bottom: none;
  }

  .pub-layout > section:first-child {
    grid-column: 1 / span 2;
    grid-row: 2;
    padding-right: 20px;
    padding-top: 28px;
    padding-bottom: 28px;
  }

  .pub-layout > section:nth-child(3) {
    grid-column: 1 / span 2;
    grid-row: 3;
    padding-right: 20px;
    padding-top: 28px;
    padding-bottom: 140px;
  }

  .pub-section-title {
    font-size: 16px;
    margin-bottom: 16px;
  }

  .pub-item {
    font-size: 14px;
  }

  .pub-list {
    gap: 16px;
  }

  .divider {
    margin: 24px 0;
  }

  /* Home mobile: bio full-width (row 1), contact + image 2:1 (row 2) */
  .home-layout {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto auto;
    flex: none;
  }

  .home-top-left { display: none; }

  .home-bio {
    grid-column: 1 / span 2;
    grid-row: 1;
    padding: 80px 0 40px 0;
  }

  .home-sidebar-info {
    grid-column: 1;
    grid-row: 2;
    border-left: none;
    border-top: var(--line);
    margin-left: -20px;
    padding: 32px 0 0 20px;
  }

  .home-image-area {
    grid-column: 2;
    grid-row: 2;
    border-left: var(--line);
    border-top: var(--line);
    padding: 0;
    margin-right: -20px;
    display: flex;
    flex-direction: column;
  }

  .home-image-area picture {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .home-image-line {
    display: none;
  }

  .home-photo {
    flex: 1;
    min-height: 0;
    width: 100%;
    object-fit: cover;
  }

  .sidebar-section h3,
  .sidebar-section p,
  .sidebar-section a,
  .sidebar-section li {
    font-size: 12px;
  }

  .footer-inner {
    font-size: var(--footer-size);
    display: block;
    padding: 20px 20px 20px 16px;
  }

  /* Projects — keep two-column on mobile */
  .project-row {
    grid-template-columns: 3fr 2fr;
  }

  .project-card-image-col {
    margin-right: -20px; /* mobile: extend to viewport right */
  }

  .project-card-title,
  .detail-title {
    margin-bottom: 16px;
  }

  .project-card-desc {
    display: none;
  }

  .problem-cards {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 8px;
  }

  .qa-block > .problem-cards + .figure-item {
    margin-top: 8px;
  }

  .problem-cards--two-col {
    grid-template-columns: 1fr;
  }

  .problem-cards--two-col-mobile {
    grid-template-columns: 1fr 1fr !important;
  }

  .result-scenario {
    flex-direction: column;
    gap: 16px;
  }

  .result-scenario-group {
    flex: unset;
    width: 100%;
  }

  .result-scenario-group-items {
    flex-direction: column;
    gap: 12px;
  }

  .result-scenario-item {
    flex: unset;
    width: 100%;
  }

  .problem-cards--three-col-fixed {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .problem-cards--analysis {
    grid-template-columns: 1fr 1fr;
  }

  .problem-cards--analysis .problem-card:last-child {
    grid-column: 1 / -1;
  }

  .problem-cards--solution {
    grid-template-columns: 1fr;
  }

  .problem-cards--four-col {
    grid-template-columns: 1fr;
  }

  .conclusion-layout {
    flex-direction: column;
    align-items: center;
  }

  .conclusion-text {
    width: 100%;
  }

  .conclusion-img {
    width: 100%;
    border-radius: 4px;
  }

  .problem-card {
    padding: 24px 16px;
    gap: 12px;
  }

  .result-box {
    padding: 24px 16px;
    gap: 16px;
  }

  .problem-card .figure-item,
  .problem-card .figures {
    margin-top: 8px;
  }

  .problem-card-figure {
    margin-top: 0;
  }

  .problem-cards .problem-card .problem-card-title,
  .result-box .problem-card-title {
    font-size: 14px;
  }

  .problem-cards .problem-card .problem-card-body,
  .qa-block > .problem-card .problem-card-body {
    font-size: 14px;
  }

  .figure-title,
  .problem-card-figure-caption {
    font-size: 12px;
    line-height: 1.6;
  }

  .project-card-meta {
    font-size: 14px;
  }

  .detail-intro {
    font-size: 14px;
    margin-bottom: 28px;
  }

  .project-card-content .project-keywords {
    margin-bottom: 0;
  }

  .detail-main .project-keywords {
    margin-bottom: 28px;
  }

  .qa-block {
    margin-bottom: 88px;
  }

  .qa-block > p:not(.qa-label) {
    font-size: 14px;
  }

  .qa-block > p:not(.qa-label) + p:not(.qa-label) {
    margin-top: 16px;
  }

  .problem-cards .problem-card .problem-card-title,
  .result-box .problem-card-title {
    font-size: 16px;
  }
  .problem-cards .problem-card .problem-card-body,
  .qa-block > .problem-card .problem-card-body {
    font-size: 14px;
  }

  .qa-label {
    font-size: 18px;
    margin-bottom: 24px;
  }
  .qa-statement {
    font-size: 16px;
    padding-left: 20px;
  }

  .qa-question {
    font-size: 14px;
  }

  .qa-answer {
    font-size: 14px;
  }

  .scenario-flow {
    flex-wrap: wrap;
    gap: 8px;
  }

  .scenario-arrow {
    display: none;
  }

  .scenario-step {
    padding: 20px 14px;
  }

  .scenario-step-title {
    font-size: 13px;
  }

  .scenario-step-body {
    font-size: 12px;
  }

  /* 1st, 2nd, 3rd step: 3-col */
  .scenario-step:nth-child(1),
  .scenario-step:nth-child(3),
  .scenario-step:nth-child(5) {
    width: calc(33.33% - 6px);
    flex: none;
  }

  /* 4th, 5th step: 2-col */
  .scenario-step:nth-child(7),
  .scenario-step:nth-child(9) {
    width: calc(50% - 4px);
    flex: none;
  }


  .figure-title {
    font-size: 12px;
  }

  .detail-sidebar-section p,
  .detail-sidebar-section li {
    font-size: 12px;
  }

  .detail-sidebar-section p + p {
    margin-top: 4px;
  }

  .detail-sidebar-section li + li {
    margin-top: 8px;
  }

  .detail-sidebar-section .detail-sidebar-label {
    font-size: 14px;
  }

  .detail-sidebar-section .detail-sidebar-heading {
    font-size: 12px;
  }

  .project-card-content {
    padding: 28px 12px 32px 20px;
    margin-left: -20px;
  }

  .detail-divider {
    margin: 24px -20px;
  }

  .pub-section {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Detail */
  .figures {
    grid-template-columns: 1fr;
    margin-left: -20px;
    margin-right: -20px;
    gap: 20px;
  }

  .problem-card .figures,
  .result-box .figures {
    margin-left: 0;
    margin-right: 0;
  }

  .figures--two-col-mobile {
    grid-template-columns: 1fr;
  }

  .figures--two-col-always {
    grid-template-columns: 1fr 1fr;
    margin-left: 0;
    margin-right: 0;
  }

  .figure-box {
    border: none;
  }

  .figure-item--bleed {
    margin-left: -20px;
    margin-right: -20px;
  }

  .figure-item--bleed .figure-title {
    padding-left: 20px;
  }

  .figure-item--flat {
    margin-bottom: 24px;
    margin-left: -20px;
    margin-right: -20px;
  }

  /* Detail sidebar goes below on mobile */
  .detail-layout {
    display: flex;
    flex-direction: column;
  }

  .detail-layout .detail-main {
    padding-top: 28px;
    padding-bottom: 0;
  }

  .detail-layout .detail-sidebar {
    padding-top: 20px;
    padding-bottom: 100px;
  }

  .detail-hero {
    margin-left: -20px;
    margin-right: -20px;
    margin-bottom: 80px;
  }

  .detail-section-thumb {
    margin-left: -20px;
    margin-right: -20px;
  }

  .detail-section-thumb .figure-title {
    padding-left: 20px;
  }

  /* Table mobile font size */
  .data-table {
    font-size: 12px;
  }

  /* Stacked table layout for mobile */
  .data-table--stack {
    display: block;
  }
  .data-table--stack thead {
    display: none;
  }
  .data-table--stack tbody {
    display: block;
  }
  .data-table--stack tbody tr {
    display: block;
    border: 0.8px solid #DCDCDC;
    margin-bottom: 12px;
  }
  .data-table--stack tbody tr:last-child {
    margin-bottom: 0;
  }
  .data-table--stack tbody td {
    display: block;
    border: none;
    border-bottom: 0.8px solid #DCDCDC;
    padding: 8px 12px;
    font-size: 12px;
  }
  .data-table--stack tbody td:last-child {
    border-bottom: none;
  }
  .data-table--stack tbody td::before {
    content: attr(data-label);
    display: block;
    font-weight: var(--bold);
    font-size: 10px;
    margin-bottom: 3px;
    color: #888;
    letter-spacing: 0.04em;
  }
}