/* Small static-site additions around the original Twenty Twenty-Three UI.
   Source typography, colors, logo, media and WordPress block styles are loaded
   from the captured homepage head; rules here cover static masonry and details. */
:root {
  color-scheme: light;
  --theme-paper: #fff;
  --theme-ink: #000;
  --theme-muted: #666;
  --theme-line: #dedede;
  --layout-wide: 1280px;
  --layout-gutter: clamp(20px, 4vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--theme-paper); }
img, video { display: block; max-width: 100%; }
img { height: auto; }
.skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed; z-index: 1000; inset: 12px auto auto 12px; padding: 10px 14px; color: #fff; background: #000; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.original-home-slogan { margin-block: 0 var(--wp--preset--spacing--40, 1.2em); font: inherit; line-height: inherit; letter-spacing: inherit; }

/* Keep the source portfolio wall, rendered from the original Visual Portfolio markup. */
.vp-portfolio__preloader-wrap { display: none !important; }
.vp-portfolio__items-wrap, .vp-portfolio__filter-wrap, .vp-portfolio__layout-elements { opacity: 1 !important; visibility: visible !important; }
.vp-portfolio[data-vp-layout="masonry"] .vp-portfolio__items {
  column-count: 3;
  column-gap: 5px;
  margin: 0;
}
.vp-portfolio[data-vp-layout="masonry"] .vp-portfolio__item-wrap {
  display: inline-block;
  float: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 0 5px !important;
  vertical-align: top;
  break-inside: avoid;
}
.vp-portfolio[data-vp-layout="masonry"] .vp-portfolio__item-wrap .vp-portfolio__item { margin: 0 !important; }
.vp-portfolio__items .vp-portfolio__item-img img { display: block; width: 100%; height: auto; }
.vp-portfolio__item-wrap[hidden] { display: none !important; }

/* Original site block typography remains in control; these rules only size custom route wrappers. */
.archive-page, .content-page, .article-page, .project-detail {
  width: min(100% - 2 * var(--layout-gutter), var(--layout-wide));
  margin-right: auto;
  margin-left: auto;
}
.archive-page { padding-top: clamp(40px, 7vw, 84px); padding-bottom: 90px; }
.page-intro { padding: 0 0 30px; }
.page-intro h1, .article-header h1, .project-overview h1 { margin: 0; color: var(--theme-ink); font-family: inherit; font-weight: inherit; line-height: 1.18; }
.page-intro h1 { font-size: clamp(30px, 4.5vw, 52px); }
.page-intro h1 span { font-size: .52em; }
.page-lede { max-width: 660px; margin: 14px 0 0; color: var(--theme-muted); }
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 12px 0; margin: 0 0 24px; border-top: 1px solid var(--theme-line); border-bottom: 1px solid var(--theme-line); }
.filter-button { padding: 5px 0; border: 0; border-bottom: 1px solid transparent; background: transparent; color: var(--theme-muted); font: inherit; font-size: .82em; cursor: pointer; }
.filter-button:hover, .filter-button.is-active { border-bottom-color: var(--theme-ink); color: var(--theme-ink); }
.project-card[hidden] { display: none; }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.project-card { display: block; color: inherit; text-decoration: none; }
.project-card__image { display: block; overflow: hidden; aspect-ratio: 4 / 3; background: #f5f5f5; }
.project-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.project-card:hover .project-card__image img { transform: scale(1.025); }
.project-card__meta { display: flex; flex-direction: column; gap: 3px; padding-top: 8px; }
.project-card .eyebrow { margin: 0; color: var(--theme-muted); font-size: .7em; }
.project-card__title { color: var(--theme-ink); }

.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.news-card { min-width: 0; }
.news-card__image { display: block; overflow: hidden; aspect-ratio: 4 / 3; background: #f5f5f5; }
.news-card__image img { width: 100%; height: 100%; object-fit: cover; }
.news-card__body { padding-top: 10px; }
.news-card time, .eyebrow { color: var(--theme-muted); font-size: .78em; }
.news-card h3 { margin: 6px 0; font: inherit; font-size: 1.05em; }
.news-card h3 a { color: inherit; text-decoration: none; }
.news-card p { color: var(--theme-muted); font-size: .9em; }
.text-link, .back-link { color: inherit; text-decoration: none; }

/* One information layout across all 27 project details; original imagery stays intact. */
.project-detail { max-width: var(--layout-wide); padding-top: 30px; padding-bottom: 90px; }
.project-overview { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); gap: clamp(28px, 6vw, 78px); align-items: start; padding: 10px 0 34px; border-bottom: 1px solid var(--theme-line); margin-bottom: 34px; }
.project-overview__heading { min-width: 0; }
.project-overview .back-link { display: inline-block; margin-bottom: 22px; color: var(--theme-muted); font-size: .86em; }
.project-overview .eyebrow { margin: 0 0 8px; letter-spacing: .08em; }
.project-overview h1 { overflow-wrap: anywhere; font-size: clamp(30px, 4.2vw, 54px); }
.project-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; margin: 0; border-top: 1px solid var(--theme-line); }
.project-fact { display: grid; grid-template-columns: minmax(74px, .75fr) minmax(0, 1.25fr); gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--theme-line); }
.project-fact dt { color: var(--theme-muted); font-size: .78em; }
.project-fact dd { margin: 0; font-size: .9em; overflow-wrap: anywhere; }
.project-video { margin: 0 auto 28px; }
.project-video figure { margin: 0; }
.project-video video { width: 100%; max-height: 76vh; object-fit: contain; background: #111; }
.project-gallery { columns: 3; column-gap: 5px; }
.gallery-item { display: inline-block; width: 100%; margin: 0 0 5px; background: #f5f5f5; break-inside: avoid; }
.gallery-item a { display: block; overflow: hidden; cursor: zoom-in; }
.gallery-item img { width: 100%; height: auto; }
.project-detail__return { padding-top: 28px; text-align: right; }
.content-page { max-width: min(100% - 2 * var(--layout-gutter), 1100px); padding-top: 20px; padding-bottom: 70px; }
.content-page h1.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.rich-content { overflow-wrap: anywhere; }
.article-page { max-width: min(100% - 2 * var(--layout-gutter), 900px); padding-top: 36px; padding-bottom: 80px; }
.article-header { padding-bottom: 22px; border-bottom: 1px solid var(--theme-line); margin-bottom: 30px; }
.article-header h1 { font-size: clamp(28px, 4vw, 44px); }
.article-header .back-link { display: inline-block; margin-bottom: 16px; color: var(--theme-muted); font-size: .86em; }
.article-content img, .article-content video { max-width: 100%; }
.image-viewer { width: min(94vw, 1480px); max-width: none; max-height: 94vh; padding: 54px 18px 18px; border: 0; background: #111; }
.image-viewer::backdrop { background: rgb(0 0 0 / .88); }
.image-viewer img { width: auto; max-width: 100%; max-height: calc(94vh - 72px); margin: 0 auto; object-fit: contain; }
.image-viewer__close { position: absolute; top: 12px; right: 16px; padding: 5px 10px; border: 1px solid rgb(255 255 255 / .35); background: transparent; color: #fff; font: inherit; cursor: pointer; }
.js-motion [data-reveal] { opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .4s ease; }
.js-motion [data-reveal].is-visible { opacity: 1; transform: none; }

@media (max-width: 780px) {
  .vp-portfolio[data-vp-layout="masonry"] .vp-portfolio__items { column-count: 2; }
  .project-grid, .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-overview { grid-template-columns: 1fr; }
  .project-gallery { columns: 2; }
}
@media (max-width: 560px) {
  .vp-portfolio[data-vp-layout="masonry"] .vp-portfolio__items { column-count: 1; }
  .project-grid, .news-grid { grid-template-columns: 1fr; }
  .project-facts { grid-template-columns: 1fr; }
  .project-gallery { columns: 1; }
  .project-detail { padding-top: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js-motion [data-reveal] { opacity: 1; transform: none; }
}