.story-page { overflow: hidden; background: #fbf8f3; }
.story-page .story-kicker,
.story-page .story-section-heading > p { margin: 0 0 .8rem; color: #6f574c; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.story-hero { padding: clamp(3.6rem, 7vw, 7rem) 0; background: #efe4db; }
.story-hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); }
.story-hero h1 { max-width: 820px; margin: 0; font-size: clamp(4.5rem, 8vw, 7.8rem); font-weight: 500; letter-spacing: -.045em; line-height: .82; }
.story-lead { max-width: 720px; margin: 1.8rem 0 0; color: #625750; font-size: 1.08rem; line-height: 1.75; }
.story-archive-photo { margin: 0; }
.story-photos-hint { display: none; margin: .85rem 0 0; font-size: .61rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8f735f; }
.story-photos-hint span { margin-left: .2em; }
.story-photo-panel { position: relative; min-height: 100%; display: flex; overflow: hidden; padding: 1.5rem; justify-content: flex-end; flex-direction: column; color: #493e38; background: linear-gradient(145deg, #e8d8cc 0%, #f8f1eb 58%, #ddd0c6 100%); border: 1px solid rgba(143,110,96,.22); }
.story-photo-panel::after { content: "1973"; position: absolute; top: 8%; left: 7%; color: rgba(255,255,255,.44); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(4.5rem, 9vw, 8.5rem); line-height: 1; }
.story-photo-panel span { position: relative; z-index: 1; font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.story-photo-panel strong { position: relative; z-index: 1; margin: .35rem 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.8rem, 3vw, 2.7rem); font-weight: 600; line-height: 1; }
.story-hero-photo { padding: .65rem; background: #fffdf9; border: 1px solid rgba(143,110,96,.16); border-radius: 24px; box-shadow: 0 24px 60px rgba(62,48,42,.1); transform: rotate(1.4deg); }
.story-hero-photo .story-photo-panel { min-height: 440px; border-radius: 18px; }
.story-hero-photo figcaption, .story-archive-grid figcaption { padding: .75rem .4rem .15rem; color: #766b64; font-size: .7rem; line-height: 1.5; }

.story-opening { display: grid; padding-top: clamp(4rem, 8vw, 7rem); padding-bottom: clamp(4rem, 8vw, 7rem); grid-template-columns: .75fr 1.25fr; gap: clamp(2rem, 8vw, 8rem); }
.story-opening-title span { color: #c9a24b; font-size: .75rem; font-weight: 700; letter-spacing: .15em; }
.story-opening h2, .story-study h2, .story-section-heading h2, .story-today h2 { margin: .65rem 0 0; font-size: clamp(3rem, 5.2vw, 5rem); font-weight: 500; letter-spacing: -.03em; line-height: .95; }
.story-opening-copy > p { margin: 0 0 1.2rem; color: #5f5850; font-size: 1.03rem; line-height: 1.82; }
.story-opening blockquote { margin: 2rem 0 0; padding: 1.5rem 0 0 1.5rem; color: #4b3d36; border-left: 2px solid #c9a24b; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.8rem, 3vw, 2.65rem); line-height: 1.15; }

.story-archive-grid { display: grid; padding-bottom: clamp(4rem, 8vw, 7rem); grid-template-columns: 1.2fr .8fr .95fr; align-items: end; gap: 14px; }
.story-archive-grid figure { padding: .55rem; background: #fffdf9; border: 1px solid rgba(143,110,96,.16); border-radius: 18px; box-shadow: 0 16px 40px rgba(62,48,42,.07); }
.story-archive-grid .story-photo-panel { border-radius: 12px; }
.story-archive-house .story-photo-panel { min-height: 390px; }
.story-archive-liliana .story-photo-panel { min-height: 310px; }
.story-archive-maura .story-photo-panel { min-height: 350px; }
.story-archive-grid figure:nth-child(2) { transform: translateY(22px) rotate(-1.4deg); }
.story-archive-grid figure:nth-child(3) { transform: rotate(1.2deg); }
.story-archive-grid .story-photo-panel::after { content: "ARCHIVIO"; font-size: clamp(3rem, 5vw, 5rem); }

.story-timeline-section { padding: clamp(4rem, 7vw, 6.5rem) 0; color: #fffdf9; background: #302a27; }
.story-section-heading { max-width: 900px; margin-bottom: 3rem; }
.story-timeline-section .story-section-heading > p { color: #d3aa4b; }
.story-timeline { border-top: 1px solid rgba(255,255,255,.16); }
.story-timeline article { display: grid; padding: 1.75rem 0; grid-template-columns: minmax(100px,.32fr) 1.68fr; border-bottom: 1px solid rgba(255,255,255,.16); gap: 2rem; }
.story-timeline time { color: #d3aa4b; font-size: .78rem; font-weight: 700; letter-spacing: .12em; }
.story-timeline h3 { margin: 0 0 .45rem; font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 500; }
.story-timeline p { max-width: 760px; margin: 0; color: #d6ccc5; line-height: 1.7; }
.story-timeline-photos { display: grid; margin-top: 3rem; grid-template-columns: 1fr 1fr 1fr; align-items: start; gap: 12px; }
.story-timeline-photos figure { margin: 0; padding: .45rem; background: #f8f1eb; border-radius: 16px; }
.story-timeline-photos figure:nth-child(2) { margin-top: 2.5rem; }
.story-timeline-photos .story-photo-panel { min-height: 260px; border-radius: 11px; }
.story-timeline-photos .story-photo-panel::after { content: "RICORDI"; font-size: clamp(3rem, 5vw, 5rem); }

.story-study { display: grid; padding-top: clamp(4rem, 8vw, 7rem); padding-bottom: clamp(4rem, 8vw, 7rem); grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.story-study-copy > p:not(.story-kicker) { color: #5f5850; line-height: 1.75; }
.story-text-link { display: inline-flex; margin-top: 1rem; padding-bottom: .35rem; color: #74594d; border-bottom: 1px solid #c9a24b; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.story-text-link span { margin-left: .6rem; }
.story-certificate-gallery { width: min(100%, 520px); min-width: 0; justify-self: center; }
.story-certificates { margin: 0; padding: .6rem; overflow: hidden; background: #fffdf9; border: 1px solid rgba(143,110,96,.18); border-radius: 20px; box-shadow: 0 18px 44px rgba(62,48,42,.09); transform: rotate(1deg); }
.story-certificates img { display: block; width: 100%; height: 220px; max-height: 220px; aspect-ratio: auto; border-radius: 14px; object-fit: cover; object-position: center 42%; }
.story-certificates figcaption { padding: .7rem .4rem .25rem; color: #756b64; font-size: .7rem; line-height: 1.5; }

.story-credentials { padding: clamp(4rem, 7vw, 6rem) 0; background: #f1e5dc; }
.story-credential-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.story-credential-grid article { min-height: 260px; padding: 1.7rem; background: #fffdf9; border: 1px solid rgba(143,110,96,.16); border-radius: 22px; }
.story-credential-grid strong { color: #b18a38; font-size: .78rem; letter-spacing: .14em; }
.story-credential-grid h3 { margin: 1.2rem 0 .75rem; color: #3d342f; font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 500; line-height: 1; }
.story-credential-grid p { margin: 0; color: #655c55; line-height: 1.68; }
.story-source-note { max-width: 900px; margin: 1.4rem 0 0; color: #766b64; font-size: .75rem; line-height: 1.6; }
.story-source-note a { color: #6f5145; font-weight: 700; text-underline-offset: 3px; }

.story-team { padding: clamp(4rem, 8vw, 7rem) 0; color: #302a27; background: #fffdf9; }
.story-team-heading { display: grid; max-width: none; grid-template-columns: 1.25fr .75fr; align-items: end; column-gap: 3rem; }
.story-team-heading > p { grid-column: 1 / -1; }
.story-team-heading > span { color: #655c55; line-height: 1.7; }
.story-team-group { position: relative; margin: 0 0 2.5rem; overflow: hidden; border-radius: 28px; }
.story-team-group img { width: 100%; max-height: 660px; object-fit: cover; object-position: center 30%; }
.story-team-group figcaption { position: absolute; right: 1rem; bottom: 1rem; padding: .7rem 1rem; color: #fff; background: rgba(48,42,39,.78); border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; backdrop-filter: blur(8px); }
.story-team-grid { display: grid; gap: 16px; }
.story-team-card { display: grid; overflow: hidden; grid-template-columns: minmax(280px,.72fr) 1.28fr; background: #f3e8e0; border: 1px solid rgba(143,110,96,.14); border-radius: 26px; }
.story-team-card:nth-child(even) { grid-template-columns: 1.28fr minmax(280px,.72fr); }
.story-team-card:nth-child(even) .story-team-portrait { grid-column: 2; grid-row: 1; }
.story-team-card:nth-child(even) .story-team-copy { grid-column: 1; grid-row: 1; }
.story-team-portrait { position: relative; min-height: 540px; overflow: hidden; aspect-ratio: 2 / 3; background: #e8ddd5; }
.story-team-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center top; }
.story-team-portrait:empty { display: none; }
.story-team-card:has(.story-team-portrait:empty) { display: block; }
.story-team-card:has(.story-team-portrait:empty) .story-team-copy { min-height: 0; }
.story-team-card.story-team-card--no-photo { display: block; }
.story-team-card.story-team-card--no-photo .story-team-portrait { display: none; }
.story-team-card.story-team-card--no-photo .story-team-copy { min-height: 0; }
.story-team-copy { display: flex; padding: clamp(1.7rem, 4vw, 3.5rem); justify-content: center; flex-direction: column; }
.story-team-role { margin: 0; color: #6f574c !important; font-size: .76rem !important; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.story-team-copy h3 { margin: .55rem 0 .8rem; font-size: clamp(3rem, 5vw, 4.5rem); font-weight: 500; line-height: .9; }
.story-team-copy blockquote { margin: 0 0 1.2rem; color: #4b3d36; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.45rem, 2.3vw, 2.05rem); line-height: 1.15; }
.story-team-copy > p { margin: .45rem 0; color: #625750; line-height: 1.72; }

.story-today { padding-top: clamp(4rem, 8vw, 7rem); padding-bottom: clamp(5rem, 9vw, 8rem); text-align: center; }
.story-today h2 { max-width: 980px; margin-right: auto; margin-left: auto; }
.story-today > p:not(.story-kicker) { max-width: 760px; margin: 1.5rem auto; color: #625750; font-size: 1.05rem; line-height: 1.75; }
.story-today > strong { display: block; margin-top: 2.2rem; color: #6f574c; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 600; line-height: 1.05; }
.story-actions { display: flex; margin-top: 2rem; justify-content: center; flex-wrap: wrap; gap: 10px; }
.story-actions a { min-height: 48px; display: inline-flex; padding: .8rem 1.25rem; align-items: center; justify-content: center; color: #302a27; background: #c2a091; border: 1px solid #c2a091; border-radius: 999px; font-size: .73rem; font-weight: 700; letter-spacing: .09em; text-decoration: none; text-transform: uppercase; }
.story-actions a + a { background: transparent; border-color: rgba(48,42,39,.3); }

@media (max-width: 767px) {
  .story-hero { padding: 2.7rem 0 3.2rem; }
  .story-hero-grid, .story-opening, .story-study { display: block; }
  .story-hero h1 { font-size: clamp(3.5rem, 17vw, 4.7rem); line-height: .86; }
  .story-lead { margin-top: 1.2rem; font-size: .98rem; line-height: 1.65; }
  .story-hero-photo { margin-top: 2rem; transform: none; }
  .story-hero-photo .story-photo-panel { min-height: 360px; }
  .story-opening { padding-top: 3.6rem; padding-bottom: 3.6rem; }
  .story-opening h2, .story-study h2, .story-section-heading h2, .story-today h2 { font-size: 2.85rem; }
  .story-opening-copy { margin-top: 2rem; }
  .story-opening blockquote { font-size: 1.8rem; }
  /* Archive + timeline photos become horizontal snap-carousels on mobile (like the treatments) */
  .story-archive-grid, .story-timeline-photos {
    display: flex !important; flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    gap: 14px !important;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .story-archive-grid { padding-bottom: 3.2rem !important; }
  .story-archive-grid::-webkit-scrollbar, .story-timeline-photos::-webkit-scrollbar { display: none; }
  .story-archive-grid > figure, .story-timeline-photos > figure {
    flex: 0 0 80% !important; max-width: 300px; min-width: 0;
    margin: 0 !important; transform: none !important;
    scroll-snap-align: start; scroll-snap-stop: always;
  }
  .story-archive-grid .story-photo-panel,
  .story-timeline-photos .story-photo-panel { min-height: 326px !important; padding: 1rem !important; }
  .story-archive-grid .story-photo-panel strong,
  .story-timeline-photos .story-photo-panel strong { font-size: 1.5rem; }
  .story-photo-panel.has-photo { cursor: zoom-in; }
  .story-photos-hint { display: block; margin: .85rem 0 0; font-size: .61rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8f735f; }
  .story-timeline-section .story-photos-hint { color: #d8c08a; }
  .story-timeline-section { padding: 3.5rem 0; }
  .story-timeline article { grid-template-columns: 74px 1fr; gap: 1rem; }
  .story-timeline h3 { font-size: 1.75rem; }
  .story-timeline p { font-size: .92rem; }
  .story-timeline-photos { margin-top: 2.4rem; }
  .story-timeline-photos figure:nth-child(2) { margin-top: 0; }
  .story-study { padding-top: 3.6rem; padding-bottom: 3.6rem; }
  .story-certificate-gallery { width: min(100%, 430px); margin: 2rem auto 0; }
  .story-certificates { transform: none; }
  .story-certificates img { height: 170px; max-height: 170px; }
  .story-credentials { padding: 3.5rem 0; }
  .story-credential-grid { display: block; }
  .story-credential-grid article { min-height: 0; margin-bottom: 10px; padding: 1.35rem; }
  .story-team { padding: 3.8rem 0; }
  .story-team-heading { display: block; }
  .story-team-heading > span { display: block; margin-top: 1rem; }
  .story-team-group { margin-bottom: 1.2rem; border-radius: 20px; }
  .story-team-group img { width: 100%; height: auto; min-height: 0; object-fit: contain; object-position: center; }
  .story-team-card, .story-team-card:nth-child(even) { display: block; }
  .story-team-portrait { min-height: 0; aspect-ratio: 2 / 3; }
  .story-team-copy { padding: 1.5rem; }
  .story-team-copy h3 { font-size: 3.2rem; }
  .story-team-copy blockquote { font-size: 1.65rem; }
  .story-today { padding-top: 4rem; padding-bottom: 6rem; }
  .story-actions { display: grid; }
  .story-text-link,
  .story-source-note a { min-height: 44px; display: inline-flex; align-items: center; }
}

@media (max-width: 399px) {
  .story-archive-grid > figure, .story-timeline-photos > figure { flex-basis: 84% !important; }
}


/* --- Real archive photos inside the panels --- */
.story-photo-panel.has-photo{padding:1.2rem}
.story-photo-panel.has-photo .story-photo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
.story-photo-panel.has-photo::after{display:none}
.story-photo-panel.has-photo::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(28,20,16,.66),rgba(28,20,16,.08) 45%,transparent 72%);z-index:1}
.story-photo-panel.has-photo span,.story-photo-panel.has-photo strong{color:#fff;z-index:2;text-shadow:0 2px 10px rgba(0,0,0,.45)}
/* Hero portrait: keep Liliana's face centered in the landscape frame */
.story-hero-photo .story-photo-panel.has-photo .story-photo-img{object-position:60% 42%}
.story-timeline-photos figcaption{padding:.6rem .35rem .1rem;color:#766b64;font-size:.7rem;line-height:1.5}
/* Certifications wall: whole photo visible, all certificates readable */
.story-certificates img{width:100%!important;height:auto!important;max-height:none!important;aspect-ratio:auto!important;object-fit:contain!important}

/* 2026-10 — source links as tidy chips; first photo hint aligned to the page gutter */
.story-source-note { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .5rem; max-width: 900px; margin: 1.8rem 0 0; }
.story-source-note .story-source-label { flex: 0 0 100%; margin-bottom: .15rem; color: #8f735f; font-size: .64rem; font-weight: 700; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; }
.story-source-note a { display: inline-flex; align-items: center; min-height: 38px; padding: .4rem .95rem; color: #6f5145; background: rgba(255,253,249,.75); border: 1px solid rgba(178,141,119,.35); border-radius: 999px; font-size: .74rem; font-weight: 600; letter-spacing: .02em; line-height: 1.2; text-decoration: none; transition: background-color .2s ease, border-color .2s ease; }
.story-source-note a:hover, .story-source-note a:focus-visible { background: #fffdf9; border-color: #b8925c; }
@media (max-width: 767px) {
  .story-photos-hint.treatments-shell { margin: .85rem auto 0; }
  .story-source-note a { min-height: 44px; }
}
@media (max-width: 767px) {
  /* first photo strip: hint right under the cards, aligned with the page text */
  .story-page .story-archive-grid { padding-bottom: 1.3rem !important; }
  .story-page .story-archive-grid figure { box-shadow: 0 8px 20px rgba(62,48,42,.07); }
  .story-page > .story-photos-hint.treatments-shell { width: min(100% - 28px, 720px) !important; margin: .1rem auto 1.6rem !important; padding: 0 !important; text-align: left; }
}

/* Team: su computer il titolo a sinistra e la foto di gruppo a destra, intera e senza tagli */
.story-team-group img { display: block; }
@media (min-width: 768px) and (max-width: 991px) {
  .story-team-group img { height: auto; max-height: none; object-fit: contain; }
}
@media (min-width: 992px) {
  .story-team-intro { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; column-gap: clamp(2.5rem, 5vw, 4.5rem); margin-bottom: 2.5rem; }
  .story-team-intro .story-team-heading { display: block; margin-bottom: 0; }
  .story-team-intro .story-team-heading h2 { font-size: clamp(3rem, 4.4vw, 4.4rem); }
  .story-team-intro .story-team-heading > span { display: block; max-width: 440px; margin-top: 1.4rem; }
  .story-team-intro .story-team-group { margin: 0; }
  .story-team-intro .story-team-group img { width: 100%; height: auto; max-height: none; object-fit: contain; }
}

/* Foto Liliana in apertura: cornice verticale, foto intera */
.story-hero-photo{width:100%;max-width:420px;justify-self:center}
.story-hero-photo .story-photo-panel{min-height:0;aspect-ratio:848/1200}
.story-hero-photo .story-photo-panel.has-photo .story-photo-img{object-position:center 30%}
@media (max-width:767px){.story-hero-photo{max-width:380px;margin-left:auto;margin-right:auto}}