/* Liberty Partners — shared project (residence) page styles */

.proj-head { padding: 56px var(--gutter) 0; max-width: var(--max-w); margin: 0 auto; }
.crumbs {
  font-family: var(--font-display); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 32px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.crumbs a { color: var(--ink-soft); }
.crumbs a:hover { color: var(--accent); }
.crumbs .sep { color: var(--rule); }
.crumbs .here { color: var(--ink); }

.proj-head .eyebrow { margin-bottom: 22px; }
.proj-head h1 {
  font-family: var(--font-body); font-weight: 300;
  font-size: clamp(52px, 7.6vw, 138px);
  line-height: 0.94; letter-spacing: -0.03em; margin: 4px 0 28px; text-wrap: balance;
}
.proj-head h1 em { color: var(--accent); font-style: italic; }

.head-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 64px; align-items: end; padding-bottom: 40px; }
.head-grid .intro p { font-family: var(--font-body); font-size: 21px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 24px; max-width: 600px; }
.head-grid .intro .ctas { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.head-grid .aside { padding-bottom: 4px; }
.head-grid .aside .meta-line { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); line-height: 2.1; }
.head-grid .aside .meta-line b { color: var(--ink); font-weight: 500; }

.key-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.key-row .cell { padding: 28px clamp(22px, 2.4vw, 44px) 30px; border-right: 1px solid var(--rule-soft); }
.key-row .cell:first-child { padding-left: 0; }
.key-row .cell:last-child { border-right: 0; padding-right: 0; }
.key-row .k { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); }
.key-row .v { font-family: var(--font-body); font-size: clamp(22px, 2vw, 30px); line-height: 1.15; margin-top: 10px; }
.key-row .v small { display: block; font-size: 12px; color: var(--muted); letter-spacing: 0.04em; margin-top: 5px; font-family: var(--font-mono); text-transform: none; }

/* Hero image */
/* Hero kept tall enough that full front elevations are never cropped at the roofline. */
.proj-hero { position: relative; aspect-ratio: 16 / 10; width: 100%; margin-top: 44px; overflow: hidden; background: var(--paper-2); }
.proj-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.proj-hero .credit {
  position: absolute; left: 0; bottom: 0; display: flex; gap: 14px; align-items: center;
  background: rgba(14,35,54,.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--paper); padding: 12px 20px;
  font-family: var(--font-display); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
}
.proj-hero .credit .dotsep { width: 4px; height: 4px; border-radius: 50%; background: var(--sky); }

/* Project note — graceful "specs pending" annotation */
.proj-note {
  max-width: var(--max-w); margin: 0 auto; padding: 22px var(--gutter) 0;
  display: flex; gap: 14px; align-items: baseline;
}
.proj-note .tagword {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--paper); background: var(--mid-blue); padding: 4px 8px; white-space: nowrap;
}
.proj-note p { font-family: var(--font-mono); font-size: 12px; line-height: 1.55; color: var(--muted); margin: 0; }

/* Narrative */
.narrative { padding: var(--s-9) 0 var(--s-8); max-width: var(--max-w); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.narrative-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: 80px; align-items: start; }
.narrative h2 { font-family: var(--font-body); font-weight: 300; font-size: clamp(34px, 4vw, 56px); line-height: 1.06; letter-spacing: -0.02em; margin: 16px 0 0; text-wrap: balance; }
.narrative h2 em { color: var(--accent); font-style: italic; }
.narrative .col-r p { font-family: var(--font-body); font-size: 21px; line-height: 1.58; color: var(--ink); margin-bottom: 1.15em; max-width: 640px; }
.narrative .col-r p:first-of-type:first-letter { font-family: var(--font-body); font-size: 64px; line-height: 0.82; float: left; padding: 6px 12px 0 0; color: var(--accent); }

/* Gallery — editorial 12-col, captions BELOW images for legibility */
.gallery { padding: var(--s-8) 0 var(--s-9); background: var(--paper-2); border-top: 1px solid var(--rule); }
.gallery .section-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter) var(--s-7); flex-wrap: wrap; }
.gallery .section-head h2 { font-family: var(--font-body); font-weight: 300; font-size: clamp(34px, 4vw, 60px); line-height: 1.0; letter-spacing: -0.02em; margin: 14px 0 0; }
.gallery .section-head h2 em { color: var(--accent); font-style: italic; }
/* Editorial grid — varied tile sizes with a label beneath each. Per-tile aspect
   ratios keep images from squashing; dense flow keeps the rows tight. */
.gal { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(16px, 1.7vw, 28px);
  grid-auto-flow: dense; align-items: start; }
.gfig { grid-column: span 4; margin: 0; }
.gfig.w2, .gfig.half { grid-column: span 6; }
.gfig.wide, .gfig.big { grid-column: span 8; }
.gfig.full { grid-column: span 12; }
.gfig .frame { display: block; width: 100%; overflow: hidden; background: var(--paper-3); aspect-ratio: 4 / 3; }
.gfig.tall .frame, .gfig.h2 .frame { aspect-ratio: 4 / 5; }
.gfig.w2 .frame, .gfig.half .frame { aspect-ratio: 3 / 2; }
.gfig.wide .frame, .gfig.big .frame { aspect-ratio: 16 / 10; }
.gfig.full .frame { aspect-ratio: 21 / 9; }
.gfig img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s var(--ease-out); }
.gfig:hover img { transform: scale(1.04); }
.gfig figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 14px; border-top: 1px solid var(--rule-soft); margin-top: 14px; }
.gfig .rname { font-family: var(--font-body); font-size: 20px; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); }
.gfig .rnum { font-family: var(--font-mono); font-size: 10px; color: var(--muted); letter-spacing: 0.08em; white-space: nowrap; }

/* ── Bento gallery — the shared property-gallery grid ──────────────────
   A 6-column track: base tiles span 2×1 (a true 3:2 frame + caption below),
   feature tiles span 4×2. grid-auto-flow: dense tiles rows with zero gaps.
   Row height (--brow) is set at runtime by sizeBento() in site.js. */
@media (min-width: 781px) {
  .gallery .gal.bento {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: var(--brow, 220px);
    grid-auto-flow: dense;
    align-items: stretch;
  }
  .gallery .gal.bento .gfig { grid-column: span 2; grid-row: span 1; margin: 0; display: flex; flex-direction: column; }
  .gallery .gal.bento .gfig.feat { grid-column: span 4; grid-row: span 2; }
  .gallery .gal.bento .gfig.feat.right { grid-column: 3 / span 4; }
  .gallery .gal.bento .gfig .frame {
    flex: 1 1 auto; min-height: 0; width: 100%; height: auto; aspect-ratio: auto; overflow: hidden;
  }
  .gallery .gal.bento .gfig figcaption { flex: 0 0 auto; }
}
@media (max-width: 780px) {
  .gallery .gal.bento { grid-template-columns: 1fr; grid-auto-flow: row; grid-auto-rows: auto; align-items: start; }
  .gallery .gal.bento .gfig { grid-column: 1 / -1 !important; margin: 0; display: flex; flex-direction: column; }
  .gallery .gal.bento .gfig .frame { flex: none; width: 100%; aspect-ratio: 3 / 2; height: auto; overflow: hidden; }
}

/* Full-bleed cinematic band */
.fullband { position: relative; height: clamp(420px, 66vh, 720px); overflow: hidden; }
.fullband img { width: 100%; height: 100%; object-fit: cover; }
.fullband::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,35,54,.10) 0%, rgba(14,35,54,.22) 45%, rgba(14,35,54,.72) 100%); }
.fullband .fb-copy { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; }
.fullband .fb-inner { max-width: var(--max-w); margin: 0 auto; padding: var(--s-8) var(--gutter); color: var(--paper); }
.fullband .fb-inner .eyebrow { color: rgba(255,255,255,.78); }
.fullband h3 { font-family: var(--font-body); font-weight: 300; font-size: clamp(30px, 4vw, 60px); line-height: 1.04; letter-spacing: -0.02em; margin: 14px 0 0; max-width: 900px; color: var(--paper); text-wrap: balance; }
.fullband h3 em { font-style: italic; color: var(--sky); }

/* Related */
.related { padding: var(--s-9) 0 var(--s-10); border-top: 1px solid var(--rule); max-width: var(--max-w); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.related h2 { font-family: var(--font-body); font-weight: 300; font-size: clamp(34px, 4vw, 52px); letter-spacing: -0.02em; margin: 12px 0 0; }
.related h2 em { color: var(--accent); font-style: italic; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 44px; }
.related-card { display: flex; flex-direction: column; transition: transform .3s var(--ease); }
.related-card:hover { transform: translateY(-4px); }
.related-card .frame { width: 100%; aspect-ratio: 4/3; overflow: hidden; background: var(--paper-3); }
.related-card img { width: 100%; height: 100%; object-fit: cover; }
.related-card h4 { font-family: var(--font-body); font-weight: 400; font-size: 22px; margin: 16px 0 4px; letter-spacing: -0.01em; }
.related-card .loc { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }

@media (max-width: 980px) {
  .head-grid, .narrative-grid { grid-template-columns: 1fr; gap: 36px; }
  .key-row { grid-template-columns: 1fr 1fr; }
  .key-row .cell { border-bottom: 1px solid var(--rule-soft); }
  .key-row .cell:nth-child(2) { border-right: 0; padding-right: 0; }
  .key-row .cell:nth-child(odd) { padding-left: 0; }
  .gfig, .gfig.w2, .gfig.half, .gfig.wide, .gfig.big { grid-column: span 6; }
  .gfig.full { grid-column: span 12; }
  .related-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .gfig, .gfig.w2, .gfig.half, .gfig.wide, .gfig.big, .gfig.full { grid-column: span 12; }
}

/* Design note — a quiet annotation tucked beneath the intro copy, replacing the
   old full-width "Note / Record" blocks that used to sit after the hero. */
.intro .design-note {
  max-width: 600px; margin: 4px 0 30px; padding-top: 20px;
  border-top: 1px solid var(--rule-soft);
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: baseline;
}
.intro .design-note .tagword {
  font-family: var(--font-display); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent); white-space: nowrap;
}
.intro .design-note p {
  font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; max-width: none;
}
@media (max-width: 560px) {
  .intro .design-note { grid-template-columns: 1fr; gap: 8px; }
}

/* Film band — a cinematic click-to-play walkthrough, dark to set the video off */
.filmband { padding: var(--s-9) 0; background: var(--ink); }
.film-wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
.film-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; padding-bottom: var(--s-7); flex-wrap: wrap; }
.film-head .eyebrow { color: var(--sky); }
.film-head h2 { font-family: var(--font-body); font-weight: 300; font-size: clamp(34px, 4vw, 60px); line-height: 1.0; letter-spacing: -0.02em; margin: 14px 0 0; color: var(--paper); }
.film-head h2 em { color: var(--sky); font-style: italic; }
.film-head .meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: rgba(255,255,255,.6); text-transform: uppercase; padding-bottom: 6px; }
.film-frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 0; margin: 0; padding: 0; cursor: pointer; background: #000; }
.film-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease-out), opacity .5s var(--ease); }
.film-frame:hover img { transform: scale(1.03); opacity: .82; }
.film-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,35,54,.05), rgba(14,35,54,.35)); pointer-events: none; }
.film-play { position: absolute; inset: 0; z-index: 2; margin: auto; width: 92px; height: 92px; border-radius: 50%; background: rgba(14,35,54,.5); border: 1px solid rgba(255,255,255,.65); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; transition: background .3s var(--ease), transform .3s var(--ease); }
.film-frame:hover .film-play { background: var(--accent); border-color: var(--accent); transform: scale(1.06); }
.film-play .tri { width: 0; height: 0; border-left: 22px solid var(--paper); border-top: 13px solid transparent; border-bottom: 13px solid transparent; margin-left: 6px; }
.film-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.film-frame video { width: 100%; height: 100%; object-fit: cover; background: #000; display: block; }
@media (max-width: 560px) { .film-play { width: 68px; height: 68px; } .film-play .tri { border-left-width: 16px; border-top-width: 10px; border-bottom-width: 10px; } }
.film-fallback { display: inline-block; margin-top: 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,.6); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.25); padding-bottom: 2px; transition: color .25s var(--ease), border-color .25s var(--ease); }
.film-fallback:hover { color: var(--sky); border-color: var(--sky); }