/* =========================================================
   STORIE / QUATTRO TESTIMONIANZE
   ========================================================= */

html{
    scroll-behavior:smooth;
}

.stories-page{
    padding:58px 0 82px;
}

.stories-wrap{
    max-width:1000px;
    margin:0 auto;
    padding-left:32px;
    padding-right:32px;
}

.stories-intro{
    max-width:800px;
    margin:0 auto 52px;
    padding-bottom:42px;
    border-bottom:1px solid var(--ink);
}

.stories-intro h1{
    margin:8px 0 18px;
    font-family:var(--font-serif);
    font-size:clamp(38px,5.2vw,54px);
    line-height:1.08;
    font-weight:500;
    letter-spacing:-.02em;
}

.stories-source{
    margin:0 0 24px;
    font-family:var(--font-sans);
    font-size:13.5px;
    line-height:1.55;
    color:var(--text-soft);
}

.stories-source em{
    font-family:var(--font-serif);
    font-size:16px;
    color:var(--ink);
}

.stories-lead{
    margin:0 0 26px;
    font-family:var(--font-serif);
    font-size:19px;
    line-height:1.65;
    color:var(--text-soft);
}

.stories-start{
    display:inline-block;
    font-family:var(--font-sans);
    font-size:13.5px;
    font-weight:600;
    color:var(--sage-deep)!important;
    text-decoration:none!important;
    border-bottom:1px solid var(--sage);
}

.stories-contents{
    max-width:900px;
    margin:0 auto 34px;
    padding:42px 0 44px;
}

.stories-contents-head{
    margin-bottom:24px;
}

.stories-contents-head p{
    margin:7px 0 0;
    font-family:var(--font-sans);
    font-size:13.5px;
    color:var(--text-soft);
}

.stories-contents-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    border-top:1px solid var(--ink);
}

.story-choice{
    display:grid;
    grid-template-columns:48px minmax(0,1fr) auto;
    gap:15px;
    align-items:center;
    min-height:104px;
    padding:20px 18px 18px 0;
    color:var(--ink)!important;
    text-decoration:none!important;
    border-bottom:1px solid var(--line);
}

.story-choice:nth-child(odd){
    padding-right:28px;
    border-right:1px solid var(--line);
}

.story-choice:nth-child(even){
    padding-left:28px;
}

.story-choice:hover .story-choice-copy strong{
    color:var(--wine);
}

.story-choice-number{
    align-self:start;
    padding-top:3px;
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.05em;
    color:var(--wine);
}

.story-choice-copy strong{
    display:block;
    font-family:var(--font-serif);
    font-size:23px;
    line-height:1.2;
    font-weight:500;
    transition:color .15s ease;
}

.story-choice-copy small{
    display:block;
    margin-top:5px;
    font-family:var(--font-sans);
    font-size:12.5px;
    color:var(--text-soft);
}

.story-choice-arrow{
    font-family:var(--font-sans);
    font-size:16px;
    color:var(--sage-deep);
}

.stories-duration{
    max-width:900px;
    margin:0 auto 72px;
    padding:20px 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.stories-duration p{
    margin:7px 0 0;
    font-family:var(--font-sans);
    font-size:12.5px;
    line-height:1.7;
    color:var(--text-soft);
}

.stories-duration strong{
    color:var(--ink);
}

/* Individual testimony */
.testimony{
    max-width:780px;
    margin:0 auto;
    padding:72px 0 28px;
    scroll-margin-top:28px;
}

.testimony + .testimony{
    margin-top:42px;
    border-top:1px solid var(--ink);
}

.testimony-header{
    display:grid;
    grid-template-columns:74px minmax(0,1fr);
    gap:22px;
    align-items:start;
    margin-bottom:38px;
}

.testimony-number{
    padding-top:1px;
    font-family:var(--font-serif);
    font-size:48px;
    line-height:1;
    font-style:italic;
    color:var(--wine);
}

.testimony-header h2{
    margin:6px 0 7px;
    font-family:var(--font-serif);
    font-size:clamp(31px,4vw,42px);
    line-height:1.1;
    font-weight:500;
    letter-spacing:-.015em;
}

.testimony-meta{
    margin:0;
    font-family:var(--font-sans);
    font-size:12.5px;
    color:var(--text-soft);
}

.testimony-body{
    font-family:var(--font-serif);
    font-size:17.5px;
    line-height:1.75;
    color:var(--ink);
}

/* Existing source uses <p>, <br> and <strong> heavily.
   These rules give that markup an interview/editorial rhythm without rewriting it. */
.testimony-body > p{
    margin:0;
}

.testimony-body strong{
    font-family:var(--font-serif);
    font-weight:500;
    color:var(--wine);
}

.testimony-body > p > strong{
    display:inline;
}

.testimony-body br + br{
    line-height:2.15;
}

.story-next{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:24px;
    margin-top:48px;
    padding:22px 0;
    border-top:1px solid var(--line);
}

.story-next span{
    font-family:var(--font-mono);
    font-size:10.5px;
    letter-spacing:.055em;
    text-transform:uppercase;
    color:var(--text-soft);
}

.story-next a{
    font-family:var(--font-serif);
    font-size:18px;
    font-weight:500;
    color:var(--sage-deep)!important;
    text-decoration:none!important;
    border-bottom:1px solid var(--sage);
}

.story-next-last a{
    font-family:var(--font-sans);
    font-size:13.5px;
}

@media(max-width:760px){
    .stories-page{
        padding:42px 0 60px;
    }

    .stories-wrap{
        padding-left:20px;
        padding-right:20px;
    }

    .stories-intro{
        margin-bottom:34px;
        padding-bottom:32px;
    }

    .stories-lead{
        font-size:17.5px;
        line-height:1.62;
    }

    .stories-contents{
        padding:30px 0 34px;
    }

    .stories-contents-grid{
        grid-template-columns:1fr;
    }

    .story-choice:nth-child(odd),
    .story-choice:nth-child(even){
        padding:18px 0;
        border-right:none;
    }

    .story-choice{
        grid-template-columns:38px minmax(0,1fr) auto;
        min-height:86px;
    }

    .story-choice-copy strong{
        font-size:21px;
    }

    .stories-duration{
        margin-bottom:44px;
    }

    .testimony{
        padding-top:52px;
        scroll-margin-top:16px;
    }

    .testimony + .testimony{
        margin-top:26px;
    }

    .testimony-header{
        grid-template-columns:52px minmax(0,1fr);
        gap:14px;
        margin-bottom:28px;
    }

    .testimony-number{
        font-size:38px;
    }

    .testimony-header h2{
        font-size:32px;
    }

    .testimony-body{
        font-size:17px;
        line-height:1.7;
    }

    .story-next{
        display:block;
        margin-top:38px;
    }

    .story-next span{
        display:block;
        margin-bottom:8px;
    }

    .story-next a{
        display:inline;
        font-size:17px;
    }
}