/*
Theme Name: Wang Shunde Personal Blog
Theme URI: https://example.com/
Author: Wang Shunde
Description: A bold, editorial personal blog theme with configurable colors, loading screen, reading progress and motion effects.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: wangshunde-blog
*/

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700;900&family=Noto+Serif+SC:wght@400;500;600;700&display=swap');
:root{
 --bg:#f1efe8;--paper:#fffef9;--ink:#151515;--muted:#65645e;--line:#c9c6bb;
 --blue:#315cff;--lime:#d9ff45;--orange:#ff684d;
 --sans:"Noto Sans SC","DM Sans",sans-serif;--serif:"Noto Serif SC",serif;--mono:"DM Mono",monospace
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}
button,input,textarea{font:inherit}
::selection{background:var(--lime);color:#111}
#loader{position:fixed;inset:0;background:var(--blue);color:white;z-index:999;display:grid;place-items:center;transition:opacity .6s,visibility .6s}
#loader.hide{opacity:0;visibility:hidden;pointer-events:none}
.loadbox{width:min(340px,80vw)}
.loadlogo{font:900 clamp(48px,10vw,88px)/.9 var(--sans);letter-spacing:-.1em}
.loadline{height:5px;background:#ffffff55;margin:24px 0 12px;overflow:hidden}
.loadline i{display:block;width:0;height:100%;background:var(--lime);animation:load 1.05s cubic-bezier(.7,0,.2,1) forwards}
.loadtext{font:10px var(--mono);letter-spacing:.12em}
@keyframes load{to{width:100%}}
#progress{position:fixed;z-index:1000;top:0;left:0;height:4px;width:0;background:var(--orange)}
.wrap{max-width:1320px;margin:auto;padding:0 42px}
.top{height:86px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:2px solid var(--ink)}
.brand{display:flex;align-items:center;gap:12px;min-width:max-content}
.seal{width:42px;height:42px;background:var(--blue);color:#fff;border:0;border-radius:0;display:grid;place-items:center;font:900 21px var(--sans);transform:rotate(-4deg);box-shadow:4px 4px 0 var(--lime)}
.seal:after{display:none}
.brand b{font:800 15px var(--sans);letter-spacing:-.04em}
.brand small{display:block;font:9px var(--mono);color:var(--muted);letter-spacing:.04em;margin-top:3px}
nav{display:flex;gap:clamp(12px,2.1vw,30px);font-size:11px;font-weight:700}
nav a{position:relative;padding:12px 0}
nav a:after{content:"";position:absolute;left:0;bottom:5px;width:0;height:3px;background:var(--blue);transition:width .25s}
nav a:hover:after,nav a.active:after{width:100%}
nav a.active{color:var(--blue)}
.menu{display:none;background:var(--lime);border:2px solid var(--ink);padding:8px 12px;font-weight:700}
.hero{padding:74px 0 88px;display:grid;grid-template-columns:1.02fr .98fr;gap:44px;align-items:center;position:relative}
.hero:after{content:"PERSONAL SITE / 2026";position:absolute;right:0;bottom:27px;font:10px var(--mono);letter-spacing:.12em;color:var(--muted)}
.eyebrow{font:10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--blue);font-weight:500}
.eyebrow:before{content:"";display:inline-block;width:23px;height:4px;background:var(--orange);vertical-align:middle;margin-right:9px}
h1{font:900 clamp(46px,6.3vw,86px)/1.22 var(--sans);letter-spacing:-.085em;margin:20px 0 22px}
h1 em{font-style:normal;color:var(--blue);position:relative}
.lead{font-size:14px;line-height:2;color:#55534d;max-width:510px}
.hero-actions{display:flex;gap:12px;margin-top:27px;font-size:11px;font-weight:700}
.textlink{display:inline-flex;align-items:center;background:var(--lime);border:2px solid var(--ink);padding:11px 15px;color:var(--ink);box-shadow:4px 4px 0 var(--ink);transition:.2s}
.textlink:hover{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.hero-pics{height:420px;display:grid;grid-template-columns:1fr .78fr;grid-template-rows:1fr .75fr;gap:10px;position:relative}
.hero-pics:before{content:"";position:absolute;z-index:2;left:-22px;top:25px;width:55px;height:55px;background:var(--orange);border:2px solid var(--ink);border-radius:50%;mix-blend-mode:multiply}
.hero-pics figure{margin:0;overflow:hidden;border:2px solid var(--ink);position:relative;background:#ddd}
.hero-pics figure:first-child{grid-row:span 2}
.hero-pics figure:nth-child(2){transform:translateY(18px) rotate(2deg)}
.hero-pics figure:nth-child(3){transform:translateY(18px) rotate(-2deg)}
.hero-pics img{filter:grayscale(.15) contrast(1.04);transition:transform .8s,filter .4s}
.hero-pics figure:hover img{transform:scale(1.07);filter:grayscale(0)}
.pagehead{padding:54px 0 31px;border-bottom:2px solid var(--ink);margin-bottom:30px;position:relative}
.pagehead:after{content:"↘";position:absolute;right:3px;bottom:24px;font:70px/.8 var(--serif);color:var(--blue)}
.pagehead h1{font-size:clamp(42px,6vw,68px);margin:12px 0 8px}
.pagehead p{font-size:13px;line-height:2;color:#5d5b55;max-width:670px;margin:0}
.section{padding:43px 0 65px}
.sectionhead{display:flex;align-items:end;justify-content:space-between;border-bottom:2px solid var(--ink);padding-bottom:13px;margin-bottom:25px}
.sectionhead h2{font:800 26px var(--sans);letter-spacing:-.06em;margin:0}
.sectionhead small{font:10px var(--mono);color:var(--blue)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{display:block;background:transparent;border:0;border-top:2px solid var(--ink);overflow:visible;transition:transform .3s}
.card:hover{transform:translateY(-5px);box-shadow:none}
.thumb{height:210px;overflow:hidden;border:2px solid var(--ink);position:relative}
.thumb:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#315cff18,transparent 65%);pointer-events:none}
.thumb img{filter:saturate(.75);transition:transform .8s,filter .5s}
.card:hover .thumb img{transform:scale(1.06);filter:saturate(1)}
.cardbody{padding:15px 2px 19px}
.meta{font:10px var(--mono);color:var(--blue);letter-spacing:.02em}
.card h3{font:700 18px/1.55 var(--sans);letter-spacing:-.04em;margin:9px 0}
.card p{font-size:12px;line-height:1.9;color:#64625c;margin:0}
.more{display:inline-block;margin-top:14px;font:700 10px var(--mono);color:var(--blue);border-bottom:2px solid var(--blue);padding-bottom:4px}
.list{border-top:2px solid var(--ink)}
.listitem{display:grid;grid-template-columns:75px 1fr 135px;gap:18px;align-items:center;padding:20px 10px;border-bottom:1px solid var(--line);transition:.25s}
.listitem:hover{padding-left:19px;background:var(--lime)}
.date{font:10px var(--mono);color:var(--muted)}
.date b{display:block;font:700 25px var(--sans);color:var(--blue);letter-spacing:-.08em}
.listitem h3{font:700 17px var(--sans);letter-spacing:-.03em;margin:6px 0}
.listitem p{font-size:11px;color:#68665f;margin:0;line-height:1.8}
.listpic{height:78px;overflow:hidden;border:1px solid var(--ink)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.filters button{border:1.5px solid var(--ink);background:transparent;padding:8px 14px;font-size:10px;font-weight:700;transition:.2s}
.filters button.active,.filters button:hover{background:var(--blue);color:white;border-color:var(--blue)}
.search{width:min(100%,340px);padding:12px 14px;border:1.5px solid var(--ink);background:var(--paper);outline:none;font-size:11px;margin-bottom:18px}
.search:focus{box-shadow:4px 4px 0 var(--lime)}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.photo{height:245px;overflow:hidden;margin:0;border:2px solid var(--ink);position:relative}
.photo.wide{grid-column:span 2}
.photo img{filter:saturate(.8);transition:transform .8s}
.photo:hover img{transform:scale(1.07)}
.photo figcaption{position:absolute;left:10px;bottom:10px;background:var(--lime);border:1px solid var(--ink);padding:7px 10px;font:10px var(--mono)}
.article{max-width:780px;margin:0 auto;padding:48px 0 75px}
.article h1{font-size:clamp(38px,5vw,60px);line-height:1.35}
.article .article-meta{font:10px var(--mono);color:var(--blue);margin:15px 0 25px}
.article .cover{height:410px;margin:25px 0;overflow:hidden;border:2px solid var(--ink)}
.article .bodycopy{font:15px/2.25 var(--serif);color:#42413c}
.article .bodycopy h2{font:800 25px var(--sans);letter-spacing:-.04em;margin-top:40px}
.article .bodycopy blockquote{border-left:5px solid var(--blue);margin:28px 0;padding:10px 20px;background:var(--lime);color:var(--ink)}
.aboutgrid{display:grid;grid-template-columns:280px 1fr;gap:48px;align-items:start}
.portrait{height:350px;overflow:hidden;border:2px solid var(--ink);position:relative}
.portrait:after{content:"HI!";position:absolute;right:-3px;bottom:12px;background:var(--lime);border:2px solid var(--ink);padding:7px 12px;font:900 20px var(--sans);transform:rotate(-7deg)}
.aboutcopy{font-size:13px;line-height:2.15;color:#55534d}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:25px}
.fact{border-top:2px solid var(--blue);padding:10px 0}
.fact small{font:10px var(--mono);color:var(--muted)}
.fact b{display:block;font:700 14px var(--sans);margin-top:6px}
.worklist{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.work{padding:23px;background:var(--paper);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);transition:.25s}
.work:nth-child(2n){background:var(--lime)}
.work:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--blue)}
.work small{font:10px var(--mono);color:var(--blue)}
.work h3{font:700 20px var(--sans);letter-spacing:-.04em;margin:19px 0 8px}
.work p{font-size:12px;line-height:2;color:#5b5952}
footer{border-top:2px solid var(--ink);padding:23px 0 32px;display:flex;justify-content:space-between;gap:15px;color:#66645d;font:10px var(--mono)}
.reveal{opacity:0;transform:translateY(22px) rotate(.3deg);transition:opacity .75s,transform .75s}
.reveal.visible{opacity:1;transform:none}
#toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%,12px);background:var(--ink);color:white;padding:11px 16px;font:10px var(--mono);opacity:0;transition:.25s;pointer-events:none}
#toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:800px){
 .wrap{padding:0 22px}.top{height:72px}nav{display:none;position:absolute;z-index:30;top:72px;left:0;right:0;padding:17px 22px;background:var(--lime);border-bottom:2px solid var(--ink);flex-direction:column;gap:6px}nav.open{display:flex}.menu{display:block}
 .hero{grid-template-columns:1fr;gap:25px;padding:48px 0 72px}.hero-pics{height:300px}.hero:after{bottom:22px}
 .grid3{grid-template-columns:1fr 1fr}.gallery{grid-template-columns:1fr 1fr}
 .aboutgrid{grid-template-columns:1fr}.portrait{height:280px;max-width:330px}
 .pagehead h1{font-size:46px}
}
@media(max-width:540px){
 .wrap{padding:0 17px}.grid3,.gallery,.worklist{grid-template-columns:1fr}
 .photo.wide{grid-column:span 1}.photo{height:235px}
 .listitem{grid-template-columns:56px 1fr;padding:16px 0}.listpic{display:none}
 .hero-pics{height:245px}.hero h1{font-size:44px}
 .pagehead h1{font-size:39px}.article h1{font-size:35px}
 .article .cover{height:250px}footer{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
 *,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
 .reveal{opacity:1;transform:none}
}

/* Customizable loader and visual settings center */
:root{--motion-duration:750ms}
.custom-loader-image{width:min(220px,65vw);height:130px;object-fit:cover;border:2px solid currentColor;margin:0 auto 16px}
.custom-loader-percent{font:900 clamp(42px,8vw,72px)/1 var(--sans);letter-spacing:-.08em;margin:18px 0;color:var(--lime)}
body.hover-effects-off .card:hover,body.hover-effects-off .work:hover,
body.hover-effects-off .hero-pics figure:hover img,body.hover-effects-off .photo:hover img{transform:none;box-shadow:none}
.settings-intro{padding:35px 0 25px;border-bottom:2px solid var(--ink)}
.settings-intro h1{font-size:clamp(36px,5vw,58px);margin:12px 0}
.settings-intro p{max-width:700px;color:var(--muted);line-height:2;font-size:13px}
.settings-layout{display:grid;grid-template-columns:1fr 330px;gap:30px;padding:30px 0 70px;align-items:start}
.settings-panel{display:grid;gap:18px}
.setting-card{background:var(--paper);border:2px solid var(--ink);padding:20px}
.setting-card h2{font:800 17px var(--sans);margin:0 0 6px;letter-spacing:-.03em}
.setting-card>p{font-size:11px;color:var(--muted);line-height:1.8;margin:0 0 17px}
.setting-row{display:grid;grid-template-columns:1fr minmax(150px,230px);gap:15px;align-items:center;padding:11px 0;border-top:1px solid var(--line)}
.setting-row label{font-size:11px;font-weight:600}
.setting-row small{display:block;font-size:9px;color:var(--muted);font-weight:400;margin-top:4px;line-height:1.6}
.setting-row input[type="text"],.setting-row input[type="url"],.setting-row select,.setting-row input[type="number"]{width:100%;min-width:0;border:1px solid var(--line);background:#fff;padding:9px 10px;color:var(--ink);font-size:11px}
.setting-row input[type="color"]{width:100%;height:37px;border:1px solid var(--line);background:#fff;padding:3px}
.setting-row input[type="range"]{width:100%;accent-color:var(--blue)}
.setting-row input[type="checkbox"]{width:19px;height:19px;accent-color:var(--blue);justify-self:end}
.settings-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:5px}
.settings-actions button{padding:12px 17px;border:2px solid var(--ink);font-size:11px;font-weight:700;cursor:pointer}
.settings-save{background:var(--lime);box-shadow:4px 4px 0 var(--ink)}
.settings-reset{background:transparent}
.settings-actions button:hover{transform:translateY(-2px)}
#settingsMessage{font-size:11px;color:#28734a;min-height:18px;margin-top:10px}
.settings-preview{position:sticky;top:20px;background:#17191f;color:#fff;padding:20px;border:2px solid var(--ink);box-shadow:6px 6px 0 var(--blue)}
.settings-preview h3{font:800 15px var(--sans);margin:0 0 7px}
.settings-preview>p{font-size:10px;color:#c3c6d0;line-height:1.8;margin:0 0 15px}
#loaderPreview{min-height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--blue);padding:20px;position:relative;overflow:hidden}
.preview-loader-mark{font:900 43px var(--sans);color:white;letter-spacing:-.08em}
.preview-loader-bar{width:75%;height:4px;background:#ffffff55;position:relative;overflow:hidden}
.preview-loader-bar:after{content:"";position:absolute;inset:0;width:68%;background:var(--lime)}
.preview-loader-label{font:9px var(--mono);color:white}
.preview-loader-image{display:none;width:130px;height:75px;object-fit:cover;border:1px solid white}
.preview-progress{position:absolute;left:0;top:0;width:68%;height:4px;background:var(--orange)}
.preview-run{animation:previewPulse .8s ease}
@keyframes previewPulse{0%{transform:scale(.98);opacity:.65}100%{transform:scale(1);opacity:1}}
.preview-hint{font-size:9px;color:#c3c6d0;margin-top:12px;line-height:1.7}
.settings-colorline{display:flex;gap:7px;align-items:center}
.settings-colorline input{flex:1}
@media(max-width:900px){.settings-layout{grid-template-columns:1fr}.settings-preview{position:static;grid-row:1}}
@media(max-width:540px){.setting-row{grid-template-columns:1fr;gap:8px}.setting-row input[type="checkbox"]{justify-self:start}.setting-card{padding:15px}}

body.motion-light .reveal{transition-duration:350ms!important;transform:translateY(8px)}
body.motion-standard .reveal{transition-duration:650ms!important;transform:translateY(16px)}
body.motion-rich .reveal{transition-duration:950ms!important;transform:translateY(24px) rotate(.3deg)}
body.motion-off .reveal{opacity:1!important;transform:none!important;transition:none!important}

/* WordPress integration and editor content */
.custom-logo-link{display:flex;align-items:center}
.custom-logo{max-width:32px;height:auto}
.seal .custom-logo-link{display:flex;align-items:center;justify-content:center}
.seal .custom-logo{max-width:30px;max-height:30px;object-fit:contain}
.ws-fallback-menu{display:flex;gap:clamp(12px,2.1vw,30px);list-style:none;margin:0;padding:0}
.ws-fallback-menu li{margin:0}
.ws-fallback-menu a{font-size:11px;font-weight:700}
body.hover-effects-off .card:hover,body.hover-effects-off .work:hover{transform:none;box-shadow:none}
body.motion-light .reveal{transition-duration:350ms!important;transform:translateY(8px)}
body.motion-standard .reveal{transition-duration:650ms!important;transform:translateY(16px)}
body.motion-rich .reveal{transition-duration:950ms!important;transform:translateY(24px) rotate(.3deg)}
body.motion-off .reveal{opacity:1!important;transform:none!important;transition:none!important}
.post-navigation,.comments-area{max-width:780px;margin:35px auto;padding:25px 0;border-top:1px solid var(--line)}
.comments-area h2{font-size:20px}
.comment-list{padding-left:22px}
.comment-list li{margin:12px 0;line-height:1.8}
.comment-form input[type=text],.comment-form input[type=email],.comment-form textarea{width:100%;padding:12px;border:1px solid var(--line);background:#fff}
.comment-form input[type=submit]{padding:11px 16px;background:var(--lime);border:2px solid var(--ink);font-weight:700;cursor:pointer}
.pagination,.nav-links{margin:25px 0;display:flex;gap:10px;flex-wrap:wrap}
.page-numbers{padding:8px 12px;border:1px solid var(--ink)}
.page-numbers.current{background:var(--blue);color:white}
.empty-state{padding:24px;border:1px dashed var(--line);color:var(--muted);font-size:12px}
.post-categories{display:inline;list-style:none;margin:0;padding:0}
.post-categories li{display:inline}
.post-categories li:not(:last-child):after{content:" / "}
.alignwide{max-width:1100px;margin-left:auto;margin-right:auto}
.alignfull{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw)}
.wp-block-image img{height:auto}
.wp-block-gallery{gap:14px}
.wp-block-quote{border-left:5px solid var(--blue);padding:10px 20px;background:var(--lime)}
.wp-block-button__link{background:var(--blue);border-radius:0}

nav li{list-style:none;margin:0;padding:0}nav ul{list-style:none;margin:0;padding:0}