/* ===== Portfolio page (simplified frame + tight beige gutters) ===== */
:root {
  --brand: #dac2a9;
  --ink: #222;
  --beige: #dac2a9; /* beige seen between tiles */
  --tile-dark: #0f0f12;
  --tile-light: #f1efe9;
}

/* Desktop/Tablet: black at top, white after scroll */
@media (min-width: 881px) {
  .site-header:not(.scrolled) .primary-nav a {
    color: #222;
  }
  .site-header.scrolled .primary-nav a {
    color: #fff;
  }

  .site-header:not(.scrolled) .nav-toggle {
    color: #111;
  }
  .site-header.scrolled .nav-toggle {
    color: #fff;
  }
}

/* Mobile: menu text is ALWAYS white (dark dropdown) */
@media (max-width: 880px) {
  .site-header .primary-nav a {
    color: #fff;
  }
  .site-header .nav-toggle {
    color: #fff;
  }
  .site-header .primary-nav .btn-cta {
    color: #fff;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.85);
  }
}

.site-header:not(.scrolled) .nav-toggle {
  color: #111;
} /* black hamburger */
.site-header.scrolled .nav-toggle {
  color: #fff;
} /* white after scroll */

.portfolio-main {
  padding-top: calc(var(--header-h, 72px) + 12px); /* was 72px */
  background: #fff;
}

/* Full-width frame with small side margins, always */
.portfolio-frame {
  --frame-side-gap: clamp(4px, 2.5vw, 6px); /* white page margin */
  --frame-border: clamp(16px, 2.4vw, 34px); /* beige thickness around grid */
  margin: clamp(16px, 4vh, 28px) var(--frame-side-gap) 72px;
  width: calc(100% - (var(--frame-side-gap) * 2));
  background: var(--beige);
  border-radius: 28px;
  padding: var(--frame-border);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12);
  overflow: hidden; /* keeps rounded beige corners clean */
}

/* Uniform tiles: square, same size at each breakpoint */
.portfolio-grid {
  --gap: 4px; /* tiny beige gutter */
  --tile-size: 150px; /* phones */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--tile-size), 1fr));
  gap: var(--gap);
}

/* Scale tile size up at larger breakpoints */
@media (min-width: 700px) {
  .portfolio-grid {
    --tile-size: 210px;
  }
} /* tablets */
@media (min-width: 1100px) {
  .portfolio-grid {
    --tile-size: 240px;
  }
} /* desktop */
@media (min-width: 1600px) {
  .portfolio-grid {
    --tile-size: 260px;
  }
} /* very wide */

/* Every tile is the same size and shape */
.tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1; /* squares */
  border-radius: 0; /* sharp corners */
  overflow: hidden;
  grid-column: auto; /* ignore any old span rules */
  grid-row: auto;
}

/* Photos stay steady (no hover motion) */
.tile.photo {
  background-size: cover;
  background-position: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
  cursor: zoom-in;
}
.tile.photo:hover {
  transform: none;
}

/* Text tiles */
.tile.text {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 16px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
  cursor: default;
}
.tile.text:hover {
  transform: none;
}

/* Keep text from overflowing tiny tiles */
.tile.text h3 {
  margin: 0 0 0.25rem;
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-weight: 700;
  font-size: clamp(18px, 2.2vw, 26px);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.tile.text p {
  margin: 0;
  color: #6a6a6a;
  font-size: 0.95rem;
  display: block;
  -webkit-line-clamp: initial;
  -webkit-box-orient: initial;
  overflow: hidden;
}

.tile.text--dark {
  background: var(--tile-dark);
  color: #fff;
}
.tile.text--dark p {
  color: #e5e2dc;
}
.tile.text--light {
  background: var(--tile-light);
  color: #1e1e1e;
}
.tile.text--green {
  background: #40524A;           /* the deep spruce green we picked */
  color: #ffffff;
}
.tile.text--green p {
  color: #E9F1ED;                /* soft, readable off-white for body */
}

/* Keyboard focus: keep visible on photo tiles (opens lightbox) */
.tile:focus-visible {
  outline: none;
}

/* ===== Lightbox ===== */
.lb {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none; /* shown via .open */
  background: rgba(10, 10, 12, 0.82);
  backdrop-filter: saturate(140%) blur(4px);
  padding: clamp(8px, 2vmin, 16px);
}
.lb.open {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Centered figure within viewport */
/* Make the grid container and the image shrinkable */
/* Lightbox container (unchanged basics) */
.lb {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  background: rgba(10, 10, 12, 0.82);
  backdrop-filter: saturate(140%) blur(4px);
  padding: clamp(8px, 2vmin, 16px);
}
.lb.open { display: flex; align-items: center; justify-content: center; }

/* Figure: flex column with a hard cap = viewport height */
.lb-figure {
  margin: 0;
  display: grid;
  justify-items: center;     /* center the image wrapper */
  align-content: start;      /* caption follows right under it */
  row-gap: 10px;
  max-width: min(92vw, 1600px);
  outline: none;
  /* no fixed height here; the image wrapper caps itself */
}

/* Image flexes to fill leftover height after caption, never overflows */
.lb-img {
  flex: 1 1 auto;                      /* <-- key: shrink/grow within cap */
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  object-fit: contain;
  box-shadow: 0 18px 54px rgba(0,0,0,.45);
  border-radius: 6px;
}

/* Caption sits directly under image */
.lb-cap {
  margin: 0;
  text-align: center;
  color: #eaeaea;
  font: 500 14px/1.4 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  padding: 0 12px;
}


/* Controls (unchanged) */
.lb-close {
  position: fixed;
  top: 14px;
  left: 14px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
  font-size: 18px;
  cursor: pointer;
}
.lb-prev,
.lb-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 0;
  border-radius: 10px;
  width: 44px;
  height: 56px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.lb-prev {
  left: 10px;
}
.lb-next {
  right: 10px;
}
.lb-close:hover,
.lb-prev:hover,
.lb-next:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* Touch tweaks */
@media (max-width: 700px) {
  .lb-img {
    border-radius: 4px;
  }
  .lb-prev,
  .lb-next {
    width: 38px;
    height: 48px;
  }
  .lb-cap {
    padding: 0 12px;
  }
}

/* debug only */
/* .lb-figure { outline: 1px solid rgba(255,255,255,0.25); } */


/* === Remove beige rounded frame around the grid === */
.portfolio-frame {
  /* keep the same outer margins so the grid still breathes */
  margin: clamp(16px, 4vh, 28px) clamp(12px, 2.5vw, 32px) 72px;
  width: calc(100% - (clamp(12px, 2.5vw, 32px) * 2));

  background: transparent; /* no beige */
  border-radius: 0; /* no curved corners */
  padding: 0; /* no beige border space */
  box-shadow: none; /* remove drop shadow */
  overflow: visible; /* not needed anymore */
}

/* Grid stays the same; gaps will now show the page’s white background */
.portfolio-grid {
  background: transparent;
}

/* === Make portfolio tiles 1.5× larger === */
.portfolio-grid {
  --tile-size: 225px;
} /* was 150px on phones */
@media (min-width: 700px) {
  .portfolio-grid {
    --tile-size: 315px;
  }
} /* was 210px */
@media (min-width: 1100px) {
  .portfolio-grid {
    --tile-size: 360px;
  }
} /* was 240px */
@media (min-width: 1600px) {
  .portfolio-grid {
    --tile-size: 390px;
  }
} /* was 260px */

/* Mobile: always white links in the dropdown, even at the very top */
@media (max-width: 880px) {
  .site-header .primary-nav a {
    color: #fff;
  }
  .site-header .primary-nav .btn-cta {
    color: #fff;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.85);
  }
}

/* Light beige background */
.page-portfolio .portfolio-main {
  background: #F4EDE5;
}



/* --- Lightbox image wrapper + badges --- */
.lb-media {
  position: relative;
  display: inline-block;     /* key: shrink-wrap to child <img> */
  max-width: 100%;
  max-height: calc(min(92svh, 92vh) - var(--lb-cap-h, 0px) - 2vmin);

  /* move your border/shadow here so it always matches the image box */
  border: 0;
  border-radius: 6px;
  box-shadow: 0 18px 54px rgba(0,0,0,0.45);
  overflow: hidden;          /* keeps badges/glow inside the frame */
}

/* The image sizes NATURALLY; no 100% fill */
.lb-media > .lb-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  /* remove any box-shadow/border here to avoid double framing */
  border: 0;
  box-shadow: none;
  border-radius: 0;
}

/* Badges sit over the image wrapper (from earlier step) */
.lb-badges { position: absolute; inset: 0; pointer-events: none; }
.lb-tag {
  position: absolute;
  bottom: 12px;              /* now a constant, wrapper hugs image */
  padding: 6px 10px;
  font: 600 clamp(12px, 1.1vw, 15px)/1 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: 0.02em;
  color: #fff;
  background: rgba(0,0,0,0.55);
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.35);
  backdrop-filter: blur(2px);
}
.lb-tag--left  { left: 12px; }
.lb-tag--right { right: 12px; }







/* ---- Portfolio filter bar ---- */
.portfolio-filters {
  display: flex;
  justify-content: center;
  margin: clamp(8px, 2.8vh, 20px) 0 12px;
}
.portfolio-filters ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.portfolio-filters a {
  display: inline-block;
  text-decoration: none;
  font: 600 14px/1 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 9999px;
  padding: 10px 14px;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.portfolio-filters a:hover {
  background: #ece8e3;
  border-color: rgba(0,0,0,0.18);
}
.portfolio-filters a.is-active,
.portfolio-filters a[aria-current="true"] {
  color: #1e1e1e;
  background: var(--brand);   /* #DAC2A9 from your palette */
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(0,0,0,0.10);
}

/* Hidden tiles when a filter is active */
.tile.is-hidden { display: none !important; }

/* Make the entire portfolio page beige (fills below short grids) */
body.page-portfolio {
  background: #F4EDE5; /* light beige we picked */
}

/* Remove the white that was set earlier on the main wrapper */
.page-portfolio .portfolio-main {
  background: transparent;
}

/* Extra space after the last row of the portfolio grid */
.page-portfolio .portfolio-grid {
  padding-bottom: clamp(18px, 24px, 36px);
}

/* Grid tiles now render an <img> that covers the square */
.tile.photo {
  background-image: none !important; /* stop double-loading old BGs */
}

.tile.photo .tile-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;         /* same look as background-size: cover */
  object-position: center;
}