/* ============================================
   KASHAWN BROWN — PORTFOLIO · styles.css
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Mono:wght@400;500&family=DM+Sans:wght@300;400;500&display=swap');

/* ── Dark Theme (default) ── */
:root {
  /* Always the dark value, in both themes — used for the overlay card's
     frame background so it stays a consistent dark "mat" regardless of
     the active site theme. */
  --overlay-frame-bg: #0d0d0f;
}
:root,
[data-theme="dark"] {
  --bg:          #0d0d0f;
  --surface:     #141416;
  --surface2:    #1c1c1f;
  --border:      #2a2a2e;
  --border2:     #363639;
  --ink:         #e8e6e1;
  --ink2:        #a09d98;
  --ink3:        #6a6764;
  --accent:      #e8734a;
  --accent2:     #5b9cf6;
  --accent-glow: rgba(232,115,74,0.10);
  --nav-bg:      rgba(13,13,15,0.92);
  --grain-op:    1;
}

/* ── Light Theme ── */
[data-theme="light"] {
  --bg:          #f5f2ec;
  --surface:     #edeae3;
  --surface2:    #e3dfd7;
  --border:      #d4cfc6;
  --border2:     #c2bdb4;
  --ink:         #0f0e0d;
  --ink2:        #524f4c;
  --ink3:        #7a7670;
  --accent:      #c45c2e;
  --accent2:     #2e6cc4;
  --accent-glow: rgba(196,92,46,0.08);
  --nav-bg:      rgba(245,242,236,0.93);
  --grain-op:    0.45;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-snap-type: y proximity; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  line-height: 1.7;
  min-height: 100vh;
  transition: background 0.3s, color 0.3s;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: var(--grain-op);
  transition: opacity 0.3s;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

/* ── Layout ── */
.page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0px 52px 80px;
}

/* ── Nav ── */
nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 52px;
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  padding: 0 52px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  transition: background 0.3s, border-color 0.3s;
}
nav .nav-name {
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s;
}
nav .nav-name:hover { color: var(--accent); }
nav .nav-links { display: flex; align-items: center; gap: 24px; }
nav .nav-links a {
  color: var(--ink2);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  transition: color 0.2s;
}
nav .nav-links a:hover,
nav .nav-links a.active { color: var(--accent); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--ink2);
  transition: transform 0.25s ease, opacity 0.2s ease, background 0.2s ease;
}
.nav-toggle:hover span { background: var(--accent); }
.nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

#theme-toggle {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink2);
  background: none;
  border: 1px solid var(--border);
  padding: 5px 10px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  margin-left: 6px;
}
#theme-toggle:hover { color: var(--accent); border-color: var(--accent); }

/* ── Header ── */
.header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 24px;
  padding: 68px 0 40px;
  border-bottom: 1px solid var(--border2);
  margin-bottom: 52px;
  animation: fadeUp 0.7s ease both;
}
.header-label {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.header-label::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 1px;
  background: var(--accent);
}
.open-badge {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4ade80;
  border: 1px solid #4ade8040;
  padding: 2px 9px;
  border-radius: 2px;
  background: #4ade800e;
}
.header-name {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(44px, 5.5vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.header-name em { font-style: italic; color: var(--accent); }

.header-meta {
  text-align: right;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--ink2);
  line-height: 2.2;
}
.header-meta a {
  color: var(--accent2);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  transition: color 0.2s;
}

.header-meta p {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.header-meta a:hover { color: var(--accent); }

/* ── Intro Banner ── */
.intro-banner {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-left: 3px solid var(--accent);
  padding: 32px 44px;
  margin-bottom: 64px;
  position: relative;
  overflow: hidden;
  animation: fadeUp 0.7s 0.1s ease both;
  transition: background 0.3s, border-color 0.3s;
}
.intro-banner::after {
  content: '{ }';
  position: absolute;
  right: 36px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'DM Mono', monospace;
  font-size: 88px;
  color: var(--ink);
  opacity: 0.025;
  pointer-events: none;
  line-height: 1;
}
.intro-banner p {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--ink2);
  max-width: 830px;
}
.intro-banner p strong { font-weight: 500; color: var(--ink); }

/* ── Section Shell ── */
.section { margin-bottom: 72px; }

.section-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
.section-num {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.12em;
  min-width: 28px;
}
.section-title {
  font-family: 'DM Serif Display', serif;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.section-rule { flex: 1; height: 1px; background: var(--border); }

/* Keep the "Projects" separator visible while scrolling through the carousel */
#projects .section-header {
  position: sticky;
  top: 52px;
  z-index: 25;
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 16px 0;
  margin-bottom: 0;
}

.section-prose {
  color: var(--ink2);
  font-size: 15.5px;
  line-height: 1.5;
  margin-bottom: 15px;
}

/* ── About Cards (full-width grid, with hover effect) ── */
.about-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 24px;
}
.about-block {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 20px 22px;
  transition: border-color 0.2s, transform 0.2s, background 0.2s;
}
.about-block:hover {
  border-color: var(--accent);
  background: var(--surface2);
  transform: translateY(-2px);
}
.about-block-label {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.about-block-value {
  font-size: 13.5px;
  color: var(--ink2);
  line-height: 1.7;
}

/* ── Projects — Scroll-Driven Carousel ── */

/* Mobile nav: dots + current-project label (hidden on desktop) */
.projects-mobile-nav {
  display: none;
  position: sticky;
  top: 118px;
  z-index: 20;
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-top: none;
  padding: 12px 16px;
  margin-bottom: 8px;
  text-align: center;
}
.mobile-label {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
  transition: opacity 0.25s ease;
}
.mobile-dots { display: flex; justify-content: center; gap: 9px; }
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid var(--border2);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.dot.active {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.25);
}

/* Carousel shell: fills the available column by default (biggest
   possible card). Once the viewport is wide enough (see media query
   below) the track narrows and centers, opening a dedicated buffer to
   its left for the rail to float in — outside the card, never
   competing with it for space. Below that width the mobile dots+label
   nav takes over instead. */
.projects-carousel { margin: 0 auto; }

.projects-rail {
  position: fixed;
  top: 50%;
  left: calc((100vw - 1150px) / 2 - 270px);
  transform: translateY(-50%);
  z-index: 15;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.rail-list { list-style: none; display: grid; gap: 4px; }
.rail-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-left: 2px solid var(--border);
  padding: 9px 0 9px 16px;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink3);
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, padding-left 0.25s ease;
}
.rail-item:hover { color: var(--ink2); }
.rail-item.active {
  color: var(--accent);
  border-left-color: var(--accent);
  padding-left: 22px;
}

.projects-track { display: grid; gap: 0; }

.project-slide {
  min-height: 90vh;
  display: flex;
  align-items: center;
  scroll-snap-align: center;
  transition: opacity 0.4s ease, transform 0.4s ease, filter 0.4s ease;
  will-change: opacity, transform, filter;
}
/* Native CSS snap has no sense of direction, so it's disabled on the two
   end slides entirely — arriving at Career-Tracker from About, or leaving
   WS-PASS into Contact, stays completely free. Snapping onto these two
   when genuinely navigating within the carousel (e.g. back from MicroFlix,
   or down from Circle Accountability) is instead handled directionally by
   the JS correction in script.js, gated on `railLocked`. */
.project-slide:first-child,
.project-slide:last-child { scroll-snap-align: none; }
.project-slide .project-card { width: 100%; }

.project-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.3s;
  min-height: 460px;
}
.project-slide.is-active .project-card {
  border-color: var(--accent2);
  box-shadow: 0 8px 50px rgba(0,0,0,0.28), 0 0 60px var(--accent-glow);
}

/* Flip layout for even slides */
.project-slide:nth-child(even) .project-card {
  grid-template-columns: 1fr 1fr;
  direction: rtl;
}
.project-slide:nth-child(even) .project-card > * { direction: ltr; }

/* Screenshot panel */
.project-visual {
  overflow: hidden;
  background: var(--surface2);
  border-right: 1px solid var(--border);
  position: relative;

  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-slide:nth-child(even) .project-card .project-visual {
  border-right: none;
  border-left: 1px solid var(--border);
}

.project-screenshot {
  width: 100%;
  height: 100%;
  display: block;

  object-fit: contain;
  object-position: center;

  /* subtle “designed” frame */
  background: var(--bg);
  border: 1px solid var(--border2);

  transition: transform 0.5s ease;
}

/* Per-project image gallery (manual arrows, no autoplay, no dots) */
.project-gallery { padding: 12px; }
.gallery-track {
  position: relative;
  width: 100%;
  height: 100%;
}
.gallery-image {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.gallery-image.active {
  opacity: 1;
  pointer-events: auto;
}
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border2);
  background: var(--nav-bg);
  backdrop-filter: blur(6px);
  color: var(--ink2);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.gallery-arrow:hover { color: var(--accent); border-color: var(--accent); }
.gallery-prev { left: 20px; }
.gallery-next { right: 20px; }

.project-type-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.project-type {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.project-links { display: flex; gap: 8px; flex-shrink: 0; }
.icon-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border2);
  color: var(--ink2);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.icon-link:hover { color: var(--accent2); border-color: var(--accent2); }

.project-header { margin-bottom: 10px; }
.project-title {
  font-family: 'DM Serif Display', serif;
  font-size: 29px;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
}

.project-one-liner {
  font-size: 14.5px;
  color: var(--ink2);
  line-height: 1.7;
  margin-bottom: 18px;
}

.project-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 20px;
}
.project-tag {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  padding: 3px 8px;
  color: var(--ink2);
  letter-spacing: 0.04em;
  transition: background 0.3s;
}

.project-bullets {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 8px;
  margin-top: auto;
}
.project-bullets li {
  font-size: 13.5px;
  color: var(--ink3);
  display: flex;
  gap: 10px;
  line-height: 1.65;
}
.project-bullets li::before {
  content: "→";
  color: var(--accent);
  font-family: 'DM Mono', monospace;
  flex-shrink: 0;
}

/* ── Projects — full-bleed overlay cards ── */
.project-card--overlay {
  display: block;
  position: relative;
  min-height: 640px;
  background: var(--overlay-frame-bg);
}
.project-card--overlay .project-visual {
  position: absolute;
  inset: 0;
  padding: 0;
  border: none;
  background: transparent;
}
/* The frame (not the visual/arrow layer) is what grows on hover, so the
   arrows stay put in a fixed position instead of moving with the image. */
.project-card--overlay .overlay-frame {
  position: absolute;
  inset: 16px;
  overflow: hidden;
  transition: inset 0.4s ease;
}
.project-card--overlay:hover .overlay-frame { inset: 0; }
.project-card--overlay .project-screenshot {
  border: none;
  background: var(--overlay-frame-bg);
  transition: filter 0.4s ease;
}
.project-card--overlay:hover .project-screenshot { transform: none; filter: brightness(1.08) saturate(1.05); }

/* Thin full-height click strips instead of floating round buttons — sized
   to just the margin between the image edge and where the panel's own
   text starts, so they don't eat into the picture. Arrow glyph is
   centered and low-contrast by default, brightening on hover. Scoped to
   the overlay design only; the original cards keep their round buttons. */
.project-card--overlay .gallery-arrow {
  top: 0;
  bottom: 0;
  height: auto;
  width: 34px;
  max-width: 8%;
  border-radius: 0;
  border: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: rgba(245,244,241,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  opacity: 1;
  transform: none;
  transition: color 0.25s ease, background 0.25s ease, backdrop-filter 0.25s ease;
}
.project-card--overlay .gallery-prev {
  left: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.22), transparent);
}
.project-card--overlay .gallery-next {
  right: 0;
  background: linear-gradient(to left, rgba(0,0,0,0.22), transparent);
}
.project-card--overlay .gallery-arrow:hover {
  color: var(--accent);
  background: rgba(0,0,0,0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.project-card--overlay.project-card--portrait { min-height: min(760px, 88vh); }

.project-overlay-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 88px 40px 36px;
  background: rgba(4,4,6,0.95);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  /* Fade the whole panel (tint + blur together) out over a fixed band at
     the top, so it blends into the clear image instead of cutting off
     hard — a fixed px band (not a %) means it doesn't eat into the type
     label regardless of how tall the panel's content is. The generous
     top padding keeps real content below that band. */
  -webkit-mask-image: linear-gradient(to top, black 0, black calc(100% - 80px), transparent 100%);
  mask-image: linear-gradient(to top, black 0, black calc(100% - 80px), transparent 100%);
  transition: opacity 0.3s ease;
}
.project-overlay-panel .project-type { color: var(--accent); }
.project-overlay-panel .project-title { color: #f5f4f1; }
.project-overlay-panel .project-one-liner { color: rgba(245,244,241,0.82); }
.project-overlay-panel .project-tag {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.2);
  color: rgba(245,244,241,0.85);
}
.project-overlay-panel .project-bullets li { color: rgba(245,244,241,0.72); }

/* Links live outside the panel so they stay reachable even when the
   panel is hidden via the eye toggle. */
.overlay-links {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 6;
  display: flex;
  gap: 8px;
}
.overlay-links .icon-link {
  background: rgba(6,6,8,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-color: rgba(255,255,255,0.3);
  color: rgba(245,244,241,0.9);
}
.overlay-links .icon-link:hover { border-color: var(--accent); color: var(--accent); }

.overlay-toggle {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 6;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(6,6,8,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: rgba(245,244,241,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.overlay-toggle:hover { color: var(--accent); border-color: var(--accent); }
.overlay-toggle .icon-eye-off { display: none; }
.project-card--overlay.panel-hidden .overlay-toggle .icon-eye { display: none; }
.project-card--overlay.panel-hidden .overlay-toggle .icon-eye-off { display: block; }
.project-card--overlay.panel-hidden .project-overlay-panel {
  opacity: 0;
  pointer-events: none;
}

/* ── CTA ── */
.cta {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-top: 2px solid var(--accent);
  padding: 44px 48px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 36px;
  box-shadow: 0 0 80px var(--accent-glow);
  transition: background 0.3s, border-color 0.3s;
}
.cta-text {
  font-family: 'DM Serif Display', serif;
  font-size: 26px;
  line-height: 1.35;
  color: var(--ink);
}
.cta-text em { font-style: italic; color: var(--accent); }
.cta-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}
.cta-contact a {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: var(--accent2);
  text-decoration: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
}
.cta-contact a:hover { color: var(--accent); }

/* ── Footer ── */
.footer {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--ink3);
  letter-spacing: 0.1em;
}

/* ── Back to top ── */
.back-to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 60;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border2);
  background: var(--nav-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--ink2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease, color 0.2s ease, border-color 0.2s ease;
}
.back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-to-top:hover { color: var(--accent); border-color: var(--accent); }

/* ── Animations ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* ── Responsive ── */

/* Below this, there isn't a wide enough gutter for the rail to sit
   outside the card without overlapping it — fall back to the mobile
   dots+label nav instead. Above it, the rail floats in that gutter. */
@media (max-width: 1699px) {
  .projects-rail { display: none; }
  .projects-mobile-nav { display: block; }
}
@media (min-width: 1700px) {
  .projects-carousel { max-width: 1150px; }
}

@media (max-width: 960px) {
  .project-card,
  .project-slide:nth-child(even) .project-card {
    grid-template-columns: 1fr;
    direction: ltr;
  }
  .project-visual { height: 220px; border-right: none; border-left: none; border-bottom: 1px solid var(--border); }
  .project-slide:nth-child(even) .project-card .project-visual { border-left: none; border-bottom: 1px solid var(--border); }
  .about-grid { grid-template-columns: repeat(2, 1fr); }
  .project-slide { min-height: auto; padding: 34px 0; }
}
@media (max-width: 640px) {
  .page { padding: 36px 24px 80px; }
  nav { padding: 0 24px; }
  .nav-toggle { display: flex; }
  nav .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--nav-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    padding: 4px 24px 12px;
  }
  nav .nav-links.open { display: flex; }
  nav .nav-links a,
  nav .nav-links #theme-toggle {
    width: 100%;
    padding: 12px 0;
    margin-left: 0;
    border-bottom: 1px solid var(--border);
  }
  .header { grid-template-columns: 1fr; padding-top: 44px; }
  .header-meta { text-align: left; }
  .cta { grid-template-columns: 1fr; padding: 28px 24px; }
  .cta-contact { align-items: flex-start; }
  .intro-banner { padding: 24px 28px; }
  .about-grid { grid-template-columns: 1fr; }
  .gallery-arrow { width: 30px; height: 30px; font-size: 16px; }
  .gallery-prev { left: 10px; }
  .gallery-next { right: 10px; }
}