:root {
  --bg: #fbfaf8;
  --ink: #161513;
  --ink-soft: #58554e;
  --line: #e7e3db;
  --accent: #a9a08c;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --wrap: 1120px;
  --header-h: 76px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 32px;
}

h1, h2 {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(251, 250, 248, 0.9);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

.logo {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

/* Placeholder blocks — swap these divs for <img> tags once you have real photos */

.placeholder-block {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #ded7c8, #c9c0ab);
  overflow: hidden;
}

/* When placeholders are swapped for real <img> tags, this makes each
   one fill and crop to whichever aspect-ratio preset is active. */
.slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.placeholder-block::after {
  content: attr(data-label);
  position: absolute;
  bottom: 12px;
  left: 12px;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: rgba(22, 21, 19, 0.55);
  background: rgba(251, 250, 248, 0.75);
  padding: 4px 8px;
  border-radius: 2px;
}

.ph-1 { background: linear-gradient(135deg, #e4dccb, #b8ab8f); }
.ph-2 { background: linear-gradient(135deg, #d9d3c6, #a7a08d); }
.ph-3 { background: linear-gradient(135deg, #e8e1d4, #c3b79c); }
.ph-4 { background: linear-gradient(135deg, #dcd6c9, #9c9788); }
.ph-5 { background: linear-gradient(135deg, #e6ddcd, #bdb096); }
.ph-6 { background: linear-gradient(135deg, #d5cfc1, #a9a08c); }

/* Carousel — one image at a time, framed, sized to leave the next section visible */

.carousel-section {
  padding: 28px 0 0;
}

/* Crop presets — the frame picks one of three fixed ratios based on the
   device's own aspect ratio, then scales (or switches preset) to fit the
   window. It never renders at anything other than exactly one of these
   three ratios — width and height scale together via the min() below,
   instead of an independent max-height clamping height alone (which used
   to silently distort the shape away from the true ratio on wide screens).
   Boundaries: portrait <= 4/5, square 4/5–5/4, landscape >= 5/4. */

.carousel-frame {
  --ratio: 0.8; /* 4 / 5, portrait: default/fallback for tall screens */
  --frame-vh: 80vh; /* vertical budget the frame scales to fit within */
  position: relative;
  box-sizing: border-box;
  aspect-ratio: var(--ratio);
  width: min(100%, calc(var(--frame-vh) * var(--ratio)));
  margin: 0 auto;
  background: #fff;
  padding: 14px;
  border-radius: 8px;
  box-shadow: 0 24px 48px rgba(22, 21, 19, 0.12), 0 2px 8px rgba(22, 21, 19, 0.06);
  overflow: hidden;
}

@media (min-aspect-ratio: 4/5) {
  .carousel-frame { --ratio: 1; } /* square-ish screens */
}

@media (min-aspect-ratio: 5/4) {
  .carousel-frame { --ratio: 1.5; } /* 3 / 2, landscape screens */
}

.carousel {
  display: flex;
  height: 100%;
  border-radius: 3px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.carousel::-webkit-scrollbar {
  display: none;
}

.slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: start;
}

.slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 9, 8, 0.45), transparent 45%);
  z-index: 1;
  pointer-events: none;
}

.slide-caption {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 28px;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  color: #fdfcfa;
}

.slide-caption .proj-title {
  font-size: 1.1rem;
  font-weight: 500;
}

.slide-caption .proj-cat {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  opacity: 0.85;
}

.car-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(251, 250, 248, 0.6);
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, background 0.2s ease;
}

.car-nav.visible {
  opacity: 1;
  pointer-events: auto;
}

.car-nav:hover { background: rgba(255, 255, 255, 0.85); }
.car-nav.prev { left: 20px; }
.car-nav.next { right: 20px; }

.car-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 8px;
}

.car-dots .dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(253, 252, 250, 0.5);
  cursor: pointer;
}

.car-dots .dot.active {
  background: #fdfcfa;
}

/* Sections */

.section {
  padding: 96px 0;
}

.section-title {
  font-size: 1.9rem;
  margin-bottom: 56px;
}

/* About */

.section-about {
  padding-top: 64px;
}

.about-copy p {
  color: var(--ink-soft);
  max-width: 68ch;
}

/* Contact */

.section-contact {
  text-align: center;
  border-top: 1px solid var(--line);
}

.contact-sub {
  color: var(--ink-soft);
  margin-bottom: 28px;
}

.contact-email {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 1.4rem;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  transition: opacity 0.2s ease;
}

.contact-email:hover { opacity: 0.6; }

/* Footer */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 32px 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
  text-align: center;
}

@media (max-width: 720px) {
  .section { padding: 80px 0; }
}