/* Drawings lead; shared typography and one column axis connect the varied layouts. */
.portfolio-page { --work-gap:64px; --work-columns:minmax(0,1.3fr) minmax(0,1fr); }
.work-opening,.work-feature,.work-gallery-heading,.work-contact-grid { display:grid; grid-template-columns:var(--work-columns); gap:var(--work-gap); }
.work-opening { align-items:center; padding-block:56px 54px; }
.portfolio-page h1 em,.portfolio-page h2 em { color:var(--sage); }
.work-promise { margin-bottom:18px; }
.work-opening .copy { max-width:470px; }
.work-feature { align-items:center; padding-block:48px 64px; border-top:1px solid var(--line); }
.work-sheet { margin:0; min-width:0; padding:22px 22px 0; }
.work-sheet-green { background:#dce6c4; }
.work-sheet-warm { background:#eae3d8; }
.work-sheet .picture-link { background:white; }
.work-sheet img { display:block; width:100%; height:auto; }
.work-sheet figcaption { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:17px; color:var(--muted); }
.work-sheet figcaption>span:last-child { text-align:right; }
.work-sheet figcaption .arrow { width:12px; height:12px; vertical-align:middle; margin-left:6px; }
.portfolio-page .zoom-label { background:var(--coral); width:34px; height:34px; right:12px; bottom:12px; }
.work-pin { position:absolute; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:var(--coral); color:var(--ink); box-shadow:0 2px 8px #263b3526; pointer-events:none; }
.work-pin-one { left:43%; top:45%; }
.work-pin-two { left:67%; top:79%; }
.work-reading>.copy { margin-top:24px; max-width:470px; }
.work-notes { margin:25px 0 0; }
.work-notes>div { border-top:1px solid var(--line); padding-block:16px; }
.work-notes dt { display:flex; gap:12px; align-items:center; }
.work-notes dd { margin:8px 0 0; color:var(--muted); max-width:470px; }
.work-perspective .work-reading { max-width:520px; }
.work-perspective .text-link { margin-top:10px; }
.work-collection { border-top:1px solid var(--line); padding-top:64px; }
.work-gallery-heading { align-items:end; margin-bottom:32px; }
.work-gallery-heading .copy { max-width:470px; }
.work-filters { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:28px; }
.portfolio-page .work-filter { margin:0; padding:10px 16px; min-height:44px; border:1px solid var(--line); gap:12px; transition:background .2s,color .2s; }
.portfolio-page .work-filter[aria-pressed=true] { color:var(--paper); background:var(--ink); border-color:var(--ink); }
.work-filter:not([aria-pressed=true]):hover { background:#e5e9d9; }
.work-filter>span { opacity:.8; }
.work-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px 28px; }
.work-card { min-width:0; }
.work-card-link { display:block; }
.work-thumbnail { position:relative; padding:16px; background:#e9e7dd; aspect-ratio:4/3; overflow:hidden; }
.work-card:nth-child(3n+2) .work-thumbnail { background:#e5e9d9; }
.work-card:nth-child(3n) .work-thumbnail { background:#eee4db; }
.work-thumbnail img { width:100%; height:100%; object-fit:contain; transition:transform .35s ease; }
.work-card-link:hover img { transform:scale(1.025); }
.work-card-caption { padding-top:13px; }
.work-card-caption>span { color:var(--muted); }
.work-card-caption h3 { margin-top:4px; }
.work-gallery-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px; padding-block:30px 40px; }
.work-gallery-bottom p { color:var(--muted); }
.portfolio-page .work-more { background:var(--ink); color:var(--paper); }
.work-more .arrow { transform:rotate(45deg); }
.work-places { padding-bottom:54px; }
.work-places .details-list details>div { max-width:none; padding:0 0 24px; }
.work-town-list { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px 20px; margin-top:18px; padding:0; list-style:none; }
.work-contact { background:var(--coral); padding-block:54px; }
.work-contact-grid { align-items:center; }
.portfolio-page .work-contact h2 em { color:var(--ink); }
.work-contact .copy { max-width:440px; color:var(--ink); }
.work-contact .button { margin-top:22px; background:var(--ink); color:var(--paper); }
.portfolio-page main :is(a,button):focus-visible { outline:2px solid var(--ink); outline-offset:5px; }
@media(max-width:1100px) {
  .portfolio-page { --work-gap:40px; }
  .work-opening { padding-block:45px; }
  .work-sheet { padding:16px 16px 0; }
  .work-sheet figcaption { flex-direction:column; align-items:start; gap:5px; }
  .work-sheet figcaption>span:last-child { text-align:left; }
  .work-town-list { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media(max-width:1000px) { .work-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 22px; } }
@media(max-width:800px) {
  .portfolio-page { --work-columns:minmax(0,1fr); --work-gap:30px; }
  .work-opening { padding-block:38px 44px; }
  .work-feature { padding-block:38px 44px; }
  .work-concept .work-reading { grid-row:1; }
  .work-reading>.copy { max-width:none; }
  .work-sheet { width:100%; }
  .work-collection { padding-top:44px; }
  .work-gallery-heading { gap:24px; }
  .work-filters { gap:6px; }
  .portfolio-page .work-filter { padding-inline:12px; gap:8px; }
  .work-places { padding-bottom:40px; }
  .work-town-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .work-contact { padding-block:44px; }
}
@media(max-width:450px) {
  .work-sheet { padding:12px 12px 0; }
  .work-sheet figcaption { padding-block:12px; }
  .work-grid { gap:24px 16px; }
  .work-thumbnail { padding:8px; }
  .portfolio-page .work-thumbnail .zoom-label { width:26px; height:26px; right:5px; bottom:5px; }
  .work-thumbnail .zoom-label .arrow { width:17px; height:17px; }
  .work-town-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 12px; }
}
@media(prefers-reduced-motion:reduce) { .work-thumbnail img { transition:none; } }