/* ══════════════════════════════════════════════════════
   Art Mode — "White Cube Gallery"
   Cargo-faithful: Press Start 2P header, DM Sans body,
   edge-to-edge layout, justified thumbnail grid.
   ══════════════════════════════════════════════════════ */

[data-mode="art"] {
  --bg: #fafafa;
  --ink: rgba(0, 0, 0, 0.85);
  --muted: #555;
  --card: #fafafa;
  --line: #ddd;
  --accent: rgba(0, 0, 0, 0.85);
  /* Contrast (#8 a11y audit): #888 (3.40:1 on #fafafa) → #737373 (4.61:1) so
     the secondary accent / .pill.link text meets WCAG 1.4.3 (4.5:1). */
  --accent-2: #737373;
  --shadow: none;
  --radius: 0px;
  --heading-font: 'Silkscreen', 'Press Start 2P', cursive;
  --body-font: 'DM Sans', 'Metropolis', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --page-max-width: 100%;
  --page-padding: 0;
  --btn-radius: 0px;
  --pill-bg: rgba(0, 0, 0, 0.05);
  --link-pill-bg: rgba(0, 0, 0, 0.05);
  /* Single source of truth for the fixed sidebar width. The main content's
     left offset MUST use this same value, or the content slides under the
     sidebar whenever 24% falls outside the [320, 380] clamp range. */
  --art-sidebar-w: clamp(320px, 24%, 380px);
}

/* ── Nav visibility ──────────────────────────────── */

[data-mode="art"] .top-nav { display: none; }
[data-mode="art"] .sidebar-nav { display: flex; }

/* ── Sidebar (desktop) — matches Cargo: ~22% width ── */

[data-mode="art"] .sidebar-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--art-sidebar-w);
  height: 100vh;
  flex-direction: column;
  padding: 24px 24px 28px 32px;
  overflow-y: auto;
  scrollbar-width: none;
  background: var(--bg);
  z-index: 100;
}

[data-mode="art"] .sidebar-nav::-webkit-scrollbar { display: none; }

[data-mode="art"] .sidebar-wordmark {
  font-family: var(--heading-font);
  font-size: 30px;
  font-weight: 400;
  margin-bottom: 28px;
  color: var(--ink);
  line-height: 1.1;
  text-decoration: none;
  display: block;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: -0.5px;
}

[data-mode="art"] .sidebar-wordmark:hover {
  text-decoration: none;
}

[data-mode="art"] .sidebar-bio { display: none; }

[data-mode="art"] .sidebar-links {
  display: flex;
  flex-direction: column;
  gap: 0;
  counter-reset: project-counter;
}

[data-mode="art"] .sidebar-project-link {
  font-family: var(--body-font);
  font-size: 18px;
  color: var(--ink);
  padding: 0;
  font-weight: 400;
  line-height: 1.4;
  counter-increment: project-counter;
  /* Keep every project title on a single line — the longest
     ("(Dis)Location/Orientation") fits within the min-width sidebar at 18px. */
  white-space: nowrap;
}

[data-mode="art"] .sidebar-project-link::before {
  content: counter(project-counter) ".";
  display: inline-block;
  min-width: 2em;
  margin-right: 0.5em;
  text-align: right;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

[data-mode="art"] .sidebar-project-link:hover {
  text-decoration: none;
  font-weight: 700;
}

[data-mode="art"] .sidebar-project-link.active {
  font-weight: 700;
}

[data-mode="art"] .sidebar-links a:not(.sidebar-project-link) {
  font-family: var(--body-font);
  font-size: 18px;
  color: var(--ink);
  padding: 0;
  line-height: 1.4;
  margin-top: 0;
}

[data-mode="art"] .sidebar-nav .mode-toggle {
  margin-top: auto;
  align-self: flex-start;
}

/* Override the generic accent (black ink) with a warmer terminal color
   that distinguishes the prompt/path from body text in art mode. */
[data-mode="art"] .mode-toggle .mt-prompt,
[data-mode="art"] .mode-toggle .mt-path {
  /* Contrast (#8 a11y audit): #d94e1f (3.98:1 on #fafafa) → #b23a12 (4.74:1)
     so the 11-12px toggle prompt/path text meets WCAG 1.4.3 (4.5:1) while
     keeping the warm terminal-orange character. */
  color: #b23a12;
}

/* ── Main content — flush with sidebar, no extra padding ── */

[data-mode="art"] .site-wrapper {
  padding-left: var(--art-sidebar-w);
}

[data-mode="art"] .main-content {
  max-width: 100%;
  /* Glyph-top alignment with the sidebar wordmark, measured precisely
     (tools/measure-art-align.js):
       - wordmark first-line glyph top: y=21 (Silkscreen, ascent overflows
         line-box top by 3 px)
       - bio first-line glyph top at sidebar's padding-top (24): y=25
       - Δ = 4 px, so main-content needs padding-top = 24 − 4 = 20 px. */
  padding: 20px 20px 48px 32px;
}

/* ── Bio — matches Cargo typography ──────────────── */

[data-mode="art"] .art-bio {
  font-family: var(--body-font);
  font-size: 20px;
  color: var(--ink);
  line-height: 1.4;
  margin-bottom: 20px;
}
/* Multi-paragraph bio — explicit margins so first/last paragraphs sit flush. */
[data-mode="art"] .art-bio p { margin: 0 0 0.6em; }
[data-mode="art"] .art-bio p:last-child { margin-bottom: 0; }
[data-mode="art"] .art-bio a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ── Thumbnail index grid (justified layout) ─────── */

[data-mode="art"] .art-index-grid {
  position: relative;
  width: 100%;
}

[data-mode="art"] .art-thumb {
  display: block;
  text-decoration: none;
  color: var(--ink);
  position: absolute;
}

[data-mode="art"] .art-thumb:hover { text-decoration: none; }

[data-mode="art"] .art-thumb-img {
  width: 100%;
  overflow: hidden;
}

[data-mode="art"] .art-thumb-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
  transition: opacity 0.15s;
}

[data-mode="art"] .art-thumb:hover .art-thumb-img img {
  opacity: 0.85;
}

[data-mode="art"] .art-thumb-title {
  font-family: var(--body-font);
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  display: block;
  color: var(--ink);
  margin-top: 6px;
}

/* ── Project detail view ─────────────────────────── */

[data-mode="art"] .art-project-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
}

[data-mode="art"] .art-project-title {
  font-family: var(--body-font);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
}

[data-mode="art"] .art-project-description {
  font-family: var(--body-font);
  font-size: 20px;
  color: var(--ink);
  line-height: 1.4;
  max-width: 100%;
  margin-bottom: 28px;
  font-weight: 400;
}

[data-mode="art"] .art-project-description p {
  margin-bottom: 16px;
}

[data-mode="art"] .art-project-description p:last-child {
  margin-bottom: 0;
}

[data-mode="art"] .art-project-exhibition {
  font-family: var(--body-font);
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 24px;
}

[data-mode="art"] .art-project-exhibition a {
  text-decoration: underline;
}

/* ── Images — no borders, no rounded corners ─────── */

[data-mode="art"] img { border-radius: 0; }

/* ── Project detail gallery: Cargo-style columnized grid ── */

[data-mode="art"] .art-gallery {
  width: 100%;
}

[data-mode="art"] .columnized-gallery {
  position: relative;
  width: 100%;
}

[data-mode="art"] .columnized-item {
  min-width: 0;
  cursor: zoom-in;
}

[data-mode="art"] .columnized-item:hover { opacity: 0.92; }

[data-mode="art"] .columnized-item .gallery-trigger {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: zoom-in;
  display: block;
  width: 100%;
  height: 100%;
}

[data-mode="art"] .columnized-item img,
[data-mode="art"] .columnized-item video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

[data-mode="art"] .columnized-item figcaption {
  font-family: var(--body-font);
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
  text-align: center;
  font-style: italic;
  font-weight: 300;
}

/* Mobile: JS falls back to stacked flow, but override any leftover absolute
   positioning in case the JS hasn't run yet */
@media (max-width: 640px) {
  /* Shrink bio + project description so the first thumbnail peeks above
     the fold on mobile — the same "there's more below" cue Cargo gives. */
  [data-mode="art"] .art-bio {
    font-size: 15px;
    line-height: 1.4;
    margin-bottom: 16px;
  }
  [data-mode="art"] .art-project-description {
    font-size: 15px;
    line-height: 1.45;
    margin-bottom: 22px;
  }
  [data-mode="art"] .art-project-description p {
    margin-bottom: 12px;
  }
  [data-mode="art"] .columnized-gallery {
    height: auto !important;
  }
  [data-mode="art"] .columnized-item {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    margin-bottom: 8px;
  }
  [data-mode="art"] .columnized-item img,
  [data-mode="art"] .columnized-item video {
    height: auto;
  }
}

/* Legacy justified-item styles (index thumb grid still uses justified layout) */

[data-mode="art"] .justified-item { cursor: zoom-in; }
[data-mode="art"] .justified-item:hover { opacity: 0.88; }

[data-mode="art"] .justified-item .gallery-trigger {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: zoom-in;
  display: block;
}

[data-mode="art"] .justified-item img {
  display: block;
  object-fit: cover;
  border-radius: 0;
}

[data-mode="art"] .justified-item figcaption {
  font-family: var(--body-font);
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
  text-align: center;
  font-style: italic;
  font-weight: 300;
}

/* ── Footer ──────────────────────────────────────── */

[data-mode="art"] .footer {
  border-top: 1px solid var(--line);
  margin-top: 32px;
  padding-top: 24px;
  font-size: 13px;
  font-family: var(--body-font);
}

[data-mode="art"] .footer h2 {
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 16px;
}

/* ── Mobile ──────────────────────────────────────── */

[data-mode="art"] .mobile-menu-toggle { display: none; }

@media (max-width: 960px) {
  [data-mode="art"] .sidebar-nav {
    position: fixed;
    inset: 0;
    width: 100%;
    min-width: unset;
    max-width: unset;
    height: 100%;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    z-index: 200;
    background: var(--bg);
    padding: 32px 28px;
    overflow-y: auto;
    scrollbar-width: none;
  }

  [data-mode="art"] .sidebar-nav::-webkit-scrollbar { display: none; }
  [data-mode="art"] .sidebar-nav.open { transform: translateX(0); }

  [data-mode="art"] .sidebar-close {
    position: absolute;
    top: 28px;
    right: 28px;
    border: none;
    background: none;
    font-size: 28px;
    cursor: pointer;
    color: var(--ink);
    padding: 4px;
    line-height: 1;
  }

  [data-mode="art"] .site-wrapper { padding-left: 0; }

  [data-mode="art"] .main-content {
    padding: 20px 20px 40px;
  }

  [data-mode="art"] .mobile-menu-toggle {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 150;
    height: 52px;
    padding: 0 20px;
    background: var(--bg);
    align-items: center;
    justify-content: space-between;
    border: none;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
  }

  [data-mode="art"] .mobile-menu-toggle .mobile-name {
    font-family: var(--heading-font);
    font-size: 14px;
    font-weight: 400;
    color: var(--ink);
  }

  [data-mode="art"] .mobile-menu-toggle .mobile-hamburger {
    font-size: 22px;
    color: var(--ink);
  }

  /* Floating mode toggle pinned to the mobile header. Lives on top of the
     full-width mobile-menu-toggle button so it stays tappable regardless
     of scroll position — no need to open the sidebar to switch modes. */
  [data-mode="art"] .mode-toggle-mobile {
    display: inline-flex;
    position: fixed;
    top: 8px;
    right: 56px;   /* leaves room for the hamburger at the far right */
    z-index: 160;
    height: 36px;
    padding: 0 10px;
    font-size: 11px;
    background: var(--bg);  /* opaque so the underlying bar doesn't bleed through */
  }

  [data-mode="art"] .main-content {
    padding-top: 68px;
  }

  /* Mobile: stacked images */
  [data-mode="art"] .art-index-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: auto !important;
    position: static;
  }

  [data-mode="art"] .art-thumb {
    position: static !important;
    width: 100% !important;
  }

  [data-mode="art"] .art-thumb-img {
    height: auto !important;
  }

  [data-mode="art"] .art-thumb-img img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain;
  }

  [data-mode="art"] .art-gallery {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: auto !important;
  }

  [data-mode="art"] .justified-item {
    position: static !important;
    width: 100% !important;
  }

  [data-mode="art"] .justified-item img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain;
  }
}

@media (min-width: 961px) {
  [data-mode="art"] .mobile-menu-toggle { display: none; }
  [data-mode="art"] .sidebar-close { display: none; }
}