/* Hallmark · shape: index with a viewer · genre: editorial · theme: custom (Ben's brand system, locked) · job: hire · idea: "a ledger of real buildings; point at one and it appears" · vibe: "institutional, calm, exact, quietly confident"
 * paper: #FFFFFF (brand) · accent: #256868 teal (brand) · display: Archivo · body: Open Sans · hero: the snapshot headline and Ben's intro, the viewer and ledger in reach of the first screen · nav: the site bar shared with the homepage · footer: granite, four columns shared with the homepage · imagery: Ben's own property photos, ten of fourteen; the rest show their name instead of a stand-in · signature: the sticky viewer that follows the ledger row under the pointer · surface: absolute
 * axes: light/grotesk-heavy/cool · posture: restrained · contrast: pass · fold: pass · copy: verbatim · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: H, the head is plain type; the viewer beside the ledger carries the page and starts on the first screen */
/* Hallmark · dismissed 40 · teal and ink on #FFFFFF paper pass at 6.9:1 and 16:1; the check read the paper against itself */
/* Hallmark · waive 78 · Featured Properties heads the ledger at title size · the ledger reads as a table under its caption, and a 52px head would push the first rows below the first screen */
/* Hallmark · dismissed 77 · an index page by design: the head, the ledger with its viewer, the close and the footer */
/* Hallmark · dismissed 41 · chip labels are ink #1C2423 on #FFFFFF paper, white on teal when pressed; the check resolved the tokens against themselves */
/* Hallmark · answered F19 · four weights (300 lede, 400 body, 600 and 700 heads), the same set as every Taurus page */
/* Hallmark · answered F15 · the 64px column gap holds; the ledger's own columns use 24px, one nesting level down */

/* ---------- 1. Page head ---------- */
.pf-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6); align-items: end; padding-bottom: var(--space-7); }
.pf-head h1 { max-width: 8em; }
.pf-lede { display: grid; gap: var(--space-4); justify-items: start; }

/* ---------- 2. Filter, viewer and ledger ---------- */
.pf { padding-bottom: var(--space-8); }
.pf-tools { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; padding-block: var(--space-4); border-top: 1px solid var(--rule); }
.small-h { font-size: 17px; line-height: 1.3; letter-spacing: -.01em; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { font: inherit; font-family: var(--font-display); font-weight: 600; font-size: 14px; line-height: 1.2; min-height: 44px; white-space: nowrap; padding: var(--space-2) var(--space-3); border: 1px solid var(--rule); border-radius: var(--radius-1); background: var(--paper); color: var(--text); cursor: pointer; transition: border-color .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), transform .15s ease; }
.chip:hover { border-color: var(--taurus-teal); color: var(--taurus-teal); }
.chip:active { transform: scale(.98); }
.chip[aria-pressed="true"], .chip[aria-pressed="true"]:hover { background: var(--taurus-teal); border-color: var(--taurus-teal); color: var(--white); }
.chip:disabled { opacity: .5; cursor: not-allowed; }

.pf-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-6); align-items: start; margin-top: var(--space-4); }
.panel { position: sticky; top: var(--space-5); }
.panel .pane, .panel .noimg { position: absolute; inset: 0 0 auto 0; aspect-ratio: 5 / 4; overflow: hidden; background: var(--fieldstone); opacity: 0; transition: opacity .6s var(--ease); }
.panel::before { content: ""; display: block; aspect-ratio: 5 / 4; background: var(--fieldstone); }
.panel .pane.on { opacity: 1; }
.panel .pane img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s var(--ease); }
.panel .pane.on img { transform: none; }
.panel.blank .pane.on { opacity: 0; }
.panel.blank .noimg { opacity: 1; }
.noimg { display: grid; align-content: end; gap: var(--space-2); padding: var(--space-5); }
.noimg b { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 2.6vw, 42px); line-height: 1.02; letter-spacing: -.035em; color: var(--heading); max-width: 9em; }
.noimg span { font-size: 15px; color: var(--text-muted); }
.panel figcaption { display: flex; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-25); font-size: 14px; line-height: 1.4; color: var(--text-muted); }
.panel figcaption b { font-family: var(--font-display); font-weight: 600; color: var(--heading); }

.ledger h2 { margin-bottom: var(--space-4); }
.lh, .pr { display: grid; grid-template-columns: minmax(0, 1fr) 8.5em 6.5em 3.5em; gap: var(--space-4); align-items: baseline; }
.lh { padding-bottom: var(--space-2); font-size: 13px; color: var(--text-muted); }
.lh span:nth-child(n+3), .pr .sz, .pr .yr { text-align: right; }
.props { list-style: none; padding: 0; border-bottom: 1px solid var(--rule); }
.pr { position: relative; padding-block: var(--space-3); border-top: 1px solid var(--rule); font-size: 15px; line-height: 1.45; color: var(--text); cursor: default; outline: none; }
.pr[hidden] { display: none; }
.pr::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--taurus-teal); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.pr.cur::before, .pr:focus-visible::before { transform: scaleX(1); }
.pr:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; transition: none; }
.nm { display: grid; gap: var(--space-1); }
.nm b { font-family: var(--font-display); font-weight: 700; font-size: clamp(19px, 1.55vw, 24px); line-height: 1.15; letter-spacing: -.02em; color: var(--heading); transition: color .3s var(--ease), transform .45s var(--ease); }
.pr.cur .nm b { transform: translateX(4px); }
.sub { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); font-size: 14px; line-height: 1.45; color: var(--text-muted); }
.ty { color: var(--taurus-teal); font-weight: 600; }
.sz, .yr { font-variant-numeric: tabular-nums; white-space: nowrap; }
.yr { font-family: var(--font-display); font-weight: 600; color: var(--heading); }
.th { display: none; }
.pr.you { display: block; padding: 0; }
.pr.you a { display: block; padding-block: var(--space-3); text-decoration: none; }
.pr.you b { color: var(--taurus-teal); }
.pr.you .tn { color: var(--link); text-decoration: underline; text-underline-offset: .2em; }
.pr.you a:hover b { transform: translateX(4px); }
.pr.you a:active { opacity: .7; }
.count { margin-top: var(--space-3); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .lh, .pr { grid-template-columns: minmax(0, 1fr) 7.5em 6em 3.2em; gap: var(--space-3); }
}
@media (max-width: 900px) {
  .pf-head, .pf-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .panel, .lh { display: none; }
  .pr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "th th" "nm nm" "ct yr" "sz sz"; gap: var(--space-1) var(--space-3); padding-block: var(--space-4); }
  .th { display: block; grid-area: th; aspect-ratio: 3 / 2; overflow: hidden; background: var(--fieldstone); margin-bottom: var(--space-2); }
  .th img { width: 100%; height: 100%; object-fit: cover; }
  .nm { grid-area: nm; } .ct { grid-area: ct; } .yr { grid-area: yr; } .sz { grid-area: sz; text-align: left; color: var(--text-muted); }
  .pr .sz, .pr .yr { text-align: left; }
  .pr .yr { text-align: right; }
  .pr .yr .vh { position: static; width: auto; height: auto; clip-path: none; font-family: var(--font-text); font-weight: 400; color: var(--text-muted); }
  .pr.cur::before { transform: scaleX(0); }
  .pr.cur .nm b { transform: none; }
}
.panel.blank figcaption b { visibility: hidden; }