/* ───────── Fonts ───────── */
@font-face {
  font-family: "CentSchbook Mono";
  src: url("fonts/CentSchbook Mono BT W01 Regular.woff2") format("woff2"),
       url("fonts/CentSchbook Mono BT W01 Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ───────── Tokens ───────── */
:root {
  --bg: #f3f3f5;
  --fg: #111111;
  --muted: #9a9a9a;
  --line: #e2e2e2;
  --mono: "CentSchbook Mono", ui-monospace, "Courier New", monospace;
  --pad: 8px;
  --bar-h: 60px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

::selection {
    background: transparent;
    color: blueviolet;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Lenis smooth scroll */
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; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* highlight-on-hover helper (marker sweep) */
.u {
  position: relative;
  z-index: 0;
  padding: 0 3px;
  transition: color 0.25s var(--ease);
}
.u::before {
  content: "";
  position: absolute;
  inset: -1px 0;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
  z-index: -1;
}
.u:hover { color: var(--bg); }
.u:hover::before { transform: scaleX(1); }

/* ───────── Site header (centered) ───────── */
.sitehead {
  text-align: center;
  padding: 1vh;
  letter-spacing: 0.03em;
}
.sitehead-info { text-transform: uppercase; letter-spacing: 0.03em; }
.sitehead-links {color: var(--fg); }

/* ───────── Lead (centered intro) ───────── */
.lead {
  text-align: center;
  max-width: 550px;
  margin: 0 auto;
  padding: 40vh var(--pad) 40vh;
}
.lead-name {
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}
.lead-bio { line-height: 1.1; }

/* ───────── Project grid ───────── */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 6px;
  row-gap: 6vh;
  padding: 0 6px;
}
@media (max-width: 720px) {
  .grid { grid-template-columns: repeat(1, 1fr); }
}
@media (max-width: 460px) {
  .grid { grid-template-columns: 1fr; }
}

.card {
  display: block;
  opacity: 0;
  transform: translateY(42px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.card.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .card { opacity: 1; transform: none; transition: none; }
}
.card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #f1f1f1;
  border-radius: 5px;
}

/* horizontal scrollable gallery inside each card */
.card-gallery {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.card-gallery::-webkit-scrollbar { display: none; }
.card-shot {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
}
.card-shot img,
.card-shot video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* controls — frosted bullet dots over the image */
.card-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transition: all 0.3s var(--ease);
  transform: translateY(12px);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .card:hover .card-controls { opacity: 1; transform: translateY(0);}
}
/* touch — the dots surface while the gallery is being swiped */
.card.is-swiping .card-controls { opacity: 1; transform: translateY(0); }
.card-controls > * { pointer-events: auto; }

/* frosted-glass pill of bullet dots */
.card-dots {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 10px;
}
.dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.dot.is-active { background: #fff; transform: scale(1.2); }

/* project name — caption below the gallery, marker-sweep highlight on hover */
.card-title {
  display: inline-block;
  position: relative;
  z-index: 0;
  margin-top: 4px;
  margin-left: -3px;
  padding: 0 3px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.1;
  color: var(--fg);
  transition: color 0.25s var(--ease);
}
.card-title::before {
  content: "";
  position: absolute;
  inset: -1px 0;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
  z-index: -1;
}
@media (hover: hover) and (pointer: fine) {
  .card:hover .card-title { color: var(--bg); }
  .card:hover .card-title::before { transform: scaleX(1); }
}

/* category + year — lighter grey, below the project name */
.card-meta {
  letter-spacing: 0.03em;
  line-height: 1.1;
  color: var(--muted);
}

/* ───────── Homepage footer ───────── */
.sitefoot {
  position: relative;
  min-height: 85vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12vh var(--pad) 5vh;
}
.foot-contact { line-height: 1.1; }
.foot-copy {
  position: absolute;
  left: 0; right: 0; bottom: 1vh;
}

/* ───────── Page transition — cover slides up over the homepage ───────── */
.page-cover {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--bg);
  transform: translateY(100%);
  transition: transform 0.55s var(--ease);
  pointer-events: none;
  will-change: transform;
}
body.is-leaving .page-cover { transform: translateY(0); }

/* ───────── Project detail (slides up · scrollable) ───────── */
.detail {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 300;
  overflow-y: auto;
  scroll-behavior: smooth;
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.6s var(--ease), visibility 0.6s var(--ease);
}
.detail.is-open { transform: translateY(0); visibility: visible; }

/* on its own page the project flows in normal document scroll */
.detail.is-page {
  position: static;
  transform: none;
  visibility: visible;
  overflow: visible;
}

/* ── open intro: name slides into the centre, then the image slides up ── */
.detail-intro {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.6s var(--ease), visibility 0.6s var(--ease);
}
.detail.intro .detail-intro { opacity: 1; visibility: visible; }
.detail.intro-reveal .detail-intro { opacity: 0; visibility: hidden; }
.detail-intro-name {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s var(--ease), transform 0.7s var(--ease);
}
.detail.intro-name .detail-intro-name { opacity: 1; transform: none; }

/* image starts low + hidden, slides up once the name has arrived */
.detail.intro .shot img { opacity: 0; transform: translateY(64px); }
.detail.intro-reveal .shot img { opacity: 1; transform: none; }

/* first screen — close + gallery + name */
.detail-stage {
  height: 100vh;
  height: 100svh;
  position: relative;
}

/* site name — top centre, blended over the image, links home */
.detail-head {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 6;
  display: flex;
  justify-content: center;
  padding: 1vh var(--pad);
  pointer-events: none;
}
.detail-home {
  pointer-events: auto;
  color: #fff;
  mix-blend-mode: difference;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* full-page gallery — full-height images, natural width, scrolled left/right */
.detail-gallery {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100%;
  z-index: 1;
  display: flex;
  gap: 0px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  transition: height 0.6s var(--ease);
}
.detail-gallery::-webkit-scrollbar { display: none; }
/* when the info opens, the images resize up into the top of the screen */
.detail.info-open .detail-gallery { height: 56vh; }
.shot {
  flex: 0 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shot img {
  height: 100%;
  width: auto;
  display: block;
  transition: transform 0.7s var(--ease), opacity 0.7s var(--ease);
}

/* project name — bottom centre, blended over the image, toggles the info */
.detail-foot {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 6;
  display: flex;
  justify-content: center;
  padding: 1vh var(--pad) 2vh;
  pointer-events: none;
}
.detail-name-btn {
  pointer-events: auto;
  color: #fff;
  mix-blend-mode: difference;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: center;
  cursor: pointer;
  transition: color 0.3s var(--ease);
}
/* project name turns black once the info (white space) is open */
.detail.info-open .detail-name-btn {
  color: var(--fg);
  mix-blend-mode: normal;
}

/* informations — fills the white space below the images, text at the top */
.detail-info-wrap {
  position: fixed;
  left: 0; right: 0;
  top: 56vh;
  bottom: 0;
  z-index: 4;
  background: var(--bg);
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.6s var(--ease);
}
.detail.info-open .detail-info-wrap { transform: translateY(0); }

.detail-overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 60px, 110px);
  padding: 4vh var(--pad) clamp(48px, 8vh, 96px);
  align-items: start;
}
@media (max-width: 720px) {
  .detail-overview { grid-template-columns: 1fr; gap: clamp(24px, 10px, 40px); }
}

.ov-desc { line-height: 1.1; }
.ov-desc p { line-height: 1.1; }

.ov-meta { display: flex; flex-direction: column; }
.meta-row {
  display: grid;
  grid-template-columns: clamp(90px, 9vw, 150px) 1fr;
  gap: 10px;
  align-items: start;
  line-height: 1.1;
  padding: 1px 0;
}

@media (max-width: 720px) {
  .meta-row {gap: 50px;}
}

/* ───────── Project page — mobile: vertical gallery, full-page info ───────── */
@media (max-width: 720px) {
  /* images stack and scroll down, each taking the full screen width */
  .detail-gallery {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    gap: 2px;
  }
  .shot {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
  }
  .shot img {
    width: 100%;
    height: auto;
  }
  /* the description covers the whole page, images don't resize */
  .detail-info-wrap { top: 0; }
  .detail.info-open .detail-gallery { height: 100%; }
}

/* ───────── Information — expands in at the top, pushing the page down ───────── */
.info-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.6s ease;
}
body.is-info .info-wrap { grid-template-rows: 1fr; }

.info {
  min-height: 0;
  overflow: hidden;
}
.info-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 56px);
  padding: 1vh;
}
@media (max-width: 720px) {
  .info-cols { grid-template-columns: 1fr; gap: clamp(20px, 4vh, 32px);}
}

.info-col { display: flex; flex-direction: column; gap: clamp(20px, 3vh, 34px); }
.info-block { line-height: 1.1; }
.info-label {
  display: inline-block;
  text-transform: uppercase;
}
.info-entry { display: block; line-height: 1.1; margin-bottom: 14px; }
.info-entry:last-child { margin-bottom: 0; }