:root {
    --accent:#6d3fc0;
    --ink:#29204a;
    --paper:#fbf8ff;
    --line:color-mix(in srgb,var(--ink) 15%,white)
}
* {
    box-sizing:border-box
}
body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font:16px/1.75 system-ui,-apple-system,"Segoe UI",sans-serif
}
.wrap {
    width:min(1160px,calc(100% - 36px));
    margin:auto
}
.top {
    background:#fff;
    border-bottom:5px solid var(--accent)
}
.bar {
    display:flex;
    justify-content:space-between;
    gap:24px;
    align-items:center;
    padding:18px 0
}
.brand {
    display:flex;
    gap:12px;
    align-items:center;
    color:var(--ink);
    text-decoration:none
}
.mark {
    background:var(--accent);
    color:#fff;
    padding:10px 12px;
    font-weight:800;
    font-size:12px;
    letter-spacing:.08em
}
.brand b {
    font-size:18px
}
.brand small {
    display:block;
    color:#64748b;
    font-size:12px
}
nav {
    display:flex;
    gap:6px;
    flex-wrap:wrap
}
nav a,.foot a {
    color:var(--ink);
    text-decoration:none;
    padding:7px 10px
}
nav a:hover,nav a[aria-current=page] {
    color:var(--accent);
    background:var(--paper)
}
.hero {
    padding:72px 0 52px;
    background:linear-gradient(135deg,var(--paper),#fff)
}
.hero-grid {
    display:grid;
    grid-template-columns:1.25fr .75fr;
    gap:42px;
    align-items:end
}
.eyebrow {
    color:var(--accent);
    font-size:12px;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase
}
.hero h1,.head h1 {
    font-size:clamp(34px,5vw,62px);
    line-height:1.08;
    margin:12px 0 18px;
    max-width:820px
}
.hero p,.head p {
    font-size:19px;
    color:#475569;
    max-width:780px
}
.signal {
    background:#fff;
    border-left:6px solid var(--accent);
    padding:24px
}
.section {
    padding:48px 0
}
.section h2 {
    font-size:30px;
    line-height:1.2
}
.lead {
    color:#64748b;
    max-width:780px
}
.grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin-top:26px
}
.card {
    background:#fff;
    border:1px solid var(--line);
    padding:22px;
    min-height:180px;
    box-shadow:0 12px 24px #1725540d
}
.card h3 {
    line-height:1.3
}
.card a,.article a {
    color:var(--accent);
    font-weight:700
}
.head {
    padding:54px 0 30px;
    border-bottom:1px solid var(--line)
}
.head h1 {
    font-size:clamp(30px,4vw,48px)
}
.reading {
    display:grid;
    grid-template-columns:minmax(0,1fr) 260px;
    gap:32px;
    padding:38px 0
}
.article {
    background:#fff;
    border:1px solid var(--line);
    padding:clamp(22px,4vw,52px)
}
.article h2 {
    margin-top:34px;
    line-height:1.25
}
.side {
    height:max-content;
    position:sticky;
    top:20px;
    background:#fff;
    border-top:6px solid var(--accent);
    padding:20px
}
.side a {
    display:block;
    color:var(--ink);
    padding:8px 0;
    border-bottom:1px solid var(--line);
    text-decoration:none
}
.pager {
    display:flex;
    justify-content:space-between;
    gap:14px;
    border-top:1px solid var(--line);
    margin-top:34px;
    padding-top:20px
}
.foot {
    background:var(--ink);
    color:#e2e8f0;
    padding:42px 0 18px;
    margin-top:54px
}
.foot a {
    display:block;
    color:#e2e8f0;
    padding:3px 0
}
.foot p {
    color:#cbd5e1
}
.footgrid {
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr;
    gap:28px
}
.bottom {
    border-top:1px solid #ffffff33;
    margin-top:28px;
    padding-top:13px;
    font-size:13px;
    color:#cbd5e1
}
.byline {
    font-size:14px!important;
    color:#64748b!important
}
.provenance {
    margin-top:24px;
    padding-top:16px;
    border-top:1px solid var(--line);
    font-size:14px
}
.provenance p {
    font-size:14px!important
}
.layout-editorial .hero h1,.layout-editorial .head h1 {
    font-family:Georgia,serif
}
.layout-dashboard .card {
    border-radius:14px
}
.layout-magazine .section:nth-child(even) {
    background:#fff
}
.layout-office .article {
    border-top:8px solid var(--accent)
}
.layout-ribbon .hero {
    border-right:12px solid var(--accent)
}
@media(max-width:800px) {
    .bar,.hero-grid,.reading {
    display:block
}
.bar nav {
    margin-top:14px
}
.grid,.footgrid {
    grid-template-columns:1fr
}
.side {
    position:static;
    margin-top:20px
}
.hero {
    padding:46px 0 30px
}
.pager {
    display:grid
}

}
.layout-editorial {
    font-family:Georgia,"Noto Serif SC",serif
}
.layout-editorial .top {
    border-bottom:1px solid var(--ink)
}
.layout-editorial .hero {
    background:#fff;
    padding:100px 0
}
.layout-editorial .hero-grid {
    grid-template-columns:1fr
}
.layout-editorial .signal {
    max-width:640px
}
.layout-editorial .grid {
    grid-template-columns:repeat(2,1fr)
}
.layout-editorial .card {
    border:0;
    border-top:2px solid var(--accent);
    box-shadow:none
}