/* Kshitiz 2026 — one-page portfolio, fixed 1366px grid (from Figma node 28:2) */

:root {
  --colors-indigo: #5856d6; /* Figma variable: Colors/Indigo */
  --btn-ring: #212427; /* hover stroke (requested "#21427" — 5 digits; assumed charcoal) */
}

* { box-sizing: border-box; }

/* `hidden` must beat layout rules like .section { display: flex } */
[hidden] { display: none !important; }

/* neon text selection instead of the browser blue */
::selection {
  background: #cbff2e;
  color: #000;
}

::-moz-selection {
  background: #cbff2e;
  color: #000;
}

body {
  margin: 0;
  min-width: 1374px;
  background: #f7f7f7;
  font-family: 'Roboto Flex', sans-serif;
  font-variation-settings: "GRAD" 0, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712, "wdth" 100;
  color: #000;
}

h2, h3, p { margin: 0; }
img { display: block; }
a { text-decoration: none; color: inherit; }

/* Lenis smooth scroll (recommended base styles) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Custom overlay scrollbar (main.js adds .custom-scrollbar when active;
   without JS / with reduced motion the native scrollbar stays) */
html.custom-scrollbar { scrollbar-width: none; }
html.custom-scrollbar::-webkit-scrollbar { display: none; }

.scroll-thumb {
  position: fixed;
  top: 0;
  right: 4px;
  width: 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.25s ease, background 0.15s ease;
  z-index: 60;
  cursor: grab;
}

.scroll-thumb.visible,
.scroll-thumb:hover { opacity: 1; }

.scroll-thumb:active {
  cursor: grabbing;
  background: rgba(0, 0, 0, 0.35);
}

/* ============ Intro loader ============ */
.site-loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f7f7f7;
  transition: opacity 0.45s ease;
}

.site-loader.done {
  opacity: 0;
  pointer-events: none;
}

/* pill = glass + chip, mirroring the nav brand's two layers.
   It sits exactly where the nav brand lives (left/top set by JS),
   so the whole sequence plays in place — no flight. */
.loader-pill {
  position: absolute;
  padding: 7.5px 8px; /* chip 36 + 15 = the nav pill's 51px height */
  border-radius: 56px;
}

.loader-glass {
  position: absolute;
  inset: 0;
  border-radius: 56px;
  /* exact nav-pill glass */
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.21);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.loader-pill.glass-on .loader-glass { opacity: 1; }

/* staged page reveal after the intro — class is only ever added by the
   loader script, so no-JS and reduced-motion visitors see everything */
.revealing .nav-links,
.revealing .page > *,
.revealing .site-footer { opacity: 0; }

/* identical to the nav brand chip, so the handoff is pixel-perfect */
.loader-chip {
  position: relative;
  z-index: 1;
  height: 36px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  background: transparent;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.16px;
  color: #000;
  white-space: nowrap;
}

.loader-caret {
  display: inline-block;
  width: 1px;
  height: 16px;
  margin-left: 2px;
  background: currentColor;
  animation: loader-blink 0.9s steps(1) infinite;
}

@keyframes loader-blink { 50% { opacity: 0; } }

.loader-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.loader-ring path {
  fill: none;
  stroke: var(--btn-ring);
  stroke-width: 1;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: opacity 0.3s ease;
}

/* ============ Top nav ============ */
.top-nav {
  width: 1374px;
  margin: 0 auto;
  padding: 40px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 50;
  pointer-events: none; /* strip is an overlay; only the pills catch clicks */
}

.nav-pill {
  height: 51px;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 56px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.21);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  pointer-events: auto;
}

.nav-brand {
  padding: 0 8px;
  justify-content: center;
}

.brand-chip {
  height: 36px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--colors-indigo);
  border-radius: 24px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.16px;
  white-space: nowrap;
}

.nav-links {
  padding: 0 32px;
  gap: 32px;
  justify-content: flex-end;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  color: #000;
  white-space: nowrap;
}

/* ============ Page column ============ */
.page {
  width: 1366px;
  margin: 24px auto 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 64px;
}

.section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  scroll-margin-top: 131px; /* keep anchored titles clear of the sticky nav */
}

.section-title {
  font-size: 40px;
  font-weight: 500;
  line-height: 1.2;
  color: rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}

.section-desc {
  width: 673px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  color: #000;
}

.separator {
  width: 1366px;
  height: 5px;
  border-radius: 24px;
  background: #fff;
  box-shadow: inset 0 -1.5px 1px 0 rgba(0, 0, 0, 0.09);
}

/* ============ Introduction ============ */
.intro {
  gap: 32px;
  justify-content: center;
}

.intro-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.title-intro {
  line-height: normal;
  white-space: normal;
  width: 100%;
}

.intro-cols {
  display: flex;
  gap: 24px;
  width: 100%;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  color: #000;
}

.intro-col {
  flex: 1 0 0;
  min-width: 1px;
}

.intro-col-pre { white-space: pre-wrap; }

.action-row {
  display: flex;
  gap: 20px;
  width: 100%;
}

.action-btn {
  /* fixed equal split: 4 × 326.5 + 3 × 20 = 1366 (asymmetric padding skews flex-grow) */
  width: 326.5px;
  flex-shrink: 0;
  position: relative;
  height: 42px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 0.5px 1px 0 rgba(0, 0, 0, 0.12);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  color: #000;
  text-align: center;
  white-space: nowrap;
}

.action-btn.icon-first { padding: 0 32px 0 24px; }

.icon-18 { width: 18px; height: 18px; }
.icon-20 { width: 20px; height: 20px; }
.icon-22 { width: 22px; height: 22px; }
.obj-cover { object-fit: cover; }

/* while the email button confirms the copy, its icon steps aside */
#email-btn.copied img { display: none; }

/* glyph icons invert to white once the button fills (main.js adds .is-filled) */
.action-btn[data-icon-white] img { transition: filter 0.3s ease; }
.action-btn[data-icon-white].is-filled img { filter: brightness(0) invert(1); }

/* hover ring drawn by main.js (clockwise from 12 o'clock, via motion.dev) */
.btn-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.btn-ring path {
  fill: none;
  stroke: var(--btn-ring);
  stroke-width: 1;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: opacity 0.3s ease;
}

/* opted-in buttons drop the ring once the colour fill lands */
.action-btn[data-hide-ring].is-filled .btn-ring path { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  /* no draw animation — the stroke simply appears */
  .action-btn:hover {
    outline: 1px solid var(--btn-ring);
    outline-offset: -1px;
  }
}

/* ============ Selected work ============ */
.work { gap: 40px; }

.work-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.work-count {
  width: 42px;
  padding-bottom: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.work-count p {
  width: 100%;
  font-size: 0;
  line-height: 0;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.3);
}

.work-count .br { font-size: 36px; line-height: normal; }
.work-count .n { font-size: 34px; line-height: normal; }

.projects {
  display: flex;
  flex-direction: column;
  gap: 72px;
  width: 100%;
}

.project {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.project-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.project-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.project-title-row {
  display: flex;
  align-items: center;
  gap: 15px;
  white-space: nowrap;
}

.project-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  color: #000;
}

.project-meta {
  padding: 2px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

.project-year {
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  color: rgba(0, 0, 0, 0.3);
}

.meta-divider {
  width: 2px;
  height: 12px;
  border-radius: 8px;
  background: #d9d9d9;
}

.live-link {
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  color: #2f77e4;
  cursor: pointer;
}

.project-desc {
  width: 673px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  color: rgba(0, 0, 0, 0.4);
}

.project-gallery {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  gap: 16px;
  width: 100%;
}

.shot {
  width: 675px;
  height: 380px;
  background: #fff;
  border-radius: 4px;
  overflow: hidden; /* clip screenshots to the 4px radius */
  box-shadow: 0 0.5px 1px 0 rgba(0, 0, 0, 0.12); /* same as .action-btn */
}

.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* most exports carry a 2px rgba(0,0,0,0.08) stroke baked into the file —
     1.008 clears it on the short edge too (764px × 0.008 ÷ 2 ≈ 3px per side) */
  transform: scale(1.008);
}

/* galleries whose source files are already clean keep their full frame */
.project-gallery.no-crop .shot img {
  transform: none;
}

.shot.h-379 { height: 379px; }

/* ============ Stack ============ */
.stack { gap: 40px; }

.stack-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.stack-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.stack-item {
  width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.stack-icon {
  position: relative;
  width: 56px;
  height: 56px;
}

.stack-icon > img {
  width: 100%;
  height: 100%;
}

.stack-icon.clip { overflow: hidden; }

.react-inner {
  position: absolute;
  top: 6.33%;
  bottom: 6.33%;
  left: 1.09%;
  right: 1.09%;
}

.react-inner img {
  width: 100%;
  height: 100%;
}

.stack-icon > .center-crop {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.stack-icon > .crop-79 { width: 79.644px; height: 79.644px; }
.stack-icon > .crop-64 { width: 64px; height: 64px; }

.stack-label {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: #6a7282;
  text-align: center;
  white-space: nowrap;
}

/* ============ Digital art / Architectural drawings ============ */
.art { gap: 40px; }

.art-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

/* section heading with a trailing icon pinned to the right of the grid */
.head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.section-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.tile-grid {
  width: 1368px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 20px;
}

/* Digital art: 16px gaps, tiles fill the 1366 column at an exact 4:5 ratio */
.art .tile-grid {
  width: 1366px;
  gap: 16px;
}

.art-tile {
  width: calc((100% - 3 * 16px) / 4);
  aspect-ratio: 4 / 5;
  background: #d9d9d9;
  overflow: hidden;
}

.art-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Artworks overlay ---- */
.section-icon-btn {
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 8px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.section-icon-btn:hover { transform: scale(1.06); }
.section-icon-btn:active { transform: scale(0.97); }

.art-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* same glass recipe as the top nav pills */
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.art-overlay[hidden] { display: none; }
.art-overlay.open { opacity: 1; }

/* native bar hidden — the grid gets the same slim thumb as the page */
.art-overlay { scrollbar-width: none; }
.art-overlay::-webkit-scrollbar { display: none; }
.scroll-thumb.overlay-thumb { z-index: 105; }

.art-overlay-inner {
  /* caps at the 1366 grid, but never overflows a narrower viewport */
  width: min(1366px, 100% - 48px);
  margin: 0 auto;
  padding: 56px 0 64px; /* grid starts 56px from the top */
}

/* 3 per row */
.art-overlay-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.art-overlay-grid .art-tile {
  width: auto; /* the grid track sets the width here */
}

/* ---- Single-image viewer (artworks + project shots) ---- */
.art-tile img,
.shot img { cursor: zoom-in; }

.art-viewer {
  --tray-bottom: 40px;  /* lane sits 40px off the bottom */
  --tray-height: 64px;
  --tray-gap: 32px;     /* breathing room between the image and the lane */
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
}

.art-viewer[hidden] { display: none; }

/* the glass sits on its own layer so it can fade while the image zooms */
.art-viewer-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* same glass as the top nav */
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  transition: opacity 0.32s ease;
}

.art-viewer.open .art-viewer-backdrop { opacity: 1; }

/* the tray fades in a beat behind the image */
.art-viewer-tray {
  opacity: 0;
  transition: opacity 0.26s ease 0.08s;
}

.art-viewer.open .art-viewer-tray { opacity: 1; }

.art-viewer-frame {
  position: relative; /* paints above the absolutely-positioned backdrop */
  z-index: 1;
  overflow: hidden; /* clips the baked-in stroke when cropping */
  border-radius: 8px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.21);
  line-height: 0;
  will-change: transform;
}

.art-viewer img {
  /* portraits stay bound by height; landscape shots can run to the 1366 grid */
  max-width: min(90vw, 1366px);
  max-height: 88vh;
  object-fit: contain;
  cursor: default;
}

/* project shots carry the baked stroke; artworks don't, so they're never cropped */
.art-viewer.crop-edge img { transform: scale(1.008); }

/* ---- thumbnail lane (project shots only) ---- */
.art-viewer-tray {
  position: absolute;
  z-index: 2;
  bottom: var(--tray-bottom);
  left: 0;
  right: 0;
  display: none;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.art-viewer.has-tray .art-viewer-tray { display: flex; }

/* reserve the lane's space so the image stays centred above it */
.art-viewer.has-tray {
  padding-bottom: calc(var(--tray-bottom) + var(--tray-height) + var(--tray-gap));
}

.art-viewer.has-tray img#art-viewer-img {
  max-height: calc(88vh - var(--tray-bottom) - var(--tray-height) - var(--tray-gap));
}

.art-viewer-thumb {
  height: var(--tray-height);
  padding: 0;
  border: 0;
  background: none;
  border-radius: 4px;
  overflow: hidden;
  line-height: 0;
  cursor: pointer;
  opacity: 0.55;
  outline: 1.5px solid transparent;
  outline-offset: 2px;
  transition: opacity 0.2s ease, outline-color 0.2s ease, transform 0.2s ease;
}

.art-viewer-thumb img {
  height: 100%;
  width: auto;
  display: block;
  transform: scale(1.02); /* crops the baked stroke at thumbnail scale */
}

.art-viewer-thumb:hover { opacity: 0.85; transform: translateY(-2px); }

.art-viewer-thumb.active {
  opacity: 1;
  outline-color: rgba(0, 0, 0, 0.35);
}

/* clicking anywhere off the image closes, so the empty area reads as dismissible */
.art-viewer-backdrop { cursor: zoom-out; }

.arch { gap: 40px; }

.arch-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

.arch-tile {
  width: 673px;
  height: 379px;
  background: #d9d9d9;
}

/* ============ Footer ============ */
.site-footer {
  width: 1366px;
  margin: 80px auto 0;
  border-top: 1.2px solid rgba(0, 0, 0, 0.1);
  padding: 23px 0 24px;
}

.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer-text {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  color: #878f98;
  white-space: nowrap;
}

.footer-text.updated { color: #bcbcbc; }

.footer-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: #d9d9d9;
}

.footer-pipe {
  font-size: 14px;
  line-height: 1.2;
  color: #d9d9d9;
  user-select: none;
}

/* live clock — tabular figures keep the width steady as digits change */
.clock {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.clock-unit {
  display: inline-block; /* so the tick animation can transform it */
}

.version-wrap { position: relative; }

.version-pill {
  display: flex;
  align-items: center;
  padding: 8px 12px 7px 16px;
  background: #fff;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 0.5px 1px 0 rgba(0, 0, 0, 0.12);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  color: #918d8d;
  white-space: nowrap;
  cursor: pointer;
}

/* opens upward from the pill */
.version-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  min-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.21);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.version-menu.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.version-option {
  padding: 7px 12px;
  border: 0;
  border-radius: 6px;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  color: #918d8d;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.version-option:hover {
  background: #f5f5f5;
  color: #212427;
}

.version-option.is-current { color: #212427; }

.version-option.is-current::after {
  content: '✓';
  margin-left: 10px;
  font-size: 11px;
  color: var(--colors-indigo);
}

.version-pill img {
  width: 20px;
  height: 20px;
}

/* ============================================================
   Mobile (≤767px) — 20px global margin, stacked layout,
   carousels for project shots and artworks
   ============================================================ */
@media (max-width: 767px) {
  body { min-width: 0; }

  /* ---- top nav: 11px ---- */
  .top-nav {
    width: calc(100% - 40px);
    padding: 20px 0;
  }
  .nav-pill { height: 36px; border-radius: 40px; }
  .nav-brand { padding: 0 5px; }
  .brand-chip {
    height: 26px;
    padding: 0 10px;
    border-radius: 16px;
    font-size: 11px;
  }
  .nav-links { padding: 0 14px; gap: 14px; font-size: 11px; }

  /* the intro loader chip mirrors the mobile brand chip */
  .loader-pill { padding: 5px; }
  .loader-chip { height: 26px; padding: 0 10px; font-size: 11px; }
  .loader-caret { height: 11px; }

  /* ---- page column: 20px margins ---- */
  .page {
    width: calc(100% - 40px);
    margin: 12px auto 0;
    gap: 48px;
  }
  .separator { width: 100%; }
  .section { scroll-margin-top: 76px; }
  .section-title { font-size: 20px; }
  .section-desc { width: 100%; font-size: 12px; }

  /* ---- intro: stacked paragraphs, 2×2 buttons ---- */
  .intro { gap: 20px; }
  .intro-cols {
    flex-direction: column;
    gap: 12px;
    font-size: 14px;
  }
  .intro-col { flex: none; width: 100%; }
  .action-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .action-btn,
  .action-btn.icon-first {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    font-size: 12px;
  }

  /* ---- projects: title → description → year, carousel gallery ---- */
  .work { gap: 24px; }
  .projects { gap: 48px; }
  .project { gap: 12px; }
  .project-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .project-info { display: contents; } /* lets desc slot between title and year */
  .project-title-row { order: 1; }
  .project-title { font-size: 12px; }
  .project-desc {
    order: 2;
    width: 100%;
    align-self: auto;
    display: block;
    font-size: 12px;
  }
  .project-meta { order: 3; padding: 0; }
  .project-year, .live-link { font-size: 10px; }
  .meta-divider { height: 10px; }

  .project-gallery {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    scrollbar-width: none;
  }
  .project-gallery::-webkit-scrollbar { display: none; }
  .shot, .shot.h-379 {
    flex: 0 0 100%;
    width: 100%;
    height: auto;
    aspect-ratio: 675 / 380;
    scroll-snap-align: start;
  }

  /* ---- stack: 3 × 4 grid, 11px labels ---- */
  .stack { gap: 20px; }
  .stack-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 20px;
    justify-items: center;
  }
  .stack-label { font-size: 11px; }

  /* ---- artworks: one-at-a-time carousel ---- */
  .art { gap: 20px; }
  .section-icon { width: 32px; height: 32px; }
  .art .tile-grid {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    scrollbar-width: none;
  }
  .art .tile-grid::-webkit-scrollbar { display: none; }
  .art-tile {
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: start;
  }

  /* overlay grid + viewer niceties */
  .art-overlay-inner { width: calc(100% - 40px); }
  .art-viewer { --tray-height: 44px; }
  .art-viewer-tray { gap: 8px; padding: 0 12px; }

  /* ---- footer: 10px, no version switcher ---- */
  .site-footer {
    width: calc(100% - 40px);
    margin-top: 48px;
  }
  .footer-text, .footer-pipe { font-size: 10px; }
  .footer-left { gap: 8px; }
  .footer-right { gap: 8px; }
  .version-wrap, .footer-right .footer-dot { display: none; }
}

/* ---- carousel pagination dots (mobile only) ---- */
.carousel-dots { display: none; }

@media (max-width: 767px) {
  .carousel-dots {
    display: block;
    overflow: hidden;
    margin: 0 auto;
  }
  .carousel-dots-strip {
    display: flex;
    gap: 8px;
    width: max-content;
    transition: transform 0.25s ease;
  }
  .carousel-dot {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d9d9d9;
    transition: transform 0.25s ease, background 0.25s ease;
  }
  .carousel-dot.active { background: var(--colors-indigo); }
  .carousel-dot.small { transform: scale(0.6); }

  /* stack icons scale down on mobile */
  .stack-icon { width: 32px; height: 32px; }
  /* the two centre-cropped logos keep their crop ratio at the smaller size */
  .stack-icon > .crop-79 { width: 45.5px; height: 45.5px; } /* 79.644 × (32/56) */
  .stack-icon > .crop-64 { width: 36.6px; height: 36.6px; } /* 64 × (32/56) */
}

/* ---- mobile notice band ---- */
.webview-band { display: none; }

@media (max-width: 767px) {
  .webview-band {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90; /* above content, below the artwork overlay/viewer */
    background: #000;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  }
  /* keep the page footer readable above the band at the end of the scroll */
  .site-footer { margin-bottom: 34px; }
}