/* TLE portfolio refresh: a dense, tactile family album for the complete project archive. */
body[data-page="projects"] {
  --projects-ink: var(--color-blue);
  --projects-ink-deep: var(--color-blue-active);
  --projects-paper: var(--color-surface);
  --projects-paper-light: var(--color-bg);
  --projects-red: var(--color-red);
  background: var(--projects-ink-deep);
}

body[data-page="projects"] .site-footer { margin-top: 0; }

.projects-page {
  background: var(--projects-ink-deep);
  color: var(--projects-paper-light);
}

.projects-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: center;
  min-height: 360px;
  padding: clamp(48px, 7vw, 88px) max(32px, calc((100vw - var(--container-max)) / 2 + 32px));
  overflow: hidden;
  background-color: var(--projects-ink);
  background-image: radial-gradient(rgba(244, 241, 237, 0.07) 0.8px, transparent 0.8px);
  background-size: 6px 6px;
  border-top: 1px solid rgba(244, 241, 237, 0.22);
  border-bottom: 1px solid rgba(244, 241, 237, 0.24);
}

.projects-hero__copy { position: relative; z-index: 1; max-width: 590px; }
.projects-hero__rule { display: block; width: 72px; height: 6px; margin-bottom: 22px; background: var(--projects-red); }
.projects-hero h1 {
  color: var(--projects-paper-light);
  font: var(--text-display-1);
  letter-spacing: var(--tracking-tight);
  margin-bottom: 20px;
}
.projects-hero__copy > p:not(.projects-hero__family-note) {
  max-width: 500px;
  color: rgba(244, 241, 237, 0.88);
  font: var(--text-body-lg);
}
.projects-hero__family-note {
  display: inline-block;
  margin-top: 28px;
  padding: 11px 16px 11px 18px;
  border-left: 3px solid var(--projects-red);
  color: var(--projects-paper-light);
  font: italic 600 16px/1.4 var(--font-serif-display);
}

.projects-hero__crew {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(7px, 1vw, 14px);
  align-items: end;
  transform: rotate(-2deg);
}
.projects-hero__crew-photo {
  margin: 0;
  padding: clamp(6px, 0.7vw, 10px);
  background: var(--projects-paper-light);
  box-shadow: 0 14px 30px rgba(32, 28, 20, 0.22);
  transform: translateY(18px);
}
.projects-hero__crew-photo:nth-child(2n) { transform: translateY(-14px) rotate(2deg); }
.projects-hero__crew-photo:nth-child(3n) { transform: translateY(8px) rotate(-1deg); }
.projects-hero__crew-photo img { width: 100%; aspect-ratio: 0.78; object-fit: cover; }

.projects-showcase {
  width: 100%;
  max-width: none;
  padding: clamp(32px, 5vw, 62px) max(20px, calc((100vw - 1440px) / 2 + 20px)) clamp(56px, 7vw, 88px);
  background-color: var(--projects-ink-deep);
  background-image: radial-gradient(rgba(244, 241, 237, 0.05) 0.75px, transparent 0.75px);
  background-size: 5px 5px;
}
.projects-showcase__head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(260px, 0.95fr);
  gap: 32px;
  max-width: var(--container-max);
  margin: 0 auto 26px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(244, 241, 237, 0.28);
}
.projects-showcase__label {
  margin-bottom: 10px;
  color: var(--color-red);
  font: 600 12px/1.2 var(--font-sans-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.projects-showcase__head h2 { color: var(--projects-paper-light); font: var(--text-display-2); }
.projects-showcase__head--intro-only { display: block; margin-bottom: 18px; padding-bottom: 0; border-bottom: 0; }
.projects-showcase__head--intro-only .projects-showcase__intro { max-width: none; }
.projects-showcase__intro { align-self: end; max-width: 460px; color: rgba(244, 241, 237, 0.8); font: var(--text-body-md); }

.projects-filter {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-width: var(--container-max);
  margin: 0 auto 18px;
  padding: 0;
  gap: 6px;
  background: transparent;
  border: 0;
  counter-reset: project-category;
}
.projects-filter__link {
  position: relative;
  display: flex;
  counter-increment: project-category;
  min-width: 0;
  min-height: 58px;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 13px 11px;
  border: 1px solid rgba(244, 241, 237, 0.32);
  border-radius: 0;
  color: rgba(244, 241, 237, 0.88);
  background: rgba(3, 50, 114, 0.92);
  font: var(--text-caption);
  letter-spacing: 0.075em;
  text-align: left;
  text-transform: uppercase;
  transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.projects-filter__link::before {
  flex: 0 0 28px;
  color: var(--color-red);
  content: counter(project-category, decimal-leading-zero);
  font: 600 12px/1 var(--font-sans-body);
  letter-spacing: 0.08em;
}
.projects-filter__link:hover { color: var(--projects-paper-light); background: rgba(244, 241, 237, 0.14); border-color: rgba(244, 241, 237, 0.56); text-decoration: none; transform: translateY(-2px); }
.projects-filter__link:active { transform: translateY(1px); }
.projects-filter__link.is-active,
.projects-filter__link[aria-current="page"] {
  color: #fff;
  background: var(--projects-red);
  border-color: var(--projects-red);
}
.projects-filter__link.is-active::before,
.projects-filter__link[aria-current="page"]::before { color: rgba(255, 255, 255, 0.76); }
.projects-filter__link:focus-visible { z-index: 1; outline-color: var(--color-bg); outline-offset: 3px; }
.projects-status { max-width: var(--container-max); margin: 0 auto 20px; color: rgba(244, 241, 237, 0.76); text-align: left; font: italic 16px/1.4 var(--font-serif-display); }

.projects-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  max-width: 1440px;
  margin: 0 auto;
  grid-auto-rows: auto;
  content-visibility: visible;
}
.projects-grid .gallery-grid__item {
  display: block;
  aspect-ratio: 4 / 3;
  border: 4px solid var(--projects-paper-light);
  border-radius: 0;
  background: var(--projects-paper-light);
  box-shadow: 0 8px 18px rgba(32, 28, 20, 0.2);
  transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.projects-grid .gallery-grid__item:hover { z-index: 2; transform: translateY(-3px) rotate(-0.35deg); box-shadow: 0 14px 26px rgba(32, 28, 20, 0.28); }
.projects-grid .gallery-grid__item:focus-visible { outline-color: var(--color-bg); outline-offset: 4px; }
.projects-grid .gallery-grid__img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.projects-load-more-wrap { display: flex; justify-content: center; margin-top: 36px; }
.projects-noscript { max-width: var(--container-max); margin: 24px auto 0; color: var(--projects-paper-light); }

.projects-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: clamp(32px, 5vw, 58px) max(24px, calc((100vw - var(--container-max)) / 2 + 32px));
  color: var(--projects-ink);
  background: var(--projects-paper);
  border-top: 6px solid var(--projects-red);
}
.projects-cta__copy { max-width: 690px; }
.projects-cta h2 { color: var(--projects-ink); font: var(--text-display-2); }
.projects-cta p { max-width: 590px; margin-top: 12px; color: var(--text-secondary); font: var(--text-body-md); }
.projects-cta .btn { flex: 0 0 auto; border-radius: var(--radius-md); box-shadow: 5px 5px 0 rgba(32, 28, 20, 0.15); }

@media (max-width: 900px) {
  .projects-hero { grid-template-columns: 1fr; gap: 34px; }
  .projects-hero__crew { max-width: 720px; }
  .projects-showcase__head { grid-template-columns: 1fr; gap: 14px; }
  .projects-showcase__intro { max-width: 650px; }
  .projects-filter { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .projects-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .projects-hero { padding: 42px 20px 44px; }
  .projects-hero__crew { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; transform: rotate(-1deg); }
  .projects-hero__crew-photo img { aspect-ratio: 1 / 1; }
  .projects-showcase { padding-inline: 12px; }
  .projects-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .projects-filter__link { min-height: 64px; padding: 11px 10px 10px; }
  .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .projects-cta { align-items: flex-start; flex-direction: column; padding-inline: 24px; }
  .projects-cta .btn { width: 100%; }
}