/* Setso history timelines. Scoped under .shist so none of it reaches any
   other page. Colours beyond the site's own tokens - the warm browns the
   design uses for "then" - are declared here rather than in the shared
   stylesheet, because this is the only page that wants them. */
.shist{--earth:#8A5A2B;--sand:#F4EEE3;--dark:#2A1E16;--dim:#6B5A48}

/* ---- Hero ---------------------------------------------------------- */
.shist .shero{background:var(--dark);color:#F4EEE3;padding:72px 0 64px}
.shist .shero .crumb{font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    font-size:.78rem;color:var(--gold)}
.shist .shero .crumb a{color:var(--gold)}
.shist .lead{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:800;
    color:#C9B49A;font-size:clamp(1.3rem,3vw,1.9rem);margin-top:18px}
.shist .shero h1{font-size:clamp(2.6rem,7vw,5.2rem);line-height:.92;margin:14px 0 22px}
.shist .shero h1 .g{color:var(--gold)}
.shist .shero h1 .c{color:#E58A6F}
.shist .shero .sub{font-size:1.2rem;max-width:40rem;color:#E9DCC6}

.shist .sstats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px;max-width:720px}
.shist .sstats div{border-top:3px solid var(--gold);padding-top:10px}
.shist .sstats b{display:block;font-family:'Bricolage Grotesque',system-ui,sans-serif;
    font-size:2rem;color:#fff}
.shist .sstats span{font-size:.92rem;color:#C9B49A}

/* ---- Timeline ------------------------------------------------------ */
.shist .sintro{max-width:44rem;font-size:1.12rem;margin:56px 0 44px}
.shist .tline{position:relative;margin-left:8px;border-left:3px solid var(--line);padding-left:32px}
.shist .titem{position:relative;margin-bottom:34px}
.shist .titem::before{content:"";position:absolute;left:-43px;top:10px;width:19px;height:19px;
    border-radius:50%;background:var(--paper);border:4px solid var(--red)}
.shist .tyear{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:800;
    font-size:2.2rem;color:var(--red);line-height:1}

.shist .tcard{margin-top:10px;background:#fff;border:1px solid var(--line);border-radius:16px;
    overflow:hidden;display:grid;grid-template-columns:1fr 1fr}
.shist .tthen,.shist .tnow{padding:22px 24px}
.shist .tthen{background:var(--sand)}
.shist .klabel{font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:.78rem}
.shist .tthen .klabel{color:var(--earth)}
.shist .tnow .klabel{color:var(--teal)}
.shist .tcard h3{font-size:1.35rem;margin:6px 0 8px;line-height:1.2}
.shist .tnow h3{color:var(--teal)}
.shist .tcard p{font-size:.98rem;color:#3d4652}
.shist .tgo{display:inline-block;margin-top:12px;font-weight:700;color:var(--indigo);
    text-decoration:none;border-bottom:2px solid var(--gold)}

/* The university is a different kind of thing from a technical college, and
   the design says so in indigo rather than in words. */
.shist .titem.uni::before{border-color:var(--indigo)}
.shist .titem.uni .tyear{color:var(--indigo)}
.shist .titem.uni .tnow h3{color:var(--indigo)}

/* ---- The merger callout -------------------------------------------- */
.shist .tmerge{background:var(--indigo);color:#fff;border-radius:20px;padding:32px;
    margin:12px 0 56px;display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center}
.shist .tmerge .tyear{color:var(--gold);font-size:3.4rem}
.shist .tmerge h2{font-size:1.7rem;line-height:1.1;margin-bottom:8px}
.shist .tmerge p{color:#DDE2F2}

/* ---- Tell us ------------------------------------------------------- */
.shist .sgive{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:start;
    border-top:3px solid var(--gold);padding-top:36px}
.shist .klabel.red{color:var(--red)}
.shist .sgive h2{font-size:clamp(2rem,5vw,3rem);line-height:.95;margin-top:10px}
.shist .sgive h2 span{color:var(--red)}
.shist .sgive ol{list-style:none;margin:18px 0;padding:0;display:grid;gap:10px;
    font-size:1.12rem;font-weight:700;counter-reset:i}
.shist .sgive ol li::before{content:counter(i) " \00b7 ";counter-increment:i;color:var(--gold)}
.shist .smail{margin-top:18px;font-size:1rem}
.shist .smail a{font-weight:700;color:var(--indigo)}
.shist .snote{background:var(--sand);border-radius:16px;padding:22px;font-size:.95rem;color:var(--dim)}
.shist .snote b{color:var(--ink)}
.shist .ssrc{margin:48px 0 64px;font-size:.88rem;color:var(--dim)}

@media (max-width:720px){
    .shist .tcard{grid-template-columns:1fr}
    .shist .sgive{grid-template-columns:1fr}
    .shist .tmerge{grid-template-columns:1fr;gap:6px}
    .shist .sstats b{font-size:1.5rem}
    .shist .tline{padding-left:24px}
    .shist .titem::before{left:-35px}
}