/* Photographic portfolio, retaining the established brand palette. */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../assets/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../assets/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../assets/fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Fallback";
  src: local("Arial");
  /* Matched against the real hero sentence at 600/100px in the browser. */
  size-adjust: 96.95%;
  ascent-override: 106.24%;
  descent-override: 28.88%;
  line-gap-override: 0%;
}
@font-face {
  /* Inter 4 variable with optical sizing (opsz 14–32, wght 100–900).
     Body, small and label sizing lives in css/type.css. */
  font-family: "Inter";
  src: url("../assets/fonts/inter-latin-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
h1, h2, h3, .brand-mark, .brand-mark-lg { font-stretch: normal; letter-spacing: 0; }
input, textarea, select { font-family: var(--font-body); }
button, .nav, .btn, .eyebrow, .page-crumb, .project-tag { font-family: var(--font-display); }
.hero-title { font-size: 3.25rem; line-height: 1.08; max-width: 19ch; }
.page-title { font-size: 3.25rem; line-height: 1.12; }
.section-title { font-size: 2.5rem; line-height: 1.16; }
.page-lede, .experience-note, .phase-head p { max-width: 64ch; }
.brand-sub { font-size: 0.6875rem; letter-spacing: 0; }
.hero-photographic { padding-top: 0; }
.hero-photographic .hero-media img { filter: none; object-position: 63% 50%; }
.hero-photographic .hero-scrim {
  background: linear-gradient(180deg, rgba(6,13,24,.8), rgba(6,13,24,.7) 80px, transparent 160px),
    linear-gradient(90deg, rgba(6,13,24,.93), rgba(6,13,24,.83) 52%, rgba(6,13,24,.18) 78%);
}
.hero-photographic .hero-content { padding-right: var(--gutter); padding-top: 7rem; padding-bottom: 3.5rem; }
.hero-photographic .hero-lede { max-width: 56ch; font-size: 1.0625rem; line-height: 1.65; }
.hero-photographic .hero-floor, .hero-photographic .hero-architecture { display: none; }
/* Photographic page headers (Projects, About, Services): a finished
   project photograph, lightly toned toward the brand's cool range but
   still reading as a photograph, under a navy grade that is strong on
   the text side and light on the right. Files in assets/header-photos/
   are named <page>-<source image> and come from finished photographs
   only (never renderings). The header's perspective grid gives way. */
.page-hero.has-photo::before { display: none; }
.page-hero-photo {
  position: absolute;
  inset: 0;
  background: center / cover no-repeat;
  pointer-events: none;
}
.page-hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 13, 24, 0.9) 0%, rgba(6, 13, 24, 0.86) 46%, rgba(6, 13, 24, 0.56) 64%, rgba(6, 13, 24, 0.22) 100%),
    linear-gradient(180deg, rgba(6, 13, 24, 0.78) 0%, rgba(6, 13, 24, 0.4) 14%, rgba(6, 13, 24, 0) 30%, rgba(6, 13, 24, 0) 72%, rgba(6, 13, 24, 0.55) 100%);
}
.page-hero--projects .page-hero-photo { background-image: url("../assets/header-photos/projects-new-brunswick-village.jpg"); background-position: 50% 55%; }
.page-hero--about .page-hero-photo { background-image: url("../assets/projects/half-moon-eclipse-20261001-01.jpg"); background-position: 50% 30%; }
.page-hero--services .page-hero-photo { background-image: url("../assets/header-photos/services-2939-warehouses.jpg"); background-position: 50% 60%; }
@media (max-width: 991px) {
  /* Tablets and phones: the copy runs (nearly) the full width, so it
     keeps the plain navy ground and the photograph becomes a strip at
     the foot of the header, rising out of the navy, where it reads
     clearly as a photograph. (A full-bleed grade dark enough for the
     text left tablets looking plain navy.) */
  .page-hero.has-photo { padding-bottom: calc(var(--section) / 2 + 13rem); }
  .page-hero-photo { top: auto; height: 16rem; }
  .page-hero-photo::after {
    background: linear-gradient(180deg, #0c1c2c 0%, rgba(12, 28, 44, 0.45) 38%, rgba(6, 13, 24, 0.14) 100%);
  }
  .page-hero--projects .page-hero-photo { background-position: 50% 60%; }
  .page-hero--about .page-hero-photo { background-position: 50% 32%; }
  .page-hero--services .page-hero-photo { background-position: 50% 55%; }
}
@media (max-width: 720px) {
  /* Phones: a shorter strip (tablet rule above) from the 800px file. */
  .page-hero.has-photo { padding-bottom: calc(var(--section) / 2 + 10.5rem); }
  .page-hero-photo { height: 13rem; }
  .page-hero--projects .page-hero-photo { background-image: url("../assets/header-photos/projects-new-brunswick-village-800.jpg"); }
  .page-hero--about .page-hero-photo { background-image: url("../assets/projects/half-moon-eclipse-20261001-01-800.jpg"); }
  .page-hero--services .page-hero-photo { background-image: url("../assets/header-photos/services-2939-warehouses-800.jpg"); }
}
.photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 3rem; }
.photo-pair figure { margin: 0; min-width: 0; }
.photo-pair img { display: block; width: 100%; aspect-ratio: 16/10; height: auto; object-fit: cover; }
.photo-pair figcaption { padding-top: .75rem; font-size: .8125rem; color: var(--slate); }
.plate-icon { stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.filter-btn[aria-pressed="true"] { background: var(--navy-900); color: var(--white-hi); border-color: var(--navy-900); box-shadow: inset 0 -3px var(--accent); }
.project-grid,
.project-grid-page { gap: 2.5rem 1.5rem; align-items: stretch; }
.project-grid .project-card,
.project-grid-page .project-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
  background: var(--navy-900);
  box-shadow: none;
  border: 1px solid var(--line-dark);
}
.project-card::before,
.project-card::after { display: none; }
.project-grid .project-card.hide,
.project-grid-page .project-card.hide { display: none; }
.project-card .project-media {
  position: relative;
  inset: auto;
  z-index: 0;
  width: 100%;
  aspect-ratio: 16 / 10;
  flex: none;
}
.project-card .project-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
  transition: transform 240ms var(--ease);
}
.project-card:hover .project-media img { transform: scale(1.025); }
.project-card .project-meta { flex: 1; padding: 1.5rem; }
.project-card .project-meta h3 { line-height: 1.25; }
.project-card .project-tag { font-size: 0.75rem; letter-spacing: 0; }
.image-type {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  max-width: calc(100% - 1.5rem);
  padding: 0.35rem 0.65rem;
  background: var(--navy-900);
  color: var(--white-hi);
  font: 0.75rem/1.4 var(--font-mono);
}
.image-status {
  display: block;
  margin-top: 0.75rem;
  color: var(--white-mut);
  font: 0.75rem/1.5 var(--font-mono);
}
.project-context {
  margin: 0 auto;
  padding-bottom: calc(var(--section) / 2);
}
.project-context img {
  display: block;
  width: 100%;
  height: 420px;
  object-fit: cover;
  object-position: center;
  background: var(--navy-900);
}
.project-context figcaption {
  padding: 0.8rem 0;
  color: var(--slate);
  border-bottom: 1px solid var(--line);
  font: 0.75rem/1.5 var(--font-mono);
}
@media (min-width: 721px) {
  .hero-photographic { min-height: calc(100svh - 2rem); }
  .project-grid-page .project-card.row-wide,
  html:not(.js) .project-grid-page .project-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }
}
@media (max-width: 720px) {
  .project-grid, .project-grid-page { gap: 1.5rem; }
  .project-card .project-meta { padding: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .project-card:hover .project-media img { transform: none; }
}
html.reduced-motion .project-card:hover .project-media img { transform: none; }

.gallery-open { display: inline-flex; align-items: center; gap: .65rem; min-height: 44px; margin-top: 1rem; color: var(--accent); text-decoration: underline; text-underline-offset: .3rem; font-size: .875rem; }
.gallery-open svg, .gallery-controls svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.project-gallery { width: min(1040px, calc(100% - 2rem)); max-height: 92dvh; padding: 0; border: 1px solid var(--accent); background: var(--navy-900); color: var(--white-hi); overflow-y: auto; }
.project-gallery::backdrop { background: rgba(6,13,24,.88); }
.gallery-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; background: var(--navy-900); }
.gallery-bar h2 { font-size: 1.125rem; margin: 0; }
.gallery-controls { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.gallery-controls button { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line-dark); background: transparent; color: var(--white-hi); cursor: pointer; }
.gallery-controls button:hover { background: var(--navy-800); }
.gallery-controls button[hidden] { display: none; }
.gallery-controls img { filter: none; }
.gallery-controls button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gallery-figure { margin: 0; }
.gallery-image { display: block; width: 100%; height: auto; }
.gallery-caption { padding: 1rem; margin: 0; color: var(--white-mut); font-size: .875rem; }
.gallery-counter { min-width: 4.5ch; text-align: center; font-size: .8125rem; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .hero-title { font-size: 3rem; }
  .page-title { font-size: 2.75rem; }
  .hero-photographic .hero-scrim { background: rgba(6,13,24,.72); }
}
@media (max-width: 720px) {
  .hero-title, .page-title { font-size: 2.25rem; }
  .section-title { font-size: 2rem; }
  .hero-photographic .hero-content { padding-top: 7rem; padding-bottom: 3.5rem; }
  .photo-pair { grid-template-columns: 1fr; }
  .project-context img { height: auto; aspect-ratio: 4/3; }
  .gallery-bar { flex-wrap: wrap; }
  .gallery-bar h2 { width: 100%; }
  .gallery-controls { width: 100%; justify-content: space-between; }
}