/* ========================= */
/*         HISTORIA          */
/* ========================= */

main > section.story{
    display:grid;
    grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
    align-items:start;
    gap:clamp(50px, 7vw, 120px);
}

.story-intro{
    position:sticky;
    top:120px;
}

.story-intro h2{
    font-family:var(--font-serif);
    font-size:clamp(32px, 4.2vw, 58px);
    font-weight:600;
    line-height:1.04;
    letter-spacing:-.03em;
    text-wrap:balance;
}

/* S · T · C */

.stc-decode{
    display:flex;
    gap:clamp(18px, 3vw, 40px);
    margin:44px 0;
    padding:24px 0;
    border-top:1.5px solid var(--fg);
    border-bottom:1px solid var(--line);
}

.stc-decode div{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.stc-letter{
    font-family:var(--font-serif);
    font-size:clamp(46px, 5vw, 70px);
    font-weight:600;
    line-height:.9;
    letter-spacing:-.04em;
}

.stc-word{
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--accent);
}

/* Fundador */

.founder blockquote{
    font-family:var(--font-serif);
    font-size:clamp(17px, 1.5vw, 20px);
    font-weight:400;
    line-height:1.55;
    letter-spacing:-.01em;
    color:var(--fg-2);
}

.founder figcaption{
    display:flex;
    flex-direction:column;
    gap:2px;
    margin-top:20px;
    padding-left:16px;
    border-left:3px solid var(--accent);
}

.founder strong{
    font-weight:700;
    color:var(--fg);
}

.founder span{
    font-size:13px;
    letter-spacing:.06em;
    color:var(--fg-3);
}

/* Línea de tiempo */

.timeline{
    position:relative;
    list-style:none;
    padding-left:74px;
}

.timeline::before{
    content:"";
    position:absolute;
    left:26px;
    top:10px;
    bottom:10px;
    width:1.5px;
    background:var(--fg);
}

.chapter{
    position:relative;
    padding-bottom:60px;
}

.chapter:last-child{ padding-bottom:0; }

.chapter-num{
    position:absolute;
    left:-74px;
    top:0;
    width:53px;
    height:53px;
    display:grid;
    place-items:center;
    border:1.5px solid var(--fg);
    background:var(--paper);
    font-family:var(--font-serif);
    font-size:16px;
    font-weight:600;
    color:var(--fg);
}

.chapter:last-child .chapter-num{
    background:var(--ink);
    border-color:var(--ink);
    color:#D8B77A;
}

.chapter-kicker{
    margin-bottom:10px;
    padding-top:4px;
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--accent);
}

.chapter h3{
    margin-bottom:14px;
    font-family:var(--font-serif);
    font-size:clamp(22px, 2.3vw, 30px);
    font-weight:600;
    line-height:1.15;
    letter-spacing:-.025em;
}

.chapter p:not(.chapter-kicker){
    max-width:520px;
    color:var(--fg-3);
}

@media (max-width:1080px){
    main > section.story{ grid-template-columns:1fr; }
    .story-intro{ position:static; }
}

@media (max-width:600px){
    .timeline{ padding-left:58px; }
    .timeline::before{ left:20px; }
    .chapter-num{
        left:-58px;
        width:41px;
        height:41px;
        font-size:14px;
    }
}

/* Tarjeta del fundador */

.founder{
    display:grid;
    grid-template-columns:150px minmax(0,1fr);
    gap:26px;
    align-items:start;
}

.founder-photo{
    position:relative;
    aspect-ratio:4 / 5;
    max-width:100%;
    padding:6px;
    background-color:var(--panel);
    border:1px solid var(--line);
}

.founder-photo img,
.founder-initials{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.founder-initials{
    display:grid;
    place-items:center;
    background:var(--ink);
    color:#D8B77A;
    font-family:var(--font-serif);
    font-size:40px;
    font-weight:600;
    letter-spacing:-.02em;
}

.founder-tag{
    position:absolute;
    left:6px;
    right:6px;
    bottom:6px;
    padding:5px 0;
    background:var(--ink);
    color:#F1F0EA;
    font-size:9.5px;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
    text-align:center;
}

.founder-link{
    align-self:flex-start;
    margin-top:10px;
    font-size:14px;
}

@media (max-width:600px){
    .founder{ grid-template-columns:110px minmax(0,1fr); gap:18px; }
}

/* Perfil del fundador */

.founder-spec{
    margin-top:30px;
    padding-top:22px;
    border-top:1px solid var(--line);
}

.founder-spec-title,
.founder-facts dt{
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--accent);
}

.founder-skills{
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin:12px 0 24px;
}

.founder-skills li{
    padding:5px 10px;
    border:1px solid var(--line-strong);
    border-radius:2px;
    background:var(--panel);
    color:var(--fg-2);
    font-size:13px;
    font-weight:600;
}

.founder-facts{
    display:grid;
    gap:14px;
}

.founder-facts div{
    display:grid;
    grid-template-columns:120px minmax(0,1fr);
    gap:14px;
    align-items:baseline;
}

.founder-facts dd{
    color:var(--fg-2);
    font-size:15px;
    line-height:1.5;
}

.founder-facts dd span{ color:var(--fg-3); }

@media (max-width:600px){
    .founder-facts div{ grid-template-columns:1fr; gap:4px; }
}