/* ─── RESET & BASE ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --serif: 'EB Garamond', Georgia, serif;
  --mono:  'DM Mono', monospace;
}

html, body { width: 100%; height: 100%; font-family: var(--mono); max-width: 100%; }
body { transition: background 0.4s; overflow: hidden; }
body.dark  { background: #141210; color: rgba(255,255,255,0.88); }
body.light { background: #F5F2EC; color: rgba(0,0,0,0.88); }
a { text-decoration: none; color: inherit; }

/* ─── GRID BACKGROUND ────────────────────────────────────────────────────────── */
.grid-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.dark  .grid-bg {
  background-image: linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size: 40px 40px;
}
.light .grid-bg {
  background-image: linear-gradient(rgba(0,0,0,.07) 1px,transparent 1px),
                    linear-gradient(90deg,rgba(0,0,0,.07) 1px,transparent 1px);
  background-size: 40px 40px;
}
.grid-bg::after { content: ''; position: absolute; inset: 0; }
.dark  .grid-bg::after {
  background-image: linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
                    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size: 8px 8px;
}
.light .grid-bg::after {
  background-image: linear-gradient(rgba(0,0,0,.03) 1px,transparent 1px),
                    linear-gradient(90deg,rgba(0,0,0,.03) 1px,transparent 1px);
  background-size: 8px 8px;
}

/* ─── VIGNETTE ───────────────────────────────────────────────────────────────── */
.vignette { position: fixed; inset: 0; pointer-events: none; z-index: 0; transition: background 0.4s; }
.dark  .vignette { background: radial-gradient(ellipse at center, transparent 48%, rgba(8,7,6,.7) 100%); }
.light .vignette { background: radial-gradient(ellipse at center, transparent 48%, rgba(220,215,205,.7) 100%); }

/* ─── PAGE FADE ──────────────────────────────────────────────────────────────── */
.fade-overlay {
  position: fixed; inset: 0; z-index: 99;
  opacity: 0; pointer-events: none; transition: opacity 0.4s;
}
.dark  .fade-overlay { background: #141210; }
.light .fade-overlay { background: #F5F2EC; }
.fade-overlay.active { opacity: 1; pointer-events: all; }

/* ─── BOTTOM BAR ─────────────────────────────────────────────────────────────── */
.bottom-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
  padding: 14px 23px;
  display: flex; align-items: center; justify-content: space-between;
  pointer-events: none;
}
.bottom-bar > * { pointer-events: all; }

.home-link {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em;
  height: 34px; display: inline-flex; align-items: center;
  cursor: pointer; transition: color 0.2s;
}
.dark  .home-link       { color: rgba(255,255,255,0.2); }
.light .home-link       { color: rgba(0,0,0,0.2); }
.dark  .home-link:hover { color: rgba(255,255,255,0.7); }
.light .home-link:hover { color: rgba(0,0,0,0.7); }

/* ─── TOGGLE ─────────────────────────────────────────────────────────────────── */
.toggle { display: inline-flex; align-items: center; cursor: pointer; }
.toggle-track {
  width: 34px; height: 18px; border-radius: 9px;
  border: 0.5px solid; position: relative;
  transition: background 0.3s, border-color 0.3s;
}
.dark  .toggle-track { background: rgba(255,255,255,.1);  border-color: rgba(255,255,255,.25); }
.light .toggle-track { background: rgba(0,0,0,.12);       border-color: rgba(0,0,0,.25); }
.toggle-thumb {
  width: 11px; height: 11px; border-radius: 50%;
  position: absolute; top: 3px;
  transition: transform 0.3s, background 0.3s;
}
.dark  .toggle-thumb { background: rgba(255,255,255,.7); transform: translateX(3px); }
.light .toggle-thumb { background: rgba(0,0,0,.6);       transform: translateX(20px); }

/* ─── NAV BAR ────────────────────────────────────────────────────────────────── */
.top-gap { height: 35px; flex-shrink: 0; }
.nav {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.nav-item {
  padding: 13px 28px 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer; transition: color 0.2s, font-weight 0.1s;
  text-decoration: none;
}
.dark  .nav-item        { color: rgba(255,255,255,.28); }
.light .nav-item        { color: rgba(0,0,0,.28); }
.dark  .nav-item:hover  { color: rgba(255,255,255,.65); }
.light .nav-item:hover  { color: rgba(0,0,0,.65); }
.dark  .nav-item.active { color: rgba(255,255,255,.9); font-weight: 500; }
.light .nav-item.active { color: rgba(0,0,0,.9);       font-weight: 500; }

/* ─── PAGE WRAP (list + project pages) ──────────────────────────────────────── */
.page-wrap {
  position: relative; z-index: 1;
  width: 100%; height: 100vh;
  display: flex; flex-direction: column;
}

/* ─── HOMEPAGE PANELS ────────────────────────────────────────────────────────── */
.panel {
  position: fixed; border: 0.5px solid;
  padding: 20px 24px; cursor: grab; z-index: 6;
  transition: border-color 0.15s, background 0.4s;
  user-select: none;
}
.panel:active { cursor: grabbing; }
.panel.dragging { z-index: 100 !important; }
body.dark  .panel { border-color: rgba(255,255,255,.14); background: rgba(14,12,10,.82); }
body.light .panel { border-color: rgba(0,0,0,.14);       background: rgba(245,242,236,.9); }
body.dark  .panel.dragging { border-color: rgba(255,255,255,.42); }
body.light .panel.dragging { border-color: rgba(0,0,0,.42); }
body.painting .panel { pointer-events: none; }

.p-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: 7px; transition: color 0.4s;
}
.dark  .p-label { color: rgba(255,255,255,.24); }
.light .p-label { color: rgba(0,0,0,.24); }

.p-title {
  font-family: var(--serif); font-size: 23px; font-weight: 400; line-height: 1;
  transition: color 0.4s;
}
.dark  .p-title { color: rgba(255,255,255,.88); }
.light .p-title { color: rgba(0,0,0,.88); }

.p-sub {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em;
  margin-top: 8px; transition: color 0.4s;
}
.dark  .p-sub { color: rgba(255,255,255,.28); }
.light .p-sub { color: rgba(0,0,0,.28); }

.p-action {
  margin-top: 12px; padding-top: 10px; border-top: 0.5px solid;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  cursor: pointer; transition: color 0.15s, border-color 0.4s;
  pointer-events: all !important;
}
.dark  .p-action { border-top-color: rgba(255,255,255,.08); color: rgba(255,255,255,.32); }
.light .p-action { border-top-color: rgba(0,0,0,.1);        color: rgba(0,0,0,.32); }
.dark  .p-action:hover { color: rgba(255,255,255,.85); }
.light .p-action:hover { color: rgba(0,0,0,.85); }

.p-contact-arrow {
  font-family: var(--mono); font-size: 13px;
  font-style: normal;
  font-variant-emoji: text;
  transition: color 0.15s;
}
.dark  .p-contact-arrow { color: rgba(255,255,255,.35); }
.light .p-contact-arrow { color: rgba(0,0,0,.35); }

/* contact panel hover */
#p-contact { cursor: grab; }
#p-contact:hover .p-label { color: rgba(255,255,255,.5); }
body.light #p-contact:hover .p-label { color: rgba(0,0,0,.5); }
#p-contact:hover .p-title { color: rgba(255,255,255,1); }
body.light #p-contact:hover .p-title { color: rgba(0,0,0,1); }
#p-contact:hover .p-contact-arrow { color: rgba(255,255,255,.85); }
body.light #p-contact:hover .p-contact-arrow { color: rgba(0,0,0,.85); }

/* about page panels — no padding, no border on photo */
#p-photo { padding: 0; border: none; background: transparent; }
#p-bio, #p-exh, #p-ig, #p-cv { padding: 0; }

/* ─── TYPEWRITER ─────────────────────────────────────────────────────────────── */
.typewriter-wrap {
  position: fixed; top: 45px; left: 23px; right: 23px;
  pointer-events: none; z-index: 3;
}
.typewriter-text {
  font-family: var(--mono); font-size: 15px; letter-spacing: 0.04em; line-height: 1.6;
  transition: color 0.4s;
}
.dark  .typewriter-text { color: rgba(255,255,255,.38); }
.light .typewriter-text { color: rgba(0,0,0,.4); }
.tw-cursor {
  display: inline-block; width: 1px; height: 15px;
  margin-left: 1px; vertical-align: middle;
  animation: blink 0.9s step-end infinite; transition: background 0.4s;
}
.dark  .tw-cursor { background: rgba(255,255,255,.35); }
.light .tw-cursor { background: rgba(0,0,0,.35); }
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:0; } }

/* ─── PAINT CANVAS ───────────────────────────────────────────────────────────── */
#paint-canvas { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
body.painting #paint-canvas { pointer-events: all; cursor: crosshair; }

/* ─── BRUSH BUTTON ───────────────────────────────────────────────────────────── */
.bottom-left { display: flex; align-items: center; gap: 12px; }
.brush-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 0.5px solid;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.2s, border-color 0.3s;
}
.dark  .brush-btn { border-color: rgba(255,255,255,.2); }
.light .brush-btn { border-color: rgba(0,0,0,.2); }
.brush-btn.active { background: rgba(200,40,20,.2); border-color: rgba(200,40,20,.6); }
.brush-btn svg { width: 16px; height: 16px; transition: opacity 0.2s; }
.dark  .brush-btn svg { opacity: 0.4; }
.light .brush-btn svg { opacity: 0.4; }
.brush-btn:hover svg, .brush-btn.active svg { opacity: 1; }
.clear-btn {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  cursor: pointer; opacity: 0; pointer-events: none;
  transition: opacity 0.2s, color 0.3s;
}
.clear-btn.visible { opacity: 1; pointer-events: all; }
.dark  .clear-btn { color: rgba(255,255,255,.25); }
.light .clear-btn { color: rgba(0,0,0,.25); }

/* ─── PROJECT LIST ───────────────────────────────────────────────────────────── */
.list-wrap {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  position: relative; z-index: 2; scrollbar-width: none;
  padding-top: 12px; padding-bottom: 52px;
}
.list-wrap::-webkit-scrollbar { display: none; }

.proj-row {
  display: flex; align-items: stretch;
  cursor: pointer; text-decoration: none;
  margin-bottom: 35px;
  transition: opacity 0.2s;
}
.proj-row:hover { opacity: 0.85; }

.row-meta {
  width: 38%; flex-shrink: 0;
  padding: 28px 20px 28px 28px;
  display: flex; flex-direction: column;
  align-items: flex-end; justify-content: center;
  gap: 5px; text-align: right;
}
.proj-name {
  font-family: var(--serif); font-size: 21px; font-weight: 400; line-height: 1.25;
  transition: color 0.2s;
}
.dark  .proj-name { color: rgba(255,255,255,.88); }
.light .proj-name { color: rgba(0,0,0,.88); }
.proj-meta-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
}
.proj-type-line {
  font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap; transition: color 0.4s;
}
.dark  .proj-type-line { color: rgba(255,255,255,.22); }
.light .proj-type-line { color: rgba(0,0,0,.22); }
.proj-year-line {
  font-size: 9px; letter-spacing: 0.06em;
  white-space: nowrap; transition: color 0.4s;
}
.dark  .proj-year-line { color: rgba(255,255,255,.18); }
.light .proj-year-line { color: rgba(0,0,0,.18); }

.row-img {
  width: 36%; flex-shrink: 0; overflow: hidden; position: relative;
}
.row-img-inner {
  width: 100%; aspect-ratio: 16/9;
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.proj-row:hover .row-img-inner { transform: scale(1.025); }

/* ─── PROJECT PAGE ───────────────────────────────────────────────────────────── */
.project-page { overflow: hidden; }
.project-body {
  flex: 1; display: flex; align-items: stretch;
  padding: 12px 0 62px 28px;
  overflow: hidden; min-height: 0;
}

.sidebar {
  flex-shrink: 0; width: 320px;
  border: 0.5px solid; padding: 28px 26px;
  display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none;
  margin-right: 20px;
  transition: border-color 0.4s, background 0.4s;
}
.sidebar::-webkit-scrollbar { display: none; }
.dark  .sidebar { border-color: rgba(255,255,255,.14); background: rgba(14,12,10,.82); }
.light .sidebar { border-color: rgba(0,0,0,.14);       background: rgba(245,242,236,.92); }

.s-title {
  font-family: var(--serif); font-size: 25px; font-weight: 400; font-style: italic;
  line-height: 1.2; margin-bottom: 8px; transition: color 0.4s;
}
.dark  .s-title { color: rgba(255,255,255,.92); }
.light .s-title { color: rgba(0,0,0,.92); }

.s-meta {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em;
  margin-bottom: 22px; transition: color 0.4s;
}
.dark  .s-meta { color: rgba(255,255,255,.3); }
.light .s-meta { color: rgba(0,0,0,.3); }

.s-divider { border: none; border-top: 0.5px solid; margin: 20px 0; transition: border-color 0.4s; }
.dark  .s-divider { border-top-color: rgba(255,255,255,.12); }
.light .s-divider { border-top-color: rgba(0,0,0,.12); }

.s-desc {
  font-family: var(--serif); font-size: 14px; line-height: 1.75;
  margin-bottom: 18px; text-align: justify; text-justify: inter-word;
  transition: color 0.4s;
}
.dark  .s-desc { color: rgba(255,255,255,.68); }
.light .s-desc { color: rgba(0,0,0,.68); }

.s-quote {
  font-family: var(--serif); font-size: 13px; font-style: italic; line-height: 1.7;
  border-left: 1px solid; padding: 10px 0 10px 14px;
  margin-bottom: 18px; text-align: justify; text-justify: inter-word;
  transition: color 0.4s, border-color 0.4s;
}
.dark  .s-quote { color: rgba(255,255,255,.42); border-left-color: rgba(255,255,255,.18); }
.light .s-quote { color: rgba(0,0,0,.42);       border-left-color: rgba(0,0,0,.18); }
.s-quote-attr {
  font-style: normal; font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em;
  display: block; margin-top: 8px; transition: color 0.4s;
}
.dark  .s-quote-attr { color: rgba(255,255,255,.25); }
.light .s-quote-attr { color: rgba(0,0,0,.25); }

.s-cont {
  font-family: var(--serif); font-size: 14px; line-height: 1.75;
  text-align: justify; text-justify: inter-word; transition: color 0.4s;
}
.dark  .s-cont { color: rgba(255,255,255,.68); }
.light .s-cont { color: rgba(0,0,0,.68); }

/* split meta into type + year lines */
.s-type {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em;
  transition: color 0.4s;
}
.dark  .s-type { color: rgba(255,255,255,.3); }
.light .s-type { color: rgba(0,0,0,.3); }
.s-year {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em;
  margin-top: 3px; transition: color 0.4s;
}
.dark  .s-year { color: rgba(255,255,255,.22); }
.light .s-year { color: rgba(0,0,0,.22); }

.s-meta-line {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em;
  margin-top: 8px; transition: color 0.4s;
}
.dark  .s-meta-line { color: rgba(255,255,255,.28); }
.light .s-meta-line { color: rgba(0,0,0,.28); }

.s-link {
  font-family: var(--serif); font-size: 14px; line-height: 1.75;
  margin-top: 14px; transition: color 0.4s;
}
.s-link a {
  text-decoration: underline; text-underline-offset: 3px;
  transition: color 0.2s;
}
.dark  .s-link a { color: rgba(255,255,255,.55); text-decoration-color: rgba(255,255,255,.2); }
.light .s-link a { color: rgba(0,0,0,.55);       text-decoration-color: rgba(0,0,0,.2); }
.dark  .s-link a:hover { color: rgba(255,255,255,.9); }
.light .s-link a:hover { color: rgba(0,0,0,.9); }
.img-strip {
  flex: 1; display: flex; align-items: stretch;
  overflow-x: scroll; overflow-y: hidden;
  scrollbar-width: none;
}
.img-strip::-webkit-scrollbar { display: none; }

.img-slot {
  flex-shrink: 0; height: 100%;
  overflow: hidden; margin-right: 12px;
}
.img-slot:last-child { margin-right: 28px; }
.img-slot img { height: 100%; width: auto; display: block; }

.video-slot { background: #000; display: flex; align-items: center; justify-content: center; }
.video-slot iframe { width: 100%; height: 100%; }

/* ─── ABOUT PAGE PANELS ──────────────────────────────────────────────────────── */
.photo-img {
  width: 500px; height: 320px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.4s;
}
.dark  .photo-img { background: rgba(40,36,32,.9); }
.light .photo-img { background: rgba(220,215,208,.9); }
.photo-img img { width: 500px; height: 320px; object-fit: cover; display: block; }
.photo-placeholder {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em;
  text-align: center; transition: color 0.4s;
}
.dark  .photo-placeholder { color: rgba(255,255,255,.2); }
.light .photo-placeholder { color: rgba(0,0,0,.2); }

.bio-body {
  padding: 18px 20px; font-family: var(--serif); font-size: 15px; line-height: 1.75;
  width: 300px; text-align: justify; text-justify: inter-word; transition: color 0.4s;
}
.dark  .bio-body { color: rgba(255,255,255,.72); }
.light .bio-body { color: rgba(0,0,0,.72); }
.bio-link {
  color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.dark  .bio-link { text-decoration-color: rgba(255,255,255,.2); }
.light .bio-link { text-decoration-color: rgba(0,0,0,.2); }

/* about page exhibition title */
.exh-panel-title {
  font-family: var(--serif); font-size: 22px; font-weight: 400; line-height: 1;
  padding: 18px 20px 14px; transition: color 0.4s;
}
.dark  .exh-panel-title { color: rgba(255,255,255,.88); }
.light .exh-panel-title { color: rgba(0,0,0,.88); }

.exh-list { padding: 0 20px 16px; width: 360px; }
.exh-item {
  padding: 7px 0; border-bottom: 0.5px solid;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
  transition: border-color 0.4s;
}
.exh-item:last-child { border-bottom: none; }
.dark  .exh-item { border-color: rgba(255,255,255,.07); }
.light .exh-item { border-color: rgba(0,0,0,.07); }
.exh-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.exh-name {
  font-family: var(--mono); font-size: 12px; line-height: 1.4; transition: color 0.4s;
}
.dark  .exh-name { color: rgba(255,255,255,.7); }
.light .exh-name { color: rgba(0,0,0,.7); }
.exh-desc {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.02em; line-height: 1.4;
  transition: color 0.4s;
}
.dark  .exh-desc { color: rgba(255,255,255,.28); }
.light .exh-desc { color: rgba(0,0,0,.28); }
.exh-year {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em;
  flex-shrink: 0; width: 90px; text-align: right; padding-top: 1px; transition: color 0.4s;
}
.dark  .exh-year { color: rgba(255,255,255,.25); }
.light .exh-year { color: rgba(0,0,0,.25); }

.link-drag-handle { height: 10px; cursor: grab; }
.panel.dragging .link-drag-handle { cursor: grabbing; }
.link-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px 16px; gap: 24px;
}
.link-title {
  font-family: var(--serif); font-size: 22px; font-weight: 400; line-height: 1;
  cursor: pointer; transition: color 0.4s; text-decoration: none;
}
.dark  .link-title { color: rgba(255,255,255,.88); }
.light .link-title { color: rgba(0,0,0,.88); }
.link-arrow {
  font-size: 12px; font-variant-emoji: text;
  transition: color 0.15s;
}
.dark  .link-arrow { color: rgba(255,255,255,.3); }
.light .link-arrow { color: rgba(0,0,0,.3); }
.link-row:hover .link-title { color: rgba(255,255,255,.95); }
body.light .link-row:hover .link-title { color: rgba(0,0,0,.95); }
.link-row:hover .link-arrow { color: rgba(255,255,255,.85); }
body.light .link-row:hover .link-arrow { color: rgba(0,0,0,.85); }

/* ─── MOBILE ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  html, body { overflow-x: hidden !important; width: 100% !important; max-width: 100% !important; }
  body { overflow-y: auto !important; height: auto !important; }
  .grid-bg, .vignette { position: fixed; width: 100%; }

  /* typewriter */
  .typewriter-wrap { position: fixed !important; top: 30px !important; left: 23px !important; right: 23px !important; width: auto !important; z-index: 3; }
  .typewriter-text { white-space: normal !important; word-break: break-word !important; font-size: 15px !important; }
  .mobile-tw-spacer { display: block; height: 115px; width: 100%; }

  /* homepage panels */
  .panel { position: relative !important; left: auto !important; top: auto !important; width: calc(100% - 32px) !important; margin: 8px 16px !important; cursor: default; }
  #p-contact { margin-bottom: 60px !important; }
  .bottom-bar { position: fixed !important; }
  .p-label  { font-size: 12px !important; }
  .p-title  { font-size: 24px !important; }
  .p-sub    { font-size: 12px !important; }
  .p-action { font-size: 12px !important; }

  /* about panels */
  #p-photo, #p-bio, #p-exh, #p-ig, #p-cv { position: relative !important; left: auto !important; top: auto !important; width: calc(100% - 32px) !important; margin: 8px 16px !important; }
  #p-cv { margin-bottom: 52px !important; }
  .photo-img { width: 100% !important; height: auto !important; aspect-ratio: 3/2; }
  .photo-img img { width: 100% !important; height: 100% !important; object-fit: cover; }
  .bio-body { width: 100% !important; }
  .exh-list { width: 100% !important; }

  /* ── PROJECT LIST (mobile) ────────────────────────────
     Image full width on top, title left + type/year right below */
  .page-wrap { height: auto !important; min-height: 100vh; overflow-y: auto !important; }
  .list-wrap { overflow-y: visible !important; height: auto !important; padding-bottom: 80px; }
  .nav { flex-wrap: wrap; }
  .nav-item { padding: 10px 14px; font-size: 10px; }

  .proj-row { flex-direction: column !important; margin-bottom: 28px; }
  .row-img { width: 100% !important; order: 1; }
  .row-img-inner { aspect-ratio: 16/9; width: 100%; }
  .row-meta { width: 100% !important; order: 2; flex-direction: row !important; align-items: flex-start !important; justify-content: space-between !important; text-align: left !important; padding: 10px 16px 4px !important; gap: 8px !important; }
  .proj-name { font-size: 15px; text-align: left !important; flex: 1; }
  .proj-meta-right { align-items: flex-end !important; text-align: right !important; flex-shrink: 0; }

  /* ── PROJECT DETAIL (mobile) ─────────────────────────
     Sidebar full width at top, images stacked below */
  .project-body { flex-direction: column !important; height: auto !important; padding: 0 0 80px !important; overflow: visible !important; }
  .sidebar { width: 100% !important; margin-right: 0 !important; margin-bottom: 0 !important; border-left: none !important; border-right: none !important; border-top: none !important; overflow: visible !important; }
  .img-strip { flex-direction: column !important; overflow-x: hidden !important; overflow-y: visible !important; height: auto !important; padding: 0 !important; }
  .img-slot { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; height: auto !important; margin: 0 8px 10px !important; }
  .img-slot:last-child { margin-bottom: 0 !important; }
  .img-slot img { width: 100% !important; height: auto !important; display: block; }
}