:root{--bg:#f6eefb;--card:#ffffff;--ink:#2a1636;--mut:#7a5b8a;--ac:#8e2fbf;--ac2:#e6c6f5;--on:#ffffff;--hf:'Sora',system-ui,sans-serif;--bf:'DM Sans',system-ui,sans-serif;--ln:color-mix(in srgb,var(--ink) 14%,transparent)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.7 var(--bf)}
img{max-width:100%;height:auto;display:block;object-fit:cover;object-position:50% 22%}a{color:var(--ac)}
h1,h2,h3{font-family:var(--hf);line-height:1.15;margin:0 0 .5em;font-weight:800}
h1{font-size:clamp(30px,5vw,52px)}h2{font-size:clamp(21px,3vw,28px)}p{margin:0 0 1em}
.mut,time{color:var(--mut)}time{font-size:13px;display:block;margin-bottom:6px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.age{background:var(--ac);color:var(--on);font-size:12px;text-align:center;padding:6px 12px}
.top{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;max-width:1080px;margin:0 auto;padding:22px 20px}
.brand{font:800 24px/1.1 var(--hf);color:var(--ink);text-decoration:none}.brand small{display:block;font:400 13px/1.4 var(--bf);color:var(--mut);margin-top:3px}
nav a{color:var(--ink);text-decoration:none;margin-left:18px;font-weight:600;font-size:15px}nav a:hover{color:var(--ac)}
.btn{display:inline-block;background:var(--ac);color:var(--on);font:700 16px/1 var(--hf);padding:14px 22px;border-radius:8px;text-decoration:none}
.btn:hover{filter:brightness(1.08)}.btn:focus-visible,a:focus-visible{outline:3px solid var(--ac2);outline-offset:2px}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;padding:28px 0 40px}
.hero-i{margin:0}.hero-i img{border-radius:8px;aspect-ratio:4/5;width:100%}.lede{font-size:19px;color:var(--mut)}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:48px}
.card{background:var(--card);border-radius:8px;overflow:hidden;border:1px solid var(--ln)}.card a{color:inherit;text-decoration:none;display:block;height:100%}
.card img{aspect-ratio:4/5;width:100%}.kt{padding:16px 18px 20px}.kt h2{font-size:21px}.kt p{color:var(--mut);font-size:15px;margin:0}
.card:hover h2{color:var(--ac)}
.about-s,.cta{background:var(--card);border:1px solid var(--ln);border-radius:8px;padding:26px 28px;margin-bottom:28px}
.cta.in{margin:28px 0;border-left:5px solid var(--ac)}.cta .btn{margin-top:6px}
.art{max-width:720px;margin:0 auto;padding:12px 0 24px}.art figure{margin:0 0 24px}.art figure img{border-radius:8px;width:100%;aspect-ratio:4/5;max-height:620px}
blockquote{margin:26px 0;padding:6px 0 6px 22px;border-left:4px solid var(--ac);font:700 22px/1.4 var(--hf)}
.pn{display:flex;justify-content:space-between;gap:16px;margin-top:30px;font-size:15px;flex-wrap:wrap}.meet{color:var(--mut);font-size:15px}
.reading{margin:36px 0 10px}.cloud{list-style:none;margin:0;padding:0;columns:3 200px;column-gap:24px;font-size:14px;line-height:1.9}
.net{list-style:none;padding:0;margin:0}.net li{padding:12px 0;border-bottom:1px solid var(--ln)}.net a{font-weight:700}.net span{display:block;color:var(--mut);font-size:14px}
.foot{border-top:1px solid var(--ln);margin-top:48px;padding:26px 0;color:var(--mut);font-size:14px}.foot a{color:var(--mut)}.foot p{margin:0 0 8px}
@media(max-width:760px){
.hero{grid-template-columns:1fr}.posts{grid-template-columns:1fr}.top{padding:16px 20px}nav a{margin:0 14px 0 0}
}
/* 0: masthead */
body[data-l="0"] .top{flex-direction:column;text-align:center;border-bottom:1px solid var(--ln);max-width:none}body[data-l="0"] .brand{font-size:clamp(34px,6vw,58px)}
body[data-l="0"] .hero{grid-template-columns:1fr;text-align:center}body[data-l="0"] .hero-i img{aspect-ratio:16/8;max-height:420px}body[data-l="0"] .posts{grid-template-columns:repeat(2,1fr)}
body[data-l="0"] nav a{margin:0 10px}
@media(max-width:760px){
body[data-l="0"] .posts{grid-template-columns:1fr}
}
/* 1: sidebar */
@media(min-width:960px){
body[data-l="1"]{display:grid;grid-template-columns:280px 1fr;grid-template-areas:"age age" "top main" "top foot"}body[data-l="1"] .age{grid-area:age}
body[data-l="1"] .top{grid-area:top;flex-direction:column;align-items:flex-start;justify-content:flex-start;position:sticky;top:0;height:calc(100vh - 31px);padding:34px 26px;border-right:1px solid var(--ln);max-width:none;margin:0;width:280px}
body[data-l="1"] nav{display:flex;flex-direction:column;gap:10px}body[data-l="1"] nav a{margin:0;font-size:17px}body[data-l="1"] main{grid-area:main;width:100%}body[data-l="1"] .foot{grid-area:foot}
body[data-l="1"] .posts{grid-template-columns:1fr}body[data-l="1"] .card a{display:flex}body[data-l="1"] .card img{width:200px;aspect-ratio:1/1;flex:none}body[data-l="1"] .hero{grid-template-columns:1fr 1fr}
}
/* 2: cover */
body[data-l="2"] .hero{grid-template-columns:1fr;min-height:68vh;align-content:end;padding:60px 36px;border-radius:8px;margin-top:8px;background:linear-gradient(0deg,rgba(0,0,0,.78),rgba(0,0,0,.15)),var(--hero) center/cover;color:#fff}
body[data-l="2"] .hero-i{display:none}body[data-l="2"] .hero .lede{color:#f2f2f2}body[data-l="2"] .posts{margin-top:32px}body[data-l="2"] .card img{aspect-ratio:3/4}
/* 3: journal */
body[data-l="3"] .wrap,body[data-l="3"] .top{max-width:720px}body[data-l="3"] .hero{grid-template-columns:1fr}body[data-l="3"] .hero-i{order:-1}body[data-l="3"] .hero-i img{aspect-ratio:3/2;max-height:380px}
body[data-l="3"] .posts{grid-template-columns:1fr;gap:0}body[data-l="3"] .card{background:none;border:0;border-left:3px solid var(--ac);border-radius:0;padding:14px 0 14px 20px}body[data-l="3"] .card img{display:none}body[data-l="3"] .kt{padding:0}
/* 4: ranked */
body[data-l="4"] .posts{grid-template-columns:1fr;counter-reset:n;gap:16px}body[data-l="4"] .card a{display:grid;grid-template-columns:96px 140px 1fr;align-items:center}
body[data-l="4"] .card{counter-increment:n}body[data-l="4"] .card a::before{content:counter(n);font:800 56px/1 var(--hf);color:var(--ac);text-align:center}body[data-l="4"] .card img{aspect-ratio:1/1;height:140px;width:140px}
@media(max-width:760px){
body[data-l="4"] .card a{grid-template-columns:56px 1fr}body[data-l="4"] .card img{display:none}body[data-l="4"] .card a::before{font-size:38px}
}
/* 5: split */
body[data-l="5"] .hero{grid-template-columns:.9fr 1.1fr}body[data-l="5"] .hero-i{order:-1}body[data-l="5"] .top{border-bottom:3px solid var(--ac);max-width:none;padding-left:max(20px,calc((100vw - 1040px)/2))}
body[data-l="5"] .posts{grid-template-columns:repeat(2,1fr)}body[data-l="5"] .card a{display:flex}body[data-l="5"] .card img{width:42%;aspect-ratio:3/4;flex:none}
@media(max-width:760px){
body[data-l="5"] .hero{grid-template-columns:1fr}body[data-l="5"] .posts{grid-template-columns:1fr}
}
/* 6: mosaic */
body[data-l="6"] .posts{display:block;columns:3 250px;column-gap:18px}body[data-l="6"] .card{break-inside:avoid;margin-bottom:18px}body[data-l="6"] .card img{aspect-ratio:auto}
body[data-l="6"] .card:nth-child(3n+2) img{aspect-ratio:1/1}body[data-l="6"] .card:nth-child(3n) img{aspect-ratio:4/3}body[data-l="6"] .hero{grid-template-columns:1fr 1fr}
@media(max-width:760px){
body[data-l="6"] .hero{grid-template-columns:1fr}
}
/* 7: chat */
body[data-l="7"] .posts,body[data-l="7"] .hero{margin-left:auto;margin-right:auto}body[data-l="7"] .posts{grid-template-columns:1fr;gap:14px;max-width:640px}body[data-l="7"] .card{border-radius:8px 8px 8px 2px;max-width:560px}body[data-l="7"] .card:nth-child(even){margin-left:auto;border-radius:8px 8px 2px 8px;background:var(--ac);color:var(--on);border-color:transparent}
body[data-l="7"] .card:nth-child(even) p,body[data-l="7"] .card:nth-child(even) time{color:var(--on);opacity:.85}body[data-l="7"] .card img{display:none}body[data-l="7"] .hero{grid-template-columns:1fr;max-width:640px}body[data-l="7"] .hero-i img{aspect-ratio:1/1;max-width:160px;border-radius:50%}
body[data-l="7"] .hero-i{order:-1}