.page-hero { border-bottom: 1px solid var(--line); }
.page-hero__inner { margin: 0 auto; max-width: 72rem; padding: 7rem 2rem 5rem; }
.page-hero h1 { font-size: clamp(2.8rem, 6vw, 5rem); margin: .8rem 0 1.4rem; }
.lede { font: 1.35rem/1.4 var(--serif); max-width: 44rem; }
.page-body { margin: 0 auto; max-width: 46rem; padding: 4.5rem 1.25rem 6rem; }
.page-body > * + * { margin-top: 2.25rem; }
.page-body h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: .5rem; }
.page-body ul { margin-bottom: 0; padding-left: 1.2rem; }
.page-body li + li { margin-top: .35rem; }
.principle { border-top: 1px solid var(--line); padding-top: 3.5rem; }
.principle:first-of-type { border-top: 0; padding-top: 0; }
.principle__number { color: var(--clay); font-size: .8rem; font-weight: 700; }
.principle h2 { font-size: 2.1rem; margin: .8rem 0 1rem; }
.principle__lead { font: 1.15rem/1.45 var(--serif); }
.page-body figure { margin: 2.75rem 0; }
.page-body figcaption { color: var(--clay); font-size: .78rem; margin-top: .6rem; }
.closing { background: var(--pine); color: var(--paper); margin-top: 4.5rem; padding: 3rem; }
.closing h2 { font-size: 2rem; margin-bottom: 1rem; }
.closing p { margin-bottom: 1.5rem; }
.photo-grid { display: grid; gap: 2.5rem 2rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.photo-trigger { background: none; border: 0; cursor: pointer; display: block; font: inherit; padding: 0; width: 100%; }
.photo-trigger img { aspect-ratio: 3 / 2; filter: saturate(.85); height: auto; object-fit: cover; width: 100%; }
.photo-trigger figcaption { color: var(--clay); font-size: .78rem; margin-top: .6rem; text-align: left; }
.photo-dialog { background: var(--paper); border: 0; margin: auto; max-width: min(92vw, 60rem); padding: 0; }
.photo-dialog::backdrop { background: rgba(31,43,45,.78); }
.photo-dialog__body { padding: 1rem; }
.photo-dialog img { height: auto; margin: 0 auto; max-height: 76vh; width: auto; }
.photo-dialog figcaption { color: var(--clay); font-size: .82rem; margin-top: .75rem; }
.photo-dialog__close { float: right; font-size: .8rem; margin: 0 0 .5rem; }
@media (max-width: 700px) { .page-hero__inner { padding: 4rem 1.25rem 3rem; } .photo-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; } }