/* Reusable editorial project layout, using the portfolio's type and green rules. */
.project-detail.project-story { padding-top: var(--header-height); }
.project-story { border-inline: var(--hairline); }
.story-opening { position: relative; height: min(78svh, 780px); min-height: 470px; color: #fff; }
.story-opening > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.story-opening::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 45%, #0009); }
.story-opening-caption { position: absolute; z-index: 1; bottom: 2rem; left: var(--page-padding-x); right: var(--page-padding-x); }
.story-opening h1 { margin: 0 0 1.5rem; font-size: clamp(3rem, 8vw, 8rem); line-height: 1.05; }
.story-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem; }
.story-meta p { margin: 0; }
.concept-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: var(--hairline); }
.concept-column { position: relative; min-width: 0; margin: 0; }
.concept-column + .concept-column { border-left: var(--hairline); }
.concept-column img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.concept-column figcaption { padding: 1rem var(--page-padding-x); font-size: 1rem; border-top: var(--hairline); }
.story-row { border-top: var(--hairline); }
.story-row .project-spec-block { max-width: 780px; margin: 0 auto; padding: clamp(4rem,8vw,8rem) var(--page-padding-x); text-align: left; }
.story-row .project-spec-block h2 { margin: 0 0 1.5rem; font-family: var(--font-body); font-size: var(--size-project-detail-title); font-weight: var(--weight-semibold); }
.story-row .project-spec-block p { max-width: none; font-size: 1rem; line-height: 1.6; }
.story-row--text { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.story-row--text .project-spec-block { max-width: 640px; padding-inline: clamp(1.5rem,4vw,4rem); }
.story-row--text .project-spec-block + .project-spec-block { border-top: 0; border-left: var(--hairline); }
.project-story .simple-image-gallery { width: 100%; background: var(--paper); }
.project-story .simple-image-gallery-slide { padding: 0; margin: 0; width: 100%; flex: 0 0 100%; }
.project-story .simple-image-gallery-slide img,
.project-story .simple-image-gallery-slide video { display: block; width: 100%; height: auto; max-height: none; aspect-ratio: 16 / 10; object-fit: contain; }
.project-story [aria-label="Identità visiva"] .simple-image-gallery-slide img { object-fit: cover; }
.project-story .simple-gallery-nav { min-width: 44px; min-height: 44px; background: transparent; border: 0; }
.project-story .simple-gallery-nav-prev { left: var(--page-padding-x); }
.project-story .simple-gallery-nav-next { right: var(--page-padding-x); }
.project-story .simple-gallery-nav:focus-visible,
.project-story .simple-image-gallery-track:focus-visible { outline: 1px solid var(--ink); outline-offset: -4px; }
.story-site-link { text-decoration: underline; text-underline-offset: .2em; }
@media(max-width: 767px) {
 .story-opening { height: 70svh; min-height: 450px; }
 .story-row--text { grid-template-columns: 1fr; }
 .story-row--text .project-spec-block + .project-spec-block { border-left: 0; border-top: var(--hairline); }
 .concept-column figcaption { font-size: .85rem; padding: .85rem; }
 .project-story .simple-image-gallery-slide img,
 .project-story .simple-image-gallery-slide video { aspect-ratio: 4 / 3; }
}
@media(prefers-reduced-motion: reduce) { .project-story .simple-image-gallery-track { scroll-behavior: auto; } }

/* Both columns use exactly the same image width; the divider does not consume layout space. */
.concept-column + .concept-column { border-left: 0; }
.concept-column + .concept-column::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 1px; background: var(--ink); pointer-events: none; }
.concept-column figcaption { font-family: var(--font-display); font-size: clamp(1.5rem, 2.5vw, 2.5rem); line-height: 1.15; }
.story-row .project-spec-block h2 { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: clamp(2rem, 3.5vw, 3.5rem); line-height: 1.1; }
.project-story .simple-image-gallery-track { align-items: flex-start; }
.project-story .simple-image-gallery-slide img { height: auto; aspect-ratio: auto; object-fit: cover; }
.project-story .simple-image-gallery-slide video { aspect-ratio: auto; height: auto; object-fit: cover; }

.story-next-project { border-top: var(--hairline); padding: clamp(3rem, 6vw, 6rem) var(--page-padding-x); display: flex; justify-content: flex-end; }
.story-next-project a { display: inline-flex; align-items: center; gap: 2rem; min-height: 44px; padding: 1rem 1.5rem; border: var(--hairline); font-size: 1rem; line-height: 1.3; }
.story-next-project a:hover { background: var(--ink); color: var(--paper); opacity: 1; }
.story-next-project a:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.project-story .simple-gallery-nav[hidden] { display: none; }

.story-concept .project-spec-block { max-width: none; width: 100%; padding-inline: clamp(1.5rem,4vw,4rem); }

/* Previous and next projects share one row; previous stays visually unboxed. */
.story-next-project { justify-content: space-between; align-items: center; gap: 1.5rem; }
.story-next-project .story-previous-project { border: 0; background: transparent; padding-inline: 0; }
.story-next-project .story-previous-project:hover { background: transparent; color: var(--ink); opacity: .62; }
@media (max-width: 575px) {
 .story-next-project { gap: 1rem; }
 .story-next-project a { gap: .5rem; padding: .75rem; font-size: .85rem; }
}
/* Default project sequence: full-width concept, specifications with text or image. */
.story-specifications { align-items: stretch; }
.story-specifications > .project-spec-block { width: 100%; max-width: none; }
.story-spec-image { min-width: 0; margin: 0; border-left: var(--hairline); }
.story-spec-image img { display: block; width: 100%; height: 100%; min-height: 100%; object-fit: cover; }
@media (max-width: 767px) {
 .story-spec-image { border-left: 0; border-top: var(--hairline); }
 .story-spec-image img { height: auto; min-height: 0; }
}
.story-concept .project-spec-block p + p { margin-top: 1.25rem; }
/* One gallery size across projects; media always fits beneath the desktop navbar. */
.project-story .simple-image-gallery {
 width: min(100%, 1200px);
 margin-inline: auto;
 border-inline: var(--hairline);
}
.project-story .simple-image-gallery-slide img,
.project-story .simple-image-gallery-slide video {
 width: auto;
 height: auto;
 max-width: 100%;
 max-height: calc(100svh - var(--header-height) - 3rem);
 margin-inline: auto;
 object-fit: contain;
 aspect-ratio: auto;
}
.story-mockup-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: var(--hairline); }
.story-mockup-grid figure { margin: 0; min-width: 0; border-bottom: var(--hairline); }
.story-mockup-grid figure:nth-child(even) { border-left: var(--hairline); }
.story-mockup-grid img { display: block; width: 100%; height: auto; }
@media(max-width:767px) {
 .story-mockup-grid { grid-template-columns: 1fr; }
 .story-mockup-grid figure:nth-child(even) { border-left: 0; }
}
.story-mockup-grid--single { grid-template-columns: minmax(0,1fr); }
/* Wine categories use compact catalogue typography and a stable media stage. */
.story-gallery-heading { padding: .85rem var(--page-padding-x); }
.story-gallery-heading h2 { margin: 0; font-family: var(--font-body); font-size: clamp(.8rem,1.35vw,1.25rem); font-weight: 700; line-height: 1.2; text-transform: uppercase; }
.story-wine .simple-image-gallery-track { height: min(720px, calc(100svh - var(--header-height) - 5rem)); align-items: stretch; }
.story-wine .simple-image-gallery-slide { height: 100%; display: flex; align-items: center; justify-content: center; }
.project-story .story-wine .simple-image-gallery-slide img,
.project-story .story-wine .simple-image-gallery-slide video { height: 100%; width: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-inline: var(--hairline); }
.project-story .story-wine .simple-image-gallery-slide video { height: auto; width: 100%; max-height: 100%; border: var(--hairline); }
/* Standalone horizontal media follows its natural frame, without side gutters. */
.project-story .simple-image-gallery:not([data-story-gallery]) { width: fit-content; max-width: 100%; border-inline: 0; }
.project-story .simple-image-gallery:not([data-story-gallery]) .simple-image-gallery-track { overflow: visible; }
.project-story .simple-image-gallery:not([data-story-gallery]) .simple-image-gallery-slide { flex: 0 1 auto; width: auto; }
.project-story .story-wine .simple-image-gallery-slide img,
.project-story .story-wine .simple-image-gallery-slide video { border: 0; }
/* Stable shared stage: horizontal and vertical media remain complete at every slide. */
.project-story { --story-gallery-height: min(560px, calc(100svh - var(--header-height) - 5rem)); }
.project-story [data-story-gallery] .simple-image-gallery-track,
.project-story .story-wine [data-story-gallery] .simple-image-gallery-track { height: var(--story-gallery-height); align-items: stretch; }
.project-story [data-story-gallery] .simple-image-gallery-slide { height: 100%; display: flex; align-items: center; justify-content: center; }
.project-story [data-story-gallery] .simple-image-gallery-slide img,
.project-story [data-story-gallery] .simple-image-gallery-slide video,
.project-story .story-wine [data-story-gallery] .simple-image-gallery-slide img,
.project-story .story-wine [data-story-gallery] .simple-image-gallery-slide video { width: 100%; height: 100%; max-height: 100%; max-width: 100%; object-fit: contain; border: 0; }
/* Blend white out of the original logo without altering its lettering; crop its empty margins. */
.story-logo { border-top: var(--hairline); padding: 1.5rem var(--page-padding-x); }
.story-logo figure { position: relative; width: min(100%, 560px); aspect-ratio: 2 / 1; overflow: hidden; margin: 0 auto; }
.story-logo img { position: absolute; width: 100%; height: auto; top: -50%; left: 0; mix-blend-mode: multiply; }
/* Fill the entire stage height; retain only lateral space for narrower media. */
.project-story [data-story-gallery] .simple-image-gallery-slide img,
.project-story [data-story-gallery] .simple-image-gallery-slide video,
.project-story .story-wine [data-story-gallery] .simple-image-gallery-slide img,
.project-story .story-wine [data-story-gallery] .simple-image-gallery-slide video {
 flex: 0 0 auto;
 width: auto;
 height: 100%;
 max-width: none;
 max-height: 100%;
 object-fit: contain;
 margin-inline: auto;
}
.project-story [data-story-gallery] .simple-image-gallery-slide { overflow: hidden; }