/* Catalogo e racconti di progetto. Foto originali, senza filtri cromatici. */
.portfolio { --catalog-muted: #656158; }
.portfolio [hidden] { display: none !important; }
.portfolio button, .portfolio select, .portfolio input { font: inherit; color: inherit; }
.portfolio button { cursor: pointer; }
.portfolio :focus-visible { outline: 2px solid #99704f; outline-offset: 6px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 200; left: 20px; top: 12px; padding: 10px 18px; background: var(--paper); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.portfolio .eyebrow { color: var(--catalog-muted); font-size: 10px; letter-spacing: .18em; }
.catalog-intro { display: grid; grid-template-columns: 1.04fr 1fr; gap: 6vw; padding-top: clamp(150px,15vw,225px); padding-bottom: 100px; align-items: center; }
.catalog-intro h1 { font: 400 clamp(3.4rem,6.1vw,6.5rem)/.98 var(--serif); letter-spacing: -.055em; margin: 28px 0; }
.catalog-lead { max-width: 470px; color: var(--catalog-muted); font-size: clamp(1rem,1.3vw,1.15rem); line-height: 1.8; }
.catalog-pair { display: grid; grid-template-columns: 1.12fr 1fr; gap: 16px; align-items: start; }
.catalog-pair figure { margin: 0; }
.catalog-pair figure+figure { margin-top: 100px; }
.catalog-pair img { height: auto; aspect-ratio: .82; object-fit: cover; }
.catalog-pair figcaption { margin-top: 12px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.catalog-collection { padding-bottom: 110px; scroll-margin-top: 110px; }
.collection-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.collection-heading h2 { font: 400 clamp(2rem,3vw,3rem)/1.15 var(--serif); margin: 0; letter-spacing: -.035em; }
.collection-heading p { max-width: 450px; margin: 0; color: var(--catalog-muted); font-size: 14px; }
.catalog-controls { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 26px; border-bottom: 1px solid var(--line); padding: 36px 0 20px; }
.style-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.style-filters button { border: 1px solid var(--line); border-radius: 0; padding: 11px 17px; background: transparent; font-size: 12px; min-height: 44px; transition: background .2s, color .2s; }
.style-filters button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.style-filters button:hover { border-color: var(--ink); }
.style-filters small { padding-left: 12px; opacity: .7; font-size: 10px; }
.catalog-fields { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; }
.catalog-search input { width: 245px; padding: 12px 2px; font-size: 13px; border-radius: 0; }
.catalog-city select { max-width: 180px; background: transparent; border: 0; padding: 12px 22px 12px 0; font-size: 13px; min-height: 44px; }
.catalog-kind select { max-width: 195px; background: transparent; border: 0; padding: 12px 20px 12px 0; font-size: 13px; min-height: 44px; }
.catalog-page .catalog-controls { align-items: stretch; flex-direction: column; }
.catalog-page .catalog-fields { justify-content: flex-start; gap: 30px; }
.catalog-page .catalog-search { margin-right: auto; }
.catalog-page .catalog-search input { width: min(330px,36vw); }
.catalog-count { margin: 18px 0 28px; font-size: 11px; letter-spacing: .08em; color: var(--catalog-muted); }
.work-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 64px 36px; align-items: start; }
.work-card { min-width: 0; }
.work-card-link { display: block; }
.work-card-image { position: relative; overflow: hidden; background: #e4ded3; aspect-ratio: 1.24; }
.work-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.work-card-link:hover img { transform: scale(1.025); }
.work-card-style { position: absolute; top: 16px; left: 16px; padding: 5px 10px; background: var(--paper); color: var(--ink); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.work-card-arrow { position: absolute; right: 16px; bottom: 16px; width: 40px; height: 40px; display: grid; place-items: center; background: var(--paper); border-radius: 50%; font-size: 21px; }
.work-card-meta { display: flex; justify-content: space-between; gap: 15px; margin: 20px 0 12px; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--catalog-muted); }
.work-card h3 { font: 400 clamp(1.9rem,2.7vw,2.75rem)/1.12 var(--serif); letter-spacing: -.035em; margin: 0 0 14px; }
.work-card p { max-width: 510px; font-size: 15px; color: var(--catalog-muted); line-height: 1.7; margin: 0; }
.work-card-cta { display: inline-flex; gap: 22px; margin-top: 20px; padding-bottom: 5px; border-bottom: 1px solid var(--line); font-size: 11px; text-transform: uppercase; letter-spacing: .09em; }
.catalog-empty { text-align: center; padding: 65px 20px; background: #e9e3d9; }
.catalog-empty button { border: 0; border-bottom: 1px solid; background: transparent; padding: 10px; }
.portfolio-cta { padding: 100px 0 115px; color: var(--paper); background: #38352e; }
.portfolio-cta .eyebrow { color: #c7b7a2; }
.portfolio-cta h2 { font: 400 clamp(3rem,6.5vw,6.8rem)/.98 var(--serif); letter-spacing: -.04em; margin: 30px 0; }
.portfolio-link { display: inline-flex; align-items: center; gap: 30px; border-bottom: 1px solid currentColor; padding: 10px 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.portfolio-back { display: inline-block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 44px; }
.work-intro { padding-top: 137px; padding-bottom: 80px; }
.work-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(35px,6vw,90px); align-items: center; }
.work-intro h1 { font: 400 clamp(3.5rem,5.7vw,6rem)/.98 var(--serif); margin: 26px 0; letter-spacing: -.05em; }
.work-intro-copy>p:not(.eyebrow) { max-width: 490px; color: var(--catalog-muted); font-size: 17px; line-height: 1.75; }
.work-intro .portfolio-link { margin-top: 22px; }
.work-cover { margin: 0; min-width: 0; }
.work-cover img { height: auto; width: 100%; max-height: 650px; object-fit: contain; }
.work-cover figcaption { display: flex; justify-content: space-between; gap: 15px; margin-top: 15px; color: var(--catalog-muted); font-size: 11px; }
.work-cover figcaption span { white-space: nowrap; }
.work-story { display: grid; grid-template-columns: .65fr 1.35fr; gap: 9vw; padding-top: 65px; padding-bottom: 105px; border-top: 1px solid var(--line); }
.work-facts { margin: 0; }
.work-facts>div { padding: 18px 0; border-bottom: 1px solid var(--line); }
.work-facts>div:first-child { padding-top: 0; }
.work-facts dt { font-size: 10px; color: var(--catalog-muted); text-transform: uppercase; letter-spacing: .13em; margin-bottom: 8px; }
.work-facts dd { font: 400 20px/1.4 var(--serif); margin: 0; }
.work-story h2, .album-heading h2, .related-work h2 { font: 400 clamp(2.6rem,4.5vw,4.8rem)/1.04 var(--serif); letter-spacing: -.04em; margin: 20px 0 26px; }
.work-story>div>p:not(.eyebrow) { color: var(--catalog-muted); font-size: 18px; line-height: 1.8; max-width: 730px; }
.work-album, .album-chapter { scroll-margin-top: 100px; }
.album-nav { position: sticky; top: 84px; z-index: 25; background: var(--paper); border-block: 1px solid var(--line); }
.album-nav .wrap { display: flex; gap: 30px; overflow-x: auto; padding-block: 20px; }
.album-nav a { font-size: 11px; white-space: nowrap; }
.album-nav a span { color: #866b4e; padding-right: 5px; }
.album-chapter { padding: 80px 0 90px; scroll-margin-top: 145px; }
.album-chapter:nth-of-type(even) { background: #e8e2d8; }
.album-heading { display: grid; grid-template-columns: .65fr 1.35fr; gap: 9vw; margin-bottom: 42px; }
.album-heading>.eyebrow { margin-top: 28px; }
.album-heading>.eyebrow>span { display: block; margin-top: 16px; letter-spacing: .06em; text-transform: none; }
.album-heading h2 { margin-bottom: 22px; }
.album-heading>div>p { max-width: 640px; color: var(--catalog-muted); line-height: 1.75; }
.album-photos { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px; align-items: start; }
.album-photo { margin: 0; min-width: 0; }
.album-photo>a { display: block; position: relative; cursor: zoom-in; }
.album-photo img { display: block; width: 100%; height: auto; max-height: 720px; object-fit: contain; }
.photo-rotated>a { overflow: hidden; }
.photo-rotated>a>img { position: absolute; left: 50%; top: 50%; width: calc(100% * var(--source-ratio)); max-width: none; max-height: none; height: auto; transform: translate(-50%,-50%) rotate(var(--rotation)); }
.album-photo figcaption { display: flex; gap: 14px; font-size: 12px; line-height: 1.5; margin-top: 14px; color: var(--catalog-muted); }
.album-photo figcaption>span { font-size: 10px; margin-top: 2px; color: #81694e; }
.photo-zoom { position: absolute; right: 14px; bottom: 14px; width: 34px; height: 34px; background: var(--paper); display: grid; place-items: center; font-size: 20px; }
.album-photos.single { grid-template-columns: 1fr; max-width: 980px; margin-inline: auto; }
.album-photos.single img { max-height: 800px; }
.album-more { margin-top: 32px; border-top: 1px solid var(--line); }
.album-more summary { padding: 20px 0; cursor: pointer; font-size: 12px; list-style-position: inside; }
.album-more summary>span { float: right; color: var(--catalog-muted); }
.album-more[open] summary { margin-bottom: 10px; }
.album-thumbnails { grid-template-columns: repeat(3,minmax(0,1fr)); }
.related-work { padding-block: 100px; }
.related-work .work-grid { margin: 40px 0; }
.photo-viewer { inset: 0; width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none; margin: 0; padding: 70px 80px; border: 0; color: #fff; background: #171814; overflow: hidden; }
.photo-viewer[open] { display: grid; grid-template-columns: 1fr; place-items: center; }
.photo-viewer::backdrop { background: #171814; }
.photo-viewer figure { margin: 0; width: 100%; height: 100%; min-height: 0; display: grid; grid-template-rows: minmax(0,1fr) auto; gap: 20px; }
.photo-viewer img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.viewer-stage { width: 100%; height: 100%; min-height: 0; overflow: hidden; display: grid; place-items: center; }
.viewer-stage img { max-width: none; grid-area: 1/1; }
.photo-viewer figcaption { display: flex; justify-content: space-between; gap: 24px; font-size: 13px; line-height: 1.5; }
.photo-viewer [data-viewer-count] { white-space: nowrap; color: #d1b08a; }
.photo-viewer button { position: absolute; background: transparent; color: #fff; border: 1px solid #77766d; width: 44px; height: 44px; font-size: 24px; }
.photo-viewer button:disabled { opacity: .25; cursor: default; }
.viewer-close { top: 15px; right: 20px; }
.viewer-prev { left: 18px; top: calc(50% - 22px); }
.viewer-next { right: 18px; top: calc(50% - 22px); }
.viewer-original { position: absolute; left: 80px; bottom: 20px; font-size: 11px; border-bottom: 1px solid #77766d; }
@media (max-width:1050px) { .catalog-controls { align-items: start; flex-direction: column; } .catalog-fields { width: 100%; justify-content: space-between; } }
@media (max-width:860px) {
  .portfolio .wrap { width: calc(100% - 40px); }
  .catalog-intro { padding-top: 130px; padding-bottom: 70px; gap: 40px; grid-template-columns: 1fr; }
  .catalog-intro h1 { font-size: clamp(3.2rem,9vw,5.4rem); }
  .catalog-pair { max-width: 620px; gap: 18px; }
  .catalog-pair img { aspect-ratio: 1.1; }
  .catalog-pair figure+figure { margin-top: 42px; }
  .collection-heading { align-items: start; flex-direction: column; gap: 16px; }
  .work-grid { gap: 46px 24px; }
  .work-card-meta { flex-direction: column; gap: 5px; }
  .work-intro { padding-top: 108px; padding-bottom: 55px; }
  .work-intro-grid { grid-template-columns: 1fr; gap: 45px; }
  .work-intro h1 { max-width: 640px; font-size: clamp(3.4rem,9vw,5rem); }
  .work-cover { width: 100%; }
  .work-cover img { max-height: 680px; }
  .work-story { grid-template-columns: 1fr; gap: 45px; padding-block: 50px 70px; }
  .work-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
  .work-facts>div:first-child { padding-top: 18px; }
  .album-nav { top: 68px; }
  .album-nav .wrap { gap: 22px; }
  .album-heading { grid-template-columns: 1fr; gap: 0; }
  .album-heading>.eyebrow { display: flex; justify-content: space-between; align-items: baseline; }
  .album-heading>.eyebrow>span { margin-top: 0; }
  .album-chapter { padding-block: 50px 60px; scroll-margin-top: 130px; }
  .album-photos { gap: 22px; }
  .album-thumbnails { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .portfolio-cta, .related-work { padding-block: 75px; }
}
@media (max-width:560px) {
  .catalog-intro { padding-top: 120px; }
  .catalog-intro h1 { font-size: clamp(2.8rem,12vw,4rem); }
  .catalog-pair img { aspect-ratio: .95; }
  .catalog-pair figcaption { font-size: 9px; }
  .catalog-controls { gap: 18px; }
  .style-filters { gap: 6px; }
  .style-filters button { padding: 10px 12px; font-size: 11px; }
  .style-filters small { padding-left: 6px; }
  .catalog-fields { flex-direction: column; align-items: stretch; gap: 10px; }
  .catalog-page .catalog-fields { gap: 10px; }
  .catalog-page .catalog-search { margin-right: 0; }
  .catalog-page .catalog-search input { width: 100%; }
  .catalog-search input { width: 100%; font-size: 16px; }
  .catalog-city select { font-size: 14px; max-width: none; width: 100%; }
  .catalog-kind select { font-size: 14px; max-width: none; width: 100%; }
  .work-grid { grid-template-columns: 1fr; gap: 48px; }
  .work-card-meta { flex-direction: row; }
  .work-card-image { aspect-ratio: 1.12; }
  .work-card h3 { font-size: 2rem; }
  .work-intro h1 { font-size: 3.3rem; }
  .work-story h2, .album-heading h2, .related-work h2 { font-size: 2.6rem; }
  .work-facts { grid-template-columns: 1fr; }
  .work-cover figcaption { flex-direction: column; gap: 4px; }
  .album-photos { grid-template-columns: 1fr; gap: 34px; }
  .album-photo img { max-height: none; }
  .album-thumbnails { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 26px 16px; }
  .album-thumbnails figcaption { font-size: 11px; gap: 7px; }
  .photo-viewer { padding: 70px 16px 115px; }
  .photo-viewer figcaption { font-size: 12px; gap: 15px; }
  .viewer-prev, .viewer-next { top: auto; bottom: 20px; }
  .viewer-original { left: 50%; bottom: 30px; transform: translateX(-50%); white-space: nowrap; }
}
@media (prefers-reduced-motion:reduce) { .portfolio { scroll-behavior: auto; } .work-card-image img, .style-filters button { transition: none; } }