/* leeaux CVLT — rebuilt from the Cargo site (leeauxcvlt.com). Values copied from
   the site's own stylesheet: base 12.96px, h1 4.1rem/800, caption 0.8rem/450,
   body 1.05rem/550, bg #f0efeb, ink rgba(0,0,0,.85). Diatype is Cargo-licensed,
   so Inter stands in (same grotesk skeleton, variable weight). */

:root {
  --base: 12.96px;
  --ink: rgba(0, 0, 0, 0.85);
  --dim: rgba(0, 0, 0, 0.4);
  --bg: #f0efeb;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --mono: Courier, "Courier New", monospace;
}
@media (max-width: 767px) { :root { --base: 13.1px; } }

* { box-sizing: border-box; }
html { font-size: var(--base); -webkit-text-size-adjust: none; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 1.05rem; font-weight: 550; line-height: 1.2;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}
body.no-scroll { overflow: hidden; }
a { color: var(--ink); text-decoration: none; }
a:active, .zoomable:active { opacity: 0.7; }
img { display: block; max-width: 100%; height: auto; }
b { font-weight: 700; }

h1 {
  margin: 0; font-family: var(--sans); font-weight: 800; font-size: 4.1rem;
  line-height: 1; letter-spacing: -0.015em; color: var(--ink);
}
.caption { display: block; font-size: 0.8rem; font-weight: 450; line-height: 1.2; color: var(--ink); }
.caption a { text-decoration: underline; }
.caption--dim { color: var(--dim); margin-top: 1.2rem; padding-left: 0.3rem; }
.caption--num { margin-top: 2.4rem; }
.hello { display: block; font-family: var(--mono); font-weight: bold; font-size: 1.05rem; line-height: 1.2; }

.button-2, .button-2-1 {
  display: inline-block; color: #fff; background: var(--ink);
  border: 0.1rem solid rgba(0, 0, 0, 0.1); border-radius: 0.6rem;
  padding: 0.6rem 1.2rem; font-size: 0.8rem; font-weight: 450; line-height: 1.2;
  filter: drop-shadow(0 0.5rem 0.6rem rgba(0, 0, 0, 0.3));
}
.button-2-1 { font-size: 1.05rem; font-weight: 550; }

/* ---------- top nav ---------- */
.topnav { position: fixed; top: 0; left: 0; right: 0; z-index: 20; padding: 0.9rem 1rem 1rem; pointer-events: none; }
.topnav a { pointer-events: auto; }
.topnav__text { max-width: 60%; }
.topnav--mobile { display: none; }

.marquee { overflow: hidden; white-space: nowrap; width: 100%; max-width: 100%; }
.marquee__track { display: inline-flex; gap: 60vw; animation: marquee 22s linear infinite; padding-left: 2rem; }
.marquee__track .hello { display: inline-block; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation-duration: 60s; } }

/* ---------- projects (right column, 40%) ---------- */
.projects { display: flex; flex-direction: column; align-items: flex-end; width: 100%; }
.project { width: 40%; padding: 0.9rem 1rem 3rem; }
.project:first-child { min-height: 100vh; }
.project__img { display: block; }
.project__img img { width: 100%; }

/* ---------- footer (pinned bottom-left) ---------- */
.footer { position: fixed; left: 0; bottom: 0; z-index: 5; padding: 8rem 1rem 1rem; pointer-events: none; width: 40%; }
.footer__logo { width: 7.9%; min-width: 58px; }

/* ---------- overlays ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 30; overflow-y: auto; overflow-x: hidden;
  background: rgba(255, 255, 255, 0.95); display: flex; justify-content: flex-end;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.overlay::-webkit-scrollbar { display: none; }
.overlay[hidden] { display: none; }
.overlay__layout { width: 50%; min-height: 100vh; padding: 0.9rem 1rem 1rem; background: #fff; }
.overlay--wide { justify-content: flex-start; }
.overlay--wide .overlay__layout { width: 100%; background: transparent; }

.ov-head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.ov-head > div:first-child { flex: 0 0 66.6%; }
.ov-head__close { text-align: right; flex: 1; }
.ov-foot { display: flex; margin-top: 7.2rem; }
.ov-foot > * { flex: 1; }

.gallery { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.2rem; }
.cols { display: flex; gap: 1rem; }
.cols .col { flex: 1; min-width: 0; }
.cols--info .col--3 { flex: 0 0 calc(25% - 0.75rem); }
.cols--info .col--6 { flex: 0 0 calc(50% - 0.5rem); }
.wide-img { width: 100%; }

.row { display: flex; gap: 1rem; }
.row__k { flex: 0 0 25%; }
.row__v { flex: 1; }
.row__v--mid { flex: 0 0 41.66%; }
.row__close { flex: 1; text-align: right; }

.lb { width: 100%; margin-bottom: 0.2rem; }
.lb-row { display: flex; }
.lb-row img { flex: 1; min-width: 0; }

.zoomable { cursor: zoom-in; }

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 50; background: var(--bg);
  display: flex; align-items: center; justify-content: center; padding: 3rem; cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* ---------- mobile ---------- */
@media (max-width: 767px) {
  .topnav--desktop { display: none; }
  .topnav--mobile { display: block; padding: 0.75rem; }
  .topnav__cols { display: flex; gap: 0.75rem; }
  .topnav__left { flex: 0 0 75%; min-width: 0; }
  .topnav__right { flex: 1; text-align: right; }
  .project { width: 100%; padding: 0.75rem 0.75rem 2.25rem; }
  .project:first-child { min-height: 0; padding-top: 5.5rem; }
  .projects { padding-bottom: 0; }
  .footer { position: static; width: 100%; padding: 3rem 0.75rem 2rem; pointer-events: auto; }
  .overlay__layout, .overlay--wide .overlay__layout { width: 100%; padding: 0.75rem; }
  .gallery { gap: 1rem; }
  .cols { flex-direction: column; }
  .cols--info .col--3, .cols--info .col--6 { flex: 0 0 auto; }
  .row__k { flex: 0 0 25%; }
  .lightbox { padding: 10px; }
}