/*
    Stili dedicati alla pagina "Chi siamo e Storia".
    Qui si gestiscono il hero narrativo, le sezioni di testo, le linee temporali
    e gli elementi grafici che rafforzano la storytelling del brand.
*/
.story-page { width: min(1060px, calc(100% - 80px)); margin: 0 auto; }
.story-hero { min-height: 510px; display: flex; flex-direction: column; justify-content: center; padding: 90px 8vw 100px; border-bottom: 1px solid var(--border); background: var(--blue-brass); color: var(--white); }
.story-kicker, .section-kicker { margin: 0 0 18px; color: var(--wood-light); font-size: 11px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.story-hero h1 { max-width: 760px; margin: 0; font-family: var(--display-font); font-size: clamp(58px, 9vw, 112px); font-weight: 400; line-height: .92; }
.story-hero h1 em { color: var(--wood-light); font-weight: 400; }
.story-lead { max-width: 520px; margin: 34px 0 0; color: rgba(255, 253, 249, .78); font-size: 17px; line-height: 1.6; }
.story-section { display: grid; grid-template-columns: 145px minmax(0, 690px); gap: 50px; padding: 112px 8vw; border-bottom: 1px solid var(--border); }
.about-section { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(34px, 5vw, 72px); }
.staff-placeholder { display: grid; min-height: 520px; place-items: center; border: 1px dashed rgba(35, 77, 89, .5); background: linear-gradient(135deg, rgba(216, 182, 150, .22), rgba(35, 77, 89, .08)); color: var(--blue-brass); text-align: center; }
.staff-placeholder span { font-family: var(--display-font); font-size: clamp(22px, 3vw, 32px); line-height: 1.15; }
.section-marker { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; color: var(--wood); font-family: var(--display-font); font-size: 14px; }
.section-marker i { display: block; width: 1px; height: 70px; background: var(--wood); }
.section-copy { max-width: 690px; }
.section-kicker { color: var(--wood); }
.section-copy h2 { margin: 0 0 32px; color: var(--blue-brass); font-family: var(--display-font); font-size: clamp(48px, 6vw, 76px); font-weight: 400; line-height: 1; }
.section-copy p { margin: 0 0 22px; color: rgba(23, 47, 54, .84); font-size: 16px; line-height: 1.8; }
.section-copy p:last-child { margin-bottom: 0; }
.section-copy strong { color: var(--blue-brass); font-weight: 700; }
.section-copy em { color: var(--wood); }
.history-section { background: #f4eadf; }

@media (max-width: 700px) {
	.story-page { width: 100%; }
	.story-hero { min-height: 470px; padding: 70px 28px 76px; }
	.story-hero h1 { font-size: clamp(54px, 16vw, 82px); }
	.story-lead { margin-top: 28px; font-size: 15px; }
	.story-section { display: block; padding: 68px 28px 76px; }
	.about-section { display: flex; flex-direction: column; align-items: stretch; gap: 44px; }
	.about-section .section-copy { order: 1; }
	.about-section .staff-placeholder { order: 2; min-height: 300px; }
	.section-marker { flex-direction: row; align-items: center; gap: 13px; margin-bottom: 42px; }
	.section-marker i { width: 42px; height: 1px; }
	.section-copy h2 { margin-bottom: 25px; font-size: 52px; }
	.section-copy p { font-size: 15px; line-height: 1.75; }
}

@media (prefers-reduced-motion: reduce) { .story-page { scroll-behavior: auto; } }