/* Historical reconstruction of the final STII visual identity. */
:root{
  --purple:#635F85; --purple-dark:#4A3B66; --purple-mid:#9F94B3; --lavender:#C8C2D3;
  --paper:#F7F5FA; --ink:#303038; --muted:#6e6b75; --line:#d7d2de; --accent:#FA6900;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:#e5e1e9;color:var(--ink);font-family:"Open Sans",Arial,Helvetica,sans-serif;font-size:15px;line-height:1.55}
a{color:#064678} a:hover{color:#0000cc}
.site{width:min(960px,100%);margin:0 auto;background:var(--lavender);min-height:100vh;box-shadow:0 0 22px rgba(32,25,48,.14)}
.topmark{height:46px;background:#111;position:relative;border-top:3px solid #9F94B3;border-bottom:3px solid #9F94B3;overflow:hidden}
.topmark img{height:40px;width:auto;margin-left:18px;display:block}
.brand{position:relative;background:#fff;min-height:126px;padding:20px 315px 18px 34px;overflow:hidden}
.brand .water{position:absolute;right:0;top:0;width:330px;height:126px;object-fit:cover;object-position:right top;opacity:.96}
.brand h1{position:relative;margin:0;color:#222;font-family:"Droid Serif",Georgia,serif;font-size:27px;line-height:1.15;letter-spacing:.03em;font-weight:700}
.brand .tag{position:relative;margin-top:6px;color:#4F4B76;letter-spacing:.13em;font-size:12px;font-weight:700}
.nav{background:var(--purple);display:flex;align-items:stretch;flex-wrap:wrap;border-top:1px solid #827d9c;border-bottom:1px solid #4A3B66;position:relative;z-index:20}
.nav a,.dropbtn{color:#fff;text-decoration:none;font-size:12px;line-height:1.1;text-align:center;padding:13px 13px;display:block;border-left:1px solid #c8c2d3;min-height:40px;background:transparent}
.nav>a:first-child{border-left:0}.nav a:hover,.dropdown:hover .dropbtn,.nav a.active{background:var(--purple-dark)}
.dropdown{position:relative}.dropdown-content{display:none;position:absolute;left:0;top:100%;min-width:205px;background:#C8C2D3;box-shadow:0 10px 20px rgba(0,0,0,.15);z-index:50}
.dropdown-content a{color:#272336;text-align:left;border:0;border-bottom:1px solid #9F94B3;padding:11px 14px;font-size:12px;min-height:auto}.dropdown-content a:hover{background:#B6ACC8;color:#111}.dropdown:hover .dropdown-content{display:block}
.page{background:var(--paper);margin:18px 30px 0;min-height:550px;padding:28px 42px 46px;position:relative}
.pagehead{border-bottom:1px solid #222;padding-bottom:14px;margin-bottom:25px;position:relative}.pagehead h2{margin:0;color:#4F4B76;font-family:"Droid Serif",Georgia,serif;font-size:32px;line-height:1.15;font-style:italic;font-weight:700}.pagehead .kicker{font-size:13px;letter-spacing:.11em;color:#6b6578;margin-top:7px;text-transform:uppercase}
.content h3{color:#4F4B76;font-size:20px;line-height:1.3;margin:28px 0 10px}.content h4{color:#4F4B76;font-size:16px;margin:22px 0 8px}.content p{margin:0 0 13px}.content ul,.content ol{margin:6px 0 17px;padding-left:24px}.content li{margin:4px 0}.content .lead{font-size:17px}.content .small{font-size:12px;color:#666}.content .rule{border-top:1px solid #222;margin:24px 0}.content blockquote{border-left:4px solid var(--purple-mid);margin:18px 0;padding:4px 0 4px 18px;color:#4b4850}
.hero{padding:30px 38px 25px;background:#fff;position:relative;min-height:275px;overflow:hidden}.hero .ripple{position:absolute;right:0;top:0;width:430px;max-width:48%;height:220px;object-fit:cover}.hero h2{position:relative;width:58%;font:italic 32px/1.18 "Droid Serif",Georgia,serif;color:#4F4B76;margin:4px 0 16px}.hero p{position:relative;width:58%;font-size:14px;margin:0 0 12px}.audiences{display:grid;grid-template-columns:1fr 1fr;gap:22px;background:#fff;padding:12px 38px 30px}.audience-card{border-top:1px solid var(--line);padding-top:18px}.audience-card img{width:100%;max-width:440px;height:auto}.audience-card h3{color:#4F4B76;margin:12px 0 7px;font-size:18px}.audience-card p{font-size:13px}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:18px 0}.card{background:#fff;border:1px solid #ddd7e4;padding:17px}.card h3{margin-top:0}.card img{max-width:100%;height:auto}.media-card{display:grid;grid-template-columns:155px 1fr;gap:18px;align-items:start;background:#fff;border:1px solid #ddd7e4;padding:15px;margin:16px 0}.media-card img{width:155px;max-height:120px;object-fit:cover}.placeholder{display:inline-block;margin-top:8px;padding:7px 10px;background:#ece9f0;border:1px solid #d0cad8;color:#5f5b68;font-size:12px}
.bookgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:18px 0}.book{background:#fff;border:1px solid #ddd7e4;padding:14px;text-align:center}.book img{max-width:100%;height:180px;object-fit:contain}.book p{font-size:12px;text-align:left}
.graph{background:#fff;border:1px solid #ddd7e4;padding:12px;margin:18px 0;text-align:center}.graph img{max-width:100%;height:auto}
.note{background:#fff7e9;border-left:4px solid var(--accent);padding:12px 15px;margin:18px 0}.archive-note{background:#efedf3;border:1px solid #d4cfdb;padding:13px 15px;margin:18px 0;color:#55515d;font-size:13px}
details{background:#fff;border:1px solid #ddd7e4;margin:10px 0}summary{cursor:pointer;padding:13px 15px;color:#4F4B76;font-weight:700}details .detailbody{padding:3px 17px 17px}.testimonials p{font-size:13px}
.flags{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:18px 0}.flag{background:#fff;border:1px solid #ddd7e4;text-align:center;padding:10px 6px;color:#383344;text-decoration:none;font-size:12px}.flag img{display:block;margin:0 auto 6px;max-width:58px;height:36px;object-fit:cover}.flag:hover{background:#f0edf4}
.profile{display:grid;grid-template-columns:130px 1fr;gap:22px}.profile img{width:110px;height:auto}.directory-section{border-top:1px solid #ccc6d3;padding-top:20px;margin-top:20px}.directory-section h3{margin-top:0}.person{margin:12px 0;padding:10px 12px;background:#fff;border-left:3px solid var(--purple-mid)}
.footer{margin-top:22px;background:#3f3e43;color:#ddd;padding:22px 34px 30px;font-size:12px}.footer a{color:#e7e1ff}.footer .footgrid{display:grid;grid-template-columns:1fr 1fr;gap:25px}.footer strong{color:#fff}.footer .historical{margin-top:18px;border-top:1px solid #666;padding-top:12px;color:#bbb}
.source-badge{display:inline-block;font-size:11px;color:#6b6578;border:1px solid #d7d2de;padding:3px 6px;margin-bottom:12px}
@media(max-width:760px){.brand{padding-right:28px}.brand .water{opacity:.18;width:100%}.nav{display:block}.nav>a,.dropdown,.dropbtn{width:100%;border-left:0;border-bottom:1px solid #7e7997}.dropdown-content{position:static;display:none;box-shadow:none}.dropdown:hover .dropdown-content{display:block}.page{margin:12px 10px 0;padding:23px 20px}.hero .ripple{opacity:.17;max-width:100%;width:100%}.hero h2,.hero p{width:100%}.audiences,.cards,.footer .footgrid,.profile{grid-template-columns:1fr}.bookgrid{grid-template-columns:repeat(2,1fr)}.flags{grid-template-columns:repeat(3,1fr)}.media-card{grid-template-columns:105px 1fr}.media-card img{width:105px}.pagehead h2{font-size:27px}}
@media(max-width:450px){.bookgrid,.flags{grid-template-columns:1fr 1fr}.audiences{padding-left:20px;padding-right:20px}.hero{padding-left:20px;padding-right:20px}}

.archive-recovered figure{margin:18px 0}.archive-recovered img{max-width:100%;height:auto;border:1px solid #ddd}
.menu-toggle{display:none}
@media(max-width:760px){.menu-toggle{display:block;width:100%;background:var(--purple);color:#fff;border:0;border-top:1px solid #827d9c;border-bottom:1px solid #4A3B66;font:600 14px/1 Arial,Helvetica,sans-serif;letter-spacing:.06em;text-align:left;padding:13px 18px;cursor:pointer}.menu-toggle span{font-size:18px;vertical-align:-2px;margin-right:6px}.nav{display:none}.nav.open{display:block}.dropdown:hover .dropdown-content{display:none}.dropdown.open .dropdown-content{display:block}.dropbtn{cursor:pointer}}
