:root{
--ink:#332342;
--muted:#6b596e;
--paper:#faf7f2;
--lavender:#ece3f4;
--purple:#73578b;
--peach:#f2cfbc;
--line:#ddd4df;
--white:#fff;
--radius:24px;
--shell:1256px}
*{
box-sizing:border-box}
html{
scroll-behavior:smooth;
scroll-padding-top:110px}
body{
margin:0;
background:var(--paper);
color:var(--ink);
font-family:"Microsoft YaHei","PingFang SC","Noto Sans CJK SC",sans-serif;
font-size:16px;
line-height:1.8;
overflow-wrap:anywhere}
a{
color:inherit;
text-decoration:none}
button,input,select,textarea{
font:inherit}
button,a,input,select,textarea{
-webkit-tap-highlight-color:transparent}
button{
cursor:pointer}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
outline:3px solid #8b4d31;
outline-offset:5px}
img{
display:block;
max-width:100%;
height:auto}
h1,h2,h3,p,figure{
margin:0}
h1,h2,h3{
font-weight:650;
line-height:1.35;
letter-spacing:-.035em}
h1,h2{
font-family:"Noto Serif CJK SC","Songti SC",STSong,"Microsoft YaHei",serif}
h2{
font-size:clamp(29px,3.1vw,43px)}
h2 em,h1 em{
font-style:normal;
color:var(--purple)}
.shell{
width:min(var(--shell),calc(100% - 88px));
margin-inline:auto}
.section{
padding-block:78px}
.eyebrow{
font-family:Arial,"Microsoft YaHei",sans-serif;
font-size:11px;
font-weight:700;
letter-spacing:.13em;
color:#695175;
line-height:1.7}
.skip{
position:absolute;
left:16px;
top:-100px;
z-index:99;
background:var(--ink);
color:white;
padding:12px}
.skip:focus{
top:12px}
.site-header{
position:sticky;
top:0;
z-index:30;
background:#faf7f2f5;
backdrop-filter:blur(18px);
border-bottom:1px solid #e9e1e8}
.header-inner{
height:100px;
display:flex;
align-items:center;
justify-content:space-between;
gap:24px}
.brand{
display:inline-flex;
align-items:center;
gap:12px;
flex-shrink:0}
.brand-mark{
display:grid;
place-items:center;
width:48px;
height:48px;
background:var(--ink);
color:#f0e5f6;
border-radius:16px}
.brand-mark svg{
width:38px;
fill:none;
stroke:currentColor;
stroke-width:2.7;
stroke-linecap:round;
stroke-linejoin:round}
.brand-mark circle{
fill:#f2cfbc;
stroke:none}
.brand-word{
font-size:24px;
letter-spacing:.08em;
font-weight:700;
line-height:1.3}
.brand-word small{
display:block;
margin-top:5px;
font-size:8px;
letter-spacing:.12em;
font-family:Arial,sans-serif;
color:var(--muted);
font-weight:600}
.site-header nav{
display:flex;
align-items:center;
gap:28px;
font-size:13px;
font-weight:650}
.site-header nav a{
white-space:nowrap;
padding-block:12px}
.site-header nav a[aria-current]{
border-bottom:2px solid var(--purple)}
.site-header .nav-contact{
margin-left:12px;
padding:12px 18px;
background:var(--lavender);
border-radius:100px}
.nav-contact span{
margin-left:12px}
.nav-toggle{
display:none}
.hero{
display:grid;
grid-template-columns:1fr 1.03fr;
gap:50px;
align-items:center;
padding-block:80px 78px;
min-height:690px}
.hero-copy{
padding-bottom:6px}
.tiny-dot{
display:inline-block;
width:7px;
height:7px;
background:#8b4d31;
border-radius:50%;
margin-right:8px}
.hero h1{
font-size:clamp(48px,5.25vw,74px);
margin:24px 0 26px;
line-height:1.3;
letter-spacing:-.055em}
.hero-lead{
font-size:16px;
line-height:2.1;
color:var(--muted);
max-width:490px}
.hero-actions{
display:flex;
gap:14px;
flex-wrap:wrap;
margin-top:32px}
.button{
display:inline-flex;
justify-content:center;
align-items:center;
gap:26px;
min-height:51px;
padding:12px 24px;
border-radius:100px;
border:1px solid transparent;
font-size:13px;
font-weight:650;
line-height:1.7;
transition:background .2s}
.primary{
background:var(--ink);
color:white}
.primary:hover{
background:#5c3e6c}
.secondary{
background:transparent;
border-color:#bdb0c3;
color:var(--ink)}
.secondary:hover{
background:#efe8f2}
.hero-foot{
display:flex;
align-items:center;
gap:17px;
margin-top:42px;
color:var(--muted);
font-size:12px;
line-height:1.65}
.line-art{
font-size:43px;
line-height:1;
color:#8a5741}
.hero-art{
position:relative;
min-width:0;
height:500px;
isolation:isolate}
.hero-photo{
position:absolute;
right:0;
top:15px;
width:89%;
height:390px;
border-radius:120px 28px 120px 28px;
overflow:hidden;
background:#ddd4df}
.hero-photo img{
width:100%;
height:100%;
object-fit:cover;
object-position:50% 54%}
.hero-photo:after{
content:"";
position:absolute;
inset:30% 0 0;
background:linear-gradient(transparent,#201b36ba)}
.photo-word{
position:absolute;
right:24px;
bottom:30px;
z-index:2;
color:white;
font:italic 34px/1.15 Georgia,serif;
letter-spacing:-.04em}
.hero-small{
position:absolute;
bottom:20px;
left:-5px;
width:46%;
height:225px;
border:8px solid var(--paper);
border-radius:28px 70px 28px 70px;
overflow:hidden;
z-index:3;
transform:rotate(-5deg)}
.hero-small img{
width:100%;
height:100%;
object-fit:cover;
object-position:50% 50%}
.floating-note{
position:absolute;
right:-10px;
top:-9px;
z-index:4;
display:flex;
align-items:center;
gap:12px;
background:var(--lavender);
border:1px solid #fff7;
border-radius:22px;
padding:18px 20px;
box-shadow:0 16px 38px #3425430a;
transform:rotate(4deg)}
.floating-note p{
font-size:12px;
line-height:1.8}
.floating-note b{
font-size:15px}
.note-icon{
font-size:36px;
color:#73578b;
line-height:1}
.hero-caption{
position:absolute;
right:0;
bottom:4px;
width:49%;
font-size:10px;
color:#695175;
line-height:1.8;
display:flex;
gap:9px}
.hero-caption>span{
font-size:20px}
.orbit{
position:absolute;
z-index:-1;
width:330px;
height:330px;
border:1px solid #cbb9d8;
border-radius:50%;
left:10px;
top:0;
transform:rotate(-25deg) scaleX(1.3)}
.orbit-two{
left:70px;
top:130px;
width:380px;
transform:rotate(20deg) scaleX(1.2);
border-style:dashed}
.values-strip{
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
background:#f2edf4}
.values-strip .shell{
display:grid;
grid-template-columns:repeat(3,1fr)}
.values-strip p{
padding:23px 16px;
font-size:13px;
text-align:center;
border-right:1px solid var(--line)}
.values-strip p:last-child{
border:0}
.values-strip span{
margin-right:16px;
color:#7b5360;
font:12px Georgia,serif}
.section-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:30px;
margin-bottom:28px}
.section-head .eyebrow{
margin-bottom:12px}
.section-head h2 em{
display:block}
.text-link{
display:inline-flex;
align-items:center;
gap:18px;
white-space:nowrap;
font-size:12px;
font-weight:650;
border:0;
border-bottom:1px solid #9c85aa;
padding:4px 0;
background:none;
color:var(--ink);
line-height:1.8}
.text-link span{
font-size:21px}
.interest-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:18px}
.interest-card{
border:1px solid #ded3e0;
border-radius:22px;
padding:25px;
min-height:255px;
display:flex;
flex-direction:column;
background:#f1eaf5;
transition:transform .2s}
.interest-card:hover{
transform:translateY(-5px)}
.interest-1{
background:#f6e8de}
.interest-2{
background:#e6eddf}
.interest-3{
background:#ece6e1}
.interest-number{
font:italic 36px/1.1 Georgia,serif;
color:#735579}
.interest-card h3{
font-size:22px;
margin:22px 0 12px}
.interest-card p{
font-size:13px;
line-height:1.8;
color:#5e4f63}
.interest-bottom{
font-size:10px;
margin-top:auto;
padding-top:22px;
display:flex;
align-items:center;
justify-content:space-between}
.interest-bottom b{
font-size:24px;
font-weight:400;
line-height:1}
.news-section{
background:#f0eaf3}
.section-description{
font-size:14px;
color:var(--muted);
margin-bottom:30px;
max-width:730px;
line-height:1.9}
.news-grid,.guide-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:24px}
.story{
background:var(--paper);
border:1px solid #ded5e2;
border-radius:22px;
overflow:hidden;
min-width:0;
display:flex;
flex-direction:column}
.card-image{
display:block;
width:100%;
height:205px;
overflow:hidden;
background:#e4dce7;
flex-shrink:0}
.card-image img{
width:100%;
height:100%;
object-fit:cover;
object-position:50% 44%;
transition:transform .4s}
.card-image:hover img{
transform:scale(1.035)}
.story-copy{
padding:24px;
display:flex;
flex-direction:column;
flex:1}
.meta{
display:flex;
align-items:baseline;
gap:11px;
flex-wrap:wrap;
color:#715b78;
font-size:10px;
line-height:1.8;
letter-spacing:.015em}
.meta>span+span:before{
content:"·";
margin-right:10px}
.story h3{
font-size:18px;
line-height:1.65;
margin:12px 0 12px;
letter-spacing:-.015em}
.story-summary{
font-size:12px;
line-height:1.95;
color:#625468}
.card-more{
display:flex;
align-items:center;
justify-content:space-between;
margin-top:auto;
padding-top:24px;
font-size:10px;
font-weight:650}
.card-more span{
font-size:19px}
.news-grid>.story:last-child:nth-child(3n+1){
grid-column:1/-1;
display:grid;
grid-template-columns:1fr 2fr}
.news-grid>.story:last-child:nth-child(3n+1) .card-image{
height:100%;
min-height:250px}
.reading-feature{
display:grid;
grid-template-columns:1.1fr 1fr;
gap:65px;
align-items:center}
.reading-photo{
position:relative;
height:465px;
border-radius:32px 110px 32px 32px;
overflow:hidden;
background:#e8dfd9}
.reading-photo img{
width:100%;
height:100%;
object-fit:cover;
object-position:53% 40%}
.photo-label{
position:absolute;
bottom:20px;
left:20px;
padding:11px 16px;
background:var(--paper);
border-radius:100px;
font-size:11px}
.reading-copy h2{
margin:18px 0 22px;
line-height:1.5}
.reading-copy>p:not(.eyebrow){
color:var(--muted);
font-size:14px;
line-height:2}
.real-counts{
display:flex;
gap:60px;
margin:27px 0}
.real-counts div{
display:flex;
flex-direction:column}
.real-counts b{
font:italic 40px Georgia,serif;
color:#705187}
.real-counts span{
font-size:10px;
margin-top:10px}
.inspiration{
display:grid;
grid-template-columns:1fr 1fr;
gap:65px;
padding:45px;
background:#f3e6dd;
border:1px solid #e5d4c9;
border-radius:28px;
align-items:center}
.inspiration h2{
font-size:33px;
margin:13px 0}
.inspiration p:not(.eyebrow){
font-size:13px;
color:#614b47}
.prompt-panel{
background:var(--paper);
border-radius:20px;
padding:28px;
min-height:180px;
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:space-between;
gap:20px}
.prompt-panel .prompt-text{
font-family:"Songti SC",STSong,serif;
font-size:22px!important;
line-height:1.8;
color:var(--ink)!important}
.about-band{
padding:72px 0;
background:var(--lavender);
border-top:1px solid #ddd0e6}
.about-band-inner{
display:grid;
grid-template-columns:.7fr 1.2fr 1.1fr;
gap:40px;
align-items:center}
.about-band h2{
font-size:36px;
line-height:1.6}
.about-band-inner>div p{
font-size:13px;
color:var(--muted);
line-height:2;
margin-bottom:18px}
.site-footer{
background:var(--ink);
color:#f6eff7;
padding:48px 0 25px}
.site-footer .brand-mark{
background:#eadcf1;
color:var(--ink)}
.site-footer .brand-mark circle{
fill:#73578b}
.site-footer .brand-word small{
color:#dfcfe7}
.footer-top{
display:flex;
justify-content:space-between;
align-items:center;
gap:24px;
padding-bottom:40px;
border-bottom:1px solid #65506f}
.footer-top p{
font-size:13px;
line-height:1.9;
color:#e1d4e5}
.footer-link{
border:1px solid #a18cae;
border-radius:50%;
width:108px;
height:108px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
font-size:12px;
gap:4px}
.footer-link span{
font-size:24px;
line-height:1}
.footer-bottom{
display:flex;
justify-content:space-between;
gap:20px;
align-items:center;
margin-top:25px;
font-size:10px;
color:#e3d8e7}
.footer-bottom nav{
display:flex;
gap:22px;
flex-wrap:wrap}
.inner-intro{
padding-block:30px 50px;
max-width:var(--shell)}
.crumb{
display:flex;
flex-wrap:wrap;
gap:12px;
font-size:10px;
color:#715b78;
margin-bottom:48px}
.inner-intro h1{
font-size:clamp(35px,4.4vw,58px);
max-width:1000px;
margin:18px 0 24px;
line-height:1.45}
.intro-text{
font-size:16px;
color:var(--muted);
line-height:2;
max-width:760px}
.archive{
padding-top:15px}
.search-form{
background:#ece4f1;
border:1px solid #d9cde2;
padding:27px;
border-radius:22px;
margin-bottom:16px}
.search-form label,.contact-form label{
display:block;
font-size:12px;
font-weight:650;
margin-bottom:9px}
.search-fields{
display:flex;
gap:12px;
margin-bottom:18px}
.search-fields input{
flex:1;
min-width:0}
input,select,textarea{
display:block;
border:1px solid #bbaac5;
border-radius:12px;
background:var(--paper);
color:var(--ink);
padding:12px 16px;
min-height:48px;
max-width:100%;
font-size:14px}
input::placeholder,textarea::placeholder{
color:#77667e;
opacity:1}
.search-form select{
width:300px}
.search-status{
font-size:12px;
color:var(--muted);
margin:15px 0 26px;
min-height:22px}
.pagination{
display:flex;
gap:8px;
flex-wrap:wrap;
margin-top:35px}
.pagination a{
min-width:38px;
height:40px;
display:grid;
place-items:center;
border:1px solid #cbbad5;
border-radius:8px;
font-size:12px}
.pagination a[aria-current]{
background:var(--ink);
color:white;
border-color:var(--ink)}
.all-interests{
grid-template-columns:repeat(4,minmax(0,1fr))}
.article-shell{
padding-block:32px 90px}
.article-shell>.crumb{
margin-bottom:40px}
.article-layout{
display:grid;
grid-template-columns:minmax(0,790px) minmax(220px,1fr);
gap:70px;
align-items:start}
.article-header h1{
font-size:clamp(32px,3vw,43px);
line-height:1.6;
letter-spacing:-.02em;
margin:15px 0 22px}
.article-header .meta{
margin-bottom:22px}
.article-lead{
font-size:17px;
line-height:2;
color:var(--muted);
margin-bottom:30px}
.article-figure{
margin:24px 0}
.article-figure img{
width:100%;
aspect-ratio:1.65;
object-fit:cover;
border-radius:22px;
object-position:center 40%}
.article-figure figcaption{
font-size:10px;
line-height:1.9;
color:#73617a;
margin-top:12px}
.article-tools{
display:flex;
align-items:center;
gap:12px;
flex-wrap:wrap;
margin:25px 0 35px;
padding:15px 0;
border-block:1px solid var(--line)}
.article-tools button{
border:1px solid #c6b6ce;
border-radius:100px;
background:transparent;
padding:8px 15px;
color:var(--ink);
font-size:11px}
.tool-status{
font-size:11px;
color:#6a5075}
.article-body p,.legal p{
font-size:18px;
line-height:2.1;
margin:0 0 26px;
color:#493d50}
.large-type .article-body p{
font-size:21px}
.source-note,.quiz{
margin-top:40px;
background:#eee5f3;
border:1px solid #d7c7df;
border-radius:23px;
padding:30px}
.source-note h2,.quiz h2{
font-size:26px;
line-height:1.5;
margin-bottom:20px}
.source-note p{
font-size:13px;
line-height:2;
margin-top:14px}
.source-note a{
text-decoration:underline;
text-underline-offset:4px;
overflow-wrap:anywhere}
.quiz .eyebrow{
margin-bottom:10px}
.quiz fieldset{
border:0;
padding:0;
margin:0}
.quiz legend{
font-size:14px;
line-height:1.9;
margin-bottom:20px}
.quiz label{
display:flex;
align-items:center;
gap:12px;
padding:16px;
background:var(--paper);
border:1px solid #cfbfd8;
border-radius:12px;
font-size:13px;
line-height:1.9;
margin-bottom:12px;
cursor:pointer}
.quiz input{
width:17px;
height:17px;
min-height:17px;
flex-shrink:0;
margin:0;
accent-color:var(--ink)}
.quiz-actions{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-top:23px}
.quiz-result{
font-size:14px;
line-height:1.95;
margin-top:20px}
.quiz-result[data-state=correct]{
color:#27583a}
.quiz-result[data-state=incorrect]{
color:#7a3f31}
.fine-print{
font-size:10px;
line-height:1.9;
color:#6b596e;
margin-top:18px}
.article-aside{
position:sticky;
top:136px}
.article-aside h2{
font-size:25px;
margin:10px 0 24px}
.article-aside>a{
display:block;
padding:18px 0;
border-bottom:1px solid var(--line);
font-size:13px;
line-height:1.9}
.article-aside>a span{
margin-left:10px}
.aside-note{
background:#eee5f3;
border-radius:18px;
padding:24px;
margin-top:30px}
.aside-note b{
font-size:15px}
.aside-note p,.aside-note a{
font-size:12px;
line-height:2;
margin-top:15px;
display:block}
.brand-story{
display:grid;
grid-template-columns:1fr 1fr;
gap:65px;
align-items:center}
.brand-story>div:first-child{
height:540px;
border-radius:26px 100px 26px 26px;
overflow:hidden}
.brand-story img{
width:100%;
height:100%;
object-fit:cover}
.brand-story h2{
margin:20px 0 28px}
.brand-story p:not(.eyebrow){
font-size:15px;
line-height:2.1;
color:var(--muted);
margin-bottom:20px}
.device-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:22px}
.device-card{
padding:30px;
border:1px solid var(--line);
background:#eee5f3;
border-radius:24px}
.device-card>span{
font:12px Arial,sans-serif;
color:#6c5279;
letter-spacing:.09em}
.device-card h2{
font-size:25px;
margin:24px 0}
.device-card p{
font-size:14px;
line-height:2;
margin-top:18px;
color:#5f4d66}
.support-note{
padding:45px;
margin-top:35px;
border:1px solid #d5c7de;
border-radius:24px}
.support-note h2{
font-size:28px}
.support-note p{
margin:20px 0;
font-size:14px;
color:var(--muted)}
.contact-layout{
display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
padding-top:15px}
.support-list article{
padding:0 0 26px;
margin-bottom:25px;
border-bottom:1px solid var(--line)}
.support-list h2{
font-size:25px;
margin-bottom:15px}
.support-list p{
font-size:14px;
color:var(--muted);
line-height:2}
.contact-form{
padding:35px;
background:#eee5f3;
border:1px solid #d8cce0;
border-radius:24px;
height:fit-content}
.contact-form input,.contact-form select,.contact-form textarea{
width:100%;
margin-bottom:22px}
.contact-form textarea{
resize:vertical;
min-height:170px}
.form-status{
font-size:11px;
margin-top:20px;
color:#674f72;
line-height:1.9}
.source-list article{
border-top:1px solid var(--line);
padding:30px 0}
.source-list h2{
font-size:25px;
margin:12px 0}
.source-list p{
font-size:14px;
line-height:2;
margin-bottom:12px}
.photo-source{
display:block;
font-size:13px;
margin-top:12px;
text-decoration:underline;
text-underline-offset:4px}
.legal{
max-width:850px;
padding-top:0}
.not-found{
padding-bottom:90px}
@media(min-width:1500px){
.hero h1{
font-size:76px}
}
@media(max-width:1100px){
.shell{
width:calc(100% - 56px)}
.site-header nav{
gap:18px}
.site-header .nav-contact{
margin-left:0;
padding-inline:13px}
.brand-word{
font-size:21px}
.brand-mark{
width:43px;
height:43px}
.hero{
gap:35px}
.hero-art{
height:450px}
.hero-photo{
height:355px}
.hero-small{
height:200px}
.floating-note{
padding:13px}
.hero-caption{
font-size:9px}
.interest-card{
padding:22px}
.article-layout{
gap:40px;
grid-template-columns:minmax(0,1fr) 245px}
.reading-feature{
gap:40px}
.section{
padding-block:65px}
}
@media(max-width:980px){
.header-inner{
height:84px}
.nav-toggle{
display:flex;
flex-direction:column;
justify-content:center;
gap:5px;
align-items:center;
width:44px;
height:44px;
border:1px solid #c5b7cf;
border-radius:13px;
background:var(--lavender);
flex-shrink:0}
.nav-toggle span{
display:block;
width:20px;
height:2px;
background:var(--ink)}
.site-header nav{
display:none;
position:absolute;
left:0;
right:0;
top:84px;
flex-direction:column;
align-items:stretch;
gap:0;
padding:15px 28px 25px;
background:var(--paper);
border-bottom:1px solid var(--line);
box-shadow:0 20px 25px #3323420a}
.site-header nav.is-open{
display:flex}
.site-header nav a{
padding:13px 0;
border-bottom:1px solid #e5dce9}
.site-header .nav-contact{
margin-top:15px;
text-align:center;
padding:13px}
.hero{
padding-block:60px;
gap:24px}
.hero h1{
font-size:clamp(41px,5.1vw,57px)}
.hero-lead{
font-size:14px}
.hero-art{
height:400px}
.hero-photo{
height:310px;
border-top-left-radius:85px}
.hero-small{
height:180px;
bottom:10px;
left:-10px}
.photo-word{
font-size:27px;
bottom:27px}
.floating-note{
right:-5px;
padding:11px 14px}
.floating-note p{
font-size:10px}
.floating-note b{
font-size:12px}
.note-icon{
font-size:29px}
.hero-caption{
bottom:-10px;
width:47%;
font-size:9px}
.orbit{
width:230px;
height:280px}
.orbit-two{
width:200px;
top:100px;
left:35px;
transform:rotate(12deg) scaleX(1.05)}
.hero-actions{
gap:10px}
.hero-actions .button{
padding:11px 18px;
font-size:11px;
gap:13px}
.hero-foot{
margin-top:25px}
.interest-grid,.all-interests{
grid-template-columns:repeat(2,minmax(0,1fr))}
.news-grid,.guide-grid{
grid-template-columns:repeat(2,minmax(0,1fr))}
.news-grid>.story:last-child:nth-child(3n+1){
grid-column:auto;
display:flex}
.news-grid>.story:last-child:nth-child(3n+1) .card-image{
height:205px;
min-height:0}
.reading-feature{
gap:32px}
.reading-photo{
height:440px}
.about-band-inner{
grid-template-columns:1fr 1fr}
.about-band-inner>.eyebrow{
grid-column:1/-1}
.article-layout{
grid-template-columns:1fr;
gap:45px}
.article-aside{
position:static;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:20px}
.article-aside>.eyebrow,.article-aside>h2,.article-aside>.aside-note{
grid-column:1/-1}
.article-aside h2{
margin:0}
.article-aside>.eyebrow{
margin-bottom:-15px}
.device-grid{
grid-template-columns:1fr}
.device-card h2{
margin:18px 0}
.contact-layout{
gap:35px}
.brand-story{
gap:35px}
.brand-story>div:first-child{
height:470px}
.inspiration{
gap:35px;
padding:30px}
}
@media(max-width:680px){
html{
scroll-padding-top:95px}
.shell{
width:calc(100% - 40px)}
.header-inner{
height:78px}
.brand-word{
font-size:21px}
.brand-word small{
font-size:7px}
.brand-mark{
width:42px;
height:42px;
border-radius:14px}
.brand-mark svg{
width:33px}
.site-header nav{
top:78px;
padding-inline:20px}
.hero{
grid-template-columns:1fr;
gap:32px;
padding-top:40px;
padding-bottom:45px;
min-height:0}
.hero h1{
font-size:48px;
line-height:1.4;
margin:21px 0}
.hero-lead{
font-size:14px;
line-height:2}
.hero-actions{
margin-top:25px;
gap:10px}
.hero-actions .button{
font-size:12px;
gap:17px;
min-height:49px;
padding-inline:19px}
.hero-foot{
margin-top:26px;
font-size:10px}
.line-art{
font-size:32px}
.hero-art{
height:360px;
margin-top:12px;
margin-bottom:12px}
.hero-photo{
width:91%;
height:280px;
top:12px;
border-radius:85px 23px 85px 23px}
.hero-photo img{
object-position:center 55%}
.hero-small{
width:44%;
height:155px;
bottom:8px;
left:-3px;
border-width:6px;
border-radius:20px 50px 20px 50px}
.photo-word{
font-size:26px;
right:19px;
bottom:22px}
.floating-note{
right:-3px;
top:-12px;
gap:9px;
padding:12px}
.floating-note b{
font-size:12px}
.hero-caption{
width:51%;
font-size:9px;
bottom:-5px}
.orbit{
width:240px;
height:250px;
left:15px;
top:0}
.orbit-two{
left:40px;
top:100px;
width:240px}
.values-strip .shell{
grid-template-columns:1fr}
.values-strip p{
border-right:0;
border-bottom:1px solid var(--line);
padding:14px 0;
text-align:left;
font-size:12px}
.values-strip span{
margin-right:20px}
.section{
padding-block:48px}
.section-head{
align-items:flex-start;
flex-direction:column;
gap:17px;
margin-bottom:23px}
.section-head h2{
font-size:29px;
line-height:1.55}
.section-head .eyebrow{
font-size:9px;
margin-bottom:9px}
.text-link{
font-size:11px;
gap:20px}
.interest-grid{
gap:12px}
.interest-card{
padding:19px 16px;
min-height:247px;
border-radius:18px}
.interest-card h3{
font-size:20px;
margin-top:19px}
.interest-card p{
font-size:11px;
line-height:1.9}
.interest-number{
font-size:30px}
.interest-bottom{
font-size:9px;
gap:8px}
.interest-bottom b{
font-size:20px}
.section-description{
font-size:12px;
margin-bottom:24px}
.news-grid,.guide-grid{
grid-template-columns:1fr;
gap:20px}
.card-image,.news-grid>.story:last-child:nth-child(3n+1) .card-image{
height:auto;
aspect-ratio:1.75}
.story-copy{
padding:23px}
.story h3{
font-size:19px;
line-height:1.65}
.story-summary{
font-size:13px;
line-height:2}
.meta{
font-size:10px}
.card-more{
font-size:11px;
padding-top:22px}
.reading-feature{
grid-template-columns:1fr;
gap:30px}
.reading-photo{
height:340px;
border-radius:24px 75px 24px 24px}
.reading-photo img{
object-position:center 45%}
.reading-copy h2{
font-size:32px;
margin:17px 0}
.reading-copy>p:not(.eyebrow){
font-size:13px}
.real-counts{
gap:65px;
margin:23px 0}
.real-counts b{
font-size:38px}
.inspiration{
grid-template-columns:1fr;
gap:25px;
padding:26px 23px;
border-radius:23px}
.inspiration h2{
font-size:28px}
.inspiration .eyebrow{
font-size:9px}
.inspiration p:not(.eyebrow){
font-size:12px}
.prompt-panel{
padding:23px;
min-height:185px}
.prompt-panel .prompt-text{
font-size:22px!important}
.about-band{
padding:42px 0}
.about-band-inner{
grid-template-columns:1fr;
gap:22px}
.about-band h2{
font-size:31px}
.about-band-inner>div p{
font-size:13px}
.site-footer{
padding-top:35px}
.footer-top{
align-items:flex-start;
flex-wrap:wrap;
gap:25px;
position:relative;
padding-right:95px}
.footer-top p{
font-size:11px}
.footer-link{
position:absolute;
right:0;
top:5px;
width:77px;
height:77px;
font-size:10px}
.footer-bottom{
flex-direction:column;
align-items:flex-start;
font-size:9px;
gap:17px}
.footer-bottom nav{
gap:12px 18px;
font-size:10px}
.site-footer .brand-word{
font-size:20px}
.inner-intro{
padding-top:24px;
padding-bottom:35px}
.crumb{
font-size:9px;
gap:8px;
margin-bottom:32px}
.inner-intro h1{
font-size:34px;
line-height:1.55;
margin:15px 0 22px}
.inner-intro .eyebrow{
font-size:9px}
.intro-text{
font-size:14px;
line-height:2}
.search-form{
padding:22px 18px}
.search-fields{
gap:8px}
.search-fields .button{
padding:10px 18px;
font-size:12px}
.search-form select{
width:100%}
.search-status{
font-size:11px}
.archive{
padding-top:5px}
.all-interests{
grid-template-columns:repeat(2,minmax(0,1fr))}
.article-shell{
padding-top:24px;
padding-bottom:50px}
.article-shell>.crumb{
margin-bottom:28px}
.article-header h1{
font-size:29px;
line-height:1.6;
letter-spacing:0}
.article-lead{
font-size:15px;
line-height:2}
.article-figure img{
aspect-ratio:1.35;
border-radius:18px}
.article-figure figcaption{
font-size:9px}
.article-body p,.legal p{
font-size:17px;
line-height:2.1;
margin-bottom:25px}
.large-type .article-body p{
font-size:20px}
.source-note,.quiz{
padding:23px 18px;
border-radius:19px}
.source-note h2,.quiz h2{
font-size:24px}
.source-note p{
font-size:12px}
.quiz legend{
font-size:13px}
.quiz label{
font-size:12px;
padding:14px 12px;
gap:10px}
.quiz-actions{
gap:9px}
.quiz-actions .button{
padding:12px 17px;
font-size:11px;
gap:10px}
.quiz-result{
font-size:13px}
.fine-print{
font-size:9px}
.article-aside{
grid-template-columns:1fr;
gap:10px}
.article-aside>.eyebrow{
margin-bottom:0}
.article-aside>a{
font-size:13px}
.brand-story{
grid-template-columns:1fr;
gap:32px}
.brand-story>div:first-child{
height:340px}
.brand-story h2{
font-size:32px}
.brand-story p:not(.eyebrow){
font-size:14px}
.device-card{
padding:25px}
.device-card h2{
font-size:24px}
.device-card p{
font-size:13px}
.support-note{
padding:26px}
.support-note h2{
font-size:26px}
.support-note p{
font-size:13px}
.contact-layout{
grid-template-columns:1fr;
gap:25px}
.support-list h2{
font-size:24px}
.support-list p{
font-size:13px}
.contact-form{
padding:25px 20px}
.source-list h2{
font-size:22px;
line-height:1.6}
.source-list p{
font-size:13px}
.source-list .text-link{
white-space:normal}
.legal{
padding-top:0}
.pagination{
gap:7px}
.pagination a{
min-width:34px;
height:37px;
font-size:11px}
}
@media(max-width:370px){
.hero h1{
font-size:43px}
.hero-actions .button{
font-size:11px;
padding-inline:16px;
gap:12px}
.hero-art{
height:340px}
.hero-photo{
height:265px}
.hero-small{
height:145px}
.floating-note{
padding:10px}
.interest-card{
padding-inline:14px}
.interest-card h3{
font-size:18px}
.brand-word{
font-size:20px}
.footer-top{
padding-right:90px}
}
@media(prefers-reduced-motion:reduce){
html{
scroll-behavior:auto}
*{
transition:none!important;
transform:none!important;
animation:none!important}
}