:root {
  --bg: #131313;
  --fg: #ffffff;
  --portrait: url("assets/hero.png");
  --frame: 432px;   /* focus window size */
  --half: 216px;    /* half of frame */
  --bleed: 60px;    /* how far the image boxes extend past the viewport */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { background: var(--bg); }

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: "Geist", sans-serif;
  cursor: crosshair;
  /* cursor position, updated by JS (defaults to the face) */
  --mx: 53vw;
  --my: 40vh;
}

/* ---- Image layers: identical box + mapping so they line up perfectly ---- */
.bg-blur,
.focus-sharp {
  position: absolute;
  top: calc(var(--bleed) * -1);
  left: calc(var(--bleed) * -1);
  width: calc(100vw + var(--bleed) * 2);
  height: calc(100vh + var(--bleed) * 2);
  background: var(--portrait) center / cover no-repeat;
  pointer-events: none;
}

.bg-blur { filter: blur(10px); z-index: 0; }

/* The sharp layer sits above the blur but is clipped to a square window
   centred on the cursor, so only that patch appears in focus. */
.focus-sharp {
  z-index: 1;
  --wt: calc(var(--my) - var(--half) + var(--bleed));                 /* top */
  --wl: calc(var(--mx) - var(--half) + var(--bleed));                 /* left */
  --wr: calc(100vw + var(--bleed) - var(--mx) - var(--half));         /* right */
  --wb: calc(100vh + var(--bleed) - var(--my) - var(--half));         /* bottom */
  -webkit-clip-path: inset(var(--wt) var(--wr) var(--wb) var(--wl));
          clip-path: inset(var(--wt) var(--wr) var(--wb) var(--wl));
}

.bg-fade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(19,19,19,0) 55%, rgba(19,19,19,0.45) 100%);
}

/* ---- Focus window frame + crosshair (follows the cursor) ---- */
.focus-frame {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: var(--frame);
  height: var(--frame);
  border: 1px solid var(--fg);
  transform: translate(calc(var(--mx) - var(--half)), calc(var(--my) - var(--half)));
  pointer-events: none;
}
.crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ---- Foreground content ---- */
.hero-content {
  position: absolute;
  inset: 0;
  z-index: 4;
  padding: 24px 24px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}
.hero-content a,
.hero-content button { pointer-events: auto; }

/* Nav: logo left, links centred, contact right */
.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
}
.logo { display: inline-flex; }

.nav-links {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 40px;
}
.nav-links a,
.contact-btn {
  font-family: "Geist Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
  line-height: 1;
}
.nav-links a { font-size: 14px; opacity: .85; transition: opacity .2s ease; }
.nav-links a:hover { opacity: 1; }

.nav-right { display: flex; align-items: center; gap: 12px; }
.contact { position: relative; }
.contact-btn {
  font-size: 14px;        /* matches the nav links */
  padding: 10px 22px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

/* Persistent Contact on subpages: pinned to the top-right corner, always
   visible even while scrolling. */
.page-contact {
  position: fixed;
  top: 16px;
  right: 24px;
  z-index: 60;
}
.subpage .work-nav { padding-right: 220px; }
.subpage .page-nav .nav { padding-right: 220px; }
.contact-btn:hover,
.contact.open .contact-btn { background: var(--fg); color: var(--bg); }

/* Contact dropdown */
.contact-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 200px;
  display: none;
  flex-direction: column;
  padding: 6px;
  background: rgba(20, 20, 20, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  z-index: 10;
}
.contact.open .contact-menu { display: flex; }
.contact-menu a {
  font-family: "Geist Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
  padding: 12px 14px;
  border-radius: 9px;
  opacity: .85;
  transition: background .18s ease, opacity .18s ease;
}
.contact-menu a:hover { background: rgba(255, 255, 255, 0.08); opacity: 1; }

.menu-btn {
  display: none;
  width: 40px; height: 40px;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  cursor: pointer;
}
.menu-btn span { display: block; width: 16px; height: 1px; background: var(--fg); }

/* ---- Bottom block: meta labels + giant name ---- */
.hero-bottom { display: flex; flex-direction: column; }
.meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 8px;
}
.meta-col p {
  font-family: "Geist Mono", monospace;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--fg);
}
.meta-right { text-align: right; }

.name {
  font-family: "Geist", sans-serif;
  font-weight: 420;
  font-size: 16vw; /* fallback; JS fits it precisely to the content width */
  line-height: 1.2;
  letter-spacing: -0.075em;
  color: var(--fg);
  white-space: nowrap;
  text-align: center;
  width: 100%;
  line-height: 1;
  margin-bottom: -0.2em; /* pull the line box down so the letters rest on the hero's bottom edge */
}

/* ---- About section ---- */
.about {
  background: var(--bg);
  color: var(--fg);
  font-family: "Geist", sans-serif;
  padding: 140px 24px;
}
.about-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.section-label {
  font-family: "Geist Mono", monospace;
  font-size: 25px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 40px;
}
.about-statement {
  font-family: "Geist", sans-serif;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--fg);
  max-width: 22ch;
}
.about-availability {
  font-family: "Geist Mono", monospace;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 28px;
}
.stats {
  display: flex;
  gap: 64px;
  margin-top: 100px;
  flex-wrap: wrap;
}
.stat { flex: 1; min-width: 200px; }
.stat-num,
.stat-plus {
  font-family: "Geist", sans-serif;
  font-weight: 400;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--fg);
}
.stat-label {
  font-family: "Geist Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 20px;
}

/* ---- Standalone sub-pages (Services, Work) ---- */
.subpage {
  background: var(--bg);
  color: var(--fg);
  font-family: "Geist", sans-serif;
  min-height: 100vh;
}
.page-nav { padding: 24px 24px 0; }
.nav-links a.is-active { opacity: 1; }
.subpage .services { padding-top: 96px; min-height: calc(100vh - 200px); }

/* ---- Services section ---- */
.services {
  background: var(--bg);
  color: var(--fg);
  font-family: "Geist", sans-serif;
  padding: 140px 24px;
}
.services-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.services-list {
  list-style: none;
  margin-top: 40px;
}
.service {
  display: flex;
  align-items: baseline;
  gap: 28px;
  padding: 34px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  transition: opacity .25s ease;
}
.service:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.service-index {
  font-family: "Geist Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.55);
  width: 34px;
  flex: none;
}
.service-name {
  font-family: "Geist", sans-serif;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.services-list:hover .service { opacity: .4; }
.services-list .service:hover { opacity: 1; }

/* ---- Work page ---- */
.work-page { min-height: 100vh; }
.work-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
}
.work-nav .logo { display: inline-flex; }
.work-controls {
  display: flex;
  align-items: center;
  gap: 28px;
}
.view-group { display: flex; align-items: center; gap: 12px; }
.view-label,
.info-link,
.view-toggle button {
  font-family: "Geist Mono", monospace;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--fg);
  line-height: 1;
}
.view-label { opacity: .55; }
.info-link { text-decoration: none; opacity: .85; transition: opacity .2s ease; }
.info-link:hover { opacity: 1; }
.view-toggle { display: inline-flex; gap: 6px; }
.view-toggle button {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: .45;
  transition: opacity .2s ease;
}
.view-toggle button:hover { opacity: .8; }
.view-toggle button.is-active { opacity: 1; }

/* Grid: 6 uniform cells, images contained & centred */
/* Uniform grid, copied from the reference (kristinabartosova.com):
   identical tile slots, fixed 64px row / 12px column gap, each cover
   centered inside a square area so every gap is identical. */
.work-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 12px;
  row-gap: 64px;
  padding: 40px 24px 96px;
}
.work-item {
  position: relative;
  aspect-ratio: 199 / 159;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  min-width: 0;
  overflow: hidden;
}
.work-item .ph {
  display: block;
  height: 100%;
  aspect-ratio: 1 / 1;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  background: #1d1d1d;
}
.work-item video.ph,
.work-item img.ph { object-fit: contain; background: transparent; }

/* Hover: image dims and the project name fades in (like the reference) */
.work-item .ph { transition: opacity 0.2s ease-in-out; }
.work-item:hover .ph { opacity: 0; }
.work-title {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 14px;
  color: #fff;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  pointer-events: none;
}
.work-item:hover .work-title { opacity: 1; }

/* Index list (hidden by default, shown when body.view-index) */
.work-index { display: none; padding: 8px 24px 96px; }
.work-index ul { list-style: none; }
.work-index li { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.work-index li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.work-index a {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 22px 0;
  font-family: "Geist", sans-serif;
  font-size: clamp(20px, 2.4vw, 32px);
  letter-spacing: -0.02em;
  color: var(--fg);
  text-decoration: none;
  transition: opacity .2s ease;
}
.work-index ul:hover a { opacity: .4; }
.work-index li a:hover { opacity: 1; }
.idx-num {
  font-family: "Geist Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.55);
  width: 28px;
  flex: none;
}

body.view-index .work-grid { display: none; }
body.view-index .work-index { display: block; }

/* Hide the Info link while a project detail is open */
body.project-open .info-link { visibility: hidden; }

/* ---- Project detail modal ---- */
.project-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
}
body.project-open .project-modal { display: block; }
.project-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.72);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.project-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 95vw;
  max-height: 90vh;
  display: flex;
  align-items: stretch;
  background: #161616;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  overflow: hidden;
}
.project-media {
  position: relative;
  flex: 0 0 auto;
  /* width & height are set by JS to match the active photo/video aspect,
     so the media always fills edge-to-edge with no bars and no cropping. */
  background: #000;
  overflow: hidden;
}
.gallery { position: absolute; inset: 0; }
.gallery-track {
  display: flex;
  height: 100%;
  transition: transform .35s ease;
}
.gallery .slide {
  flex: 0 0 100%;
  height: 100%;
  background: #232323;
}
.gallery .slide img { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.gallery .slide video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s ease, background .2s ease;
}
.project-media:hover .gallery-nav { opacity: 1; }
.gallery-nav:hover { background: rgba(0, 0, 0, 0.6); }
.gallery-nav.prev { left: 14px; }
.gallery-nav.next { right: 14px; }
.gallery-counter {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  letter-spacing: 1px;
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
  padding: 5px 10px;
  border-radius: 999px;
}
/* Single-photo projects: hide arrows + counter */
.project-media.single .gallery-nav,
.project-media.single .gallery-counter { display: none; }
.project-info {
  position: relative;
  flex: 0 0 340px;
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.project-title {
  font-family: "Geist", sans-serif;
  font-weight: 400;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.project-meta { display: flex; flex-direction: column; gap: 22px; }
.project-meta > div { display: flex; flex-direction: column; gap: 6px; }
.project-meta dt {
  font-family: "Geist Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.project-meta dd {
  font-family: "Geist", sans-serif;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.project-close {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 5;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--fg);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  opacity: .7;
  transition: opacity .2s ease;
}
.project-close:hover { opacity: 1; }
@media (max-width: 720px) {
  .project-dialog { flex-direction: column; width: 95vw; }
  .project-media { flex-basis: auto; width: 100% !important; height: auto !important; min-height: 240px; }
  .project-info { flex-basis: auto; }
}

@media (max-width: 1100px) { .work-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 760px)  { .work-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---- Small screens: collapse to hamburger like the original ---- */
@media (max-width: 860px) {
  .nav-links { display: none; }
  .contact-btn { display: none; }
  .menu-btn { display: inline-flex; }
  .name { font-size: 26vw; }
}

@media (max-width: 520px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }