/*
Theme Name: Tuan Pastel
Theme URI: https://toimetroi.site
Author: Tuan Nguyen
Description: Blog ca nhan pastel vang bo - toi gian, editorial.
Version: 1.0
Text Domain: tuan-pastel
*/

/* ===== Tuấn Nguyễn — Blog · Pastel Vàng bơ ===== */
:root{
  --cream:#FBF6E9; --cream-deep:#F5EDD8; --paper:#FFFDF6;
  --butter:#F4E4A1; --butter-soft:#FBF1C9; --butter-band:#F8EBB0;
  --ochre:#CE9B3F; --accent:#C07B43; --accent-deep:#A4632F; --sage:#9FAE8C;
  --ink:#2E2A21; --ink-soft:#6E6655; --ink-faint:#9A9281; --line:#E7DEC6;
  --radius:18px; --shadow:0 14px 40px -22px rgba(70,55,20,.45);
  --shadow-soft:0 8px 24px -18px rgba(70,55,20,.35);
  --maxw:1180px; --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font-family:'Newsreader',Georgia,serif;font-size:18px;line-height:1.72;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(900px 500px at 12% -5%,rgba(248,235,176,.55),transparent 60%),radial-gradient(800px 520px at 100% 8%,rgba(244,228,161,.40),transparent 55%),radial-gradient(700px 600px at 85% 100%,rgba(159,174,140,.14),transparent 60%)}
::selection{background:var(--butter);color:var(--ink)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

#progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;background:linear-gradient(90deg,var(--ochre),var(--accent));transition:width .1s linear}

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:22px clamp(20px,5vw,54px);transition:padding .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease),backdrop-filter .4s var(--ease)}
nav.scrolled{padding:13px clamp(20px,5vw,54px);background:rgba(251,246,233,.82);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 var(--line)}
.brand{font-family:'Fraunces',serif;font-weight:600;font-size:1.45rem;letter-spacing:-.01em;display:flex;align-items:center;gap:11px}
.brand .mark{width:34px;height:34px;border-radius:50%;flex:none;background:radial-gradient(circle at 32% 30%,#FBEFB6,var(--butter) 55%,var(--ochre));box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6),0 4px 12px -6px rgba(120,90,20,.6);display:grid;place-items:center;font-size:.95rem;color:#7a5a16}
.nav-links{display:flex;gap:26px;align-items:center;font-family:'Inter',sans-serif;font-size:.85rem;letter-spacing:.01em}
.nav-links a{position:relative;color:var(--ink-soft);transition:color .3s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-5px;height:1.5px;width:0;background:var(--accent);transition:width .35s var(--ease)}
.nav-links a:hover,.nav-links a.on{color:var(--ink)}
.nav-links a:hover::after,.nav-links a.on::after{width:100%}
.nav-cta{font-family:'Inter',sans-serif;font-size:.82rem;font-weight:500;padding:9px 18px;border-radius:40px;border:1.5px solid var(--ink);color:var(--ink);transition:all .35s var(--ease);white-space:nowrap}
.nav-cta:hover{background:var(--ink);color:var(--cream);transform:translateY(-1px)}
.menu-btn{display:none;background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--ink)}

/* hero (home) */
header.hero{max-width:var(--maxw);margin:0 auto;padding:170px clamp(20px,5vw,54px) 64px;display:grid;grid-template-columns:1.15fr .85fr;gap:54px;align-items:center}
.eyebrow{font-family:'Inter',sans-serif;font-size:.78rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:10px;margin-bottom:22px}
.eyebrow::before{content:"";width:30px;height:1.5px;background:var(--accent);display:inline-block}
.hero h1{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(2.6rem,5.4vw,4.3rem);line-height:1.04;letter-spacing:-.02em;margin-bottom:24px}
.hero h1 em{font-style:italic;color:var(--accent);position:relative}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.08em;height:.34em;background:var(--butter);z-index:-1;border-radius:3px;opacity:.85}
.hero p.lead{font-size:1.16rem;color:var(--ink-soft);max-width:30ch;margin-bottom:34px}
.hero-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.btn-primary{font-family:'Inter',sans-serif;font-size:.9rem;font-weight:500;padding:14px 26px;border-radius:44px;background:var(--ink);color:var(--cream);display:inline-flex;align-items:center;gap:10px;position:relative;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease);box-shadow:var(--shadow-soft)}
.btn-primary .arrow{transition:transform .35s var(--ease)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-primary:hover .arrow{transform:translateX(5px)}
.btn-ghost{font-family:'Inter',sans-serif;font-size:.9rem;color:var(--ink-soft);border-bottom:1.5px solid transparent;padding-bottom:2px;transition:border-color .3s,color .3s}
.btn-ghost:hover{color:var(--ink);border-color:var(--accent)}
.hero-visual{position:relative;height:380px}
.paper-card{position:absolute;border-radius:var(--radius);background:var(--paper);box-shadow:var(--shadow);border:1px solid var(--line);overflow:hidden}
.pc1{inset:0 40px 60px 0;background:linear-gradient(150deg,#FBEFB6,var(--butter) 70%,#EFD98A);transform:rotate(-4deg)}
.pc1::after{content:"Tuấn Nguyễn";position:absolute;inset:0;display:grid;place-items:center;padding:34px;font-family:'Fraunces',serif;font-style:italic;font-size:1.5rem;letter-spacing:.02em;color:#6c4f12;text-align:center;opacity:.55}
.pc2{inset:50px 0 0 70px;transform:rotate(3deg);padding:26px 26px 22px;display:flex;flex-direction:column;gap:9px}
.pc2 .ph-cat{font-family:'Inter',sans-serif;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600}
.pc2 .ph-title{font-family:'Fraunces',serif;font-size:1.28rem;line-height:1.2;color:var(--ink)}
.ph-line{height:8px;border-radius:5px;background:var(--cream-deep)}
.float-badge{position:absolute;right:-6px;top:-14px;z-index:3;background:var(--paper);border:1px solid var(--line);border-radius:40px;padding:9px 16px;box-shadow:var(--shadow-soft);font-family:'Inter',sans-serif;font-size:.74rem;font-weight:600;color:var(--ink-soft);display:flex;align-items:center;gap:8px;animation:floaty 5s ease-in-out infinite}
.float-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--sage)}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* category header */
header.cat-head{padding:150px clamp(20px,5vw,54px) 30px;border-bottom:1px solid var(--line)}
.cat-inner{max-width:var(--maxw);margin:0 auto}
.cat-head h1{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(2.2rem,4.6vw,3.4rem);letter-spacing:-.02em;margin:6px 0 14px}
.cat-head p{font-size:1.12rem;color:var(--ink-soft);max-width:54ch}
.cat-head .count{display:inline-block;margin-top:18px;font-family:'Inter',sans-serif;font-size:.78rem;letter-spacing:.06em;color:var(--ink-faint);background:var(--butter-soft);padding:6px 14px;border-radius:30px;border:1px solid #EAD98E}

/* layout */
.wrap{max-width:var(--maxw);margin:0 auto;padding:54px clamp(20px,5vw,54px) 40px;display:grid;grid-template-columns:1fr 320px;gap:60px;align-items:start}
.section-label{font-family:'Inter',sans-serif;font-size:.76rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:30px;display:flex;align-items:center;gap:14px}
.section-label::after{content:"";flex:1;height:1px;background:var(--line)}

/* post list */
article.post{display:grid;grid-template-columns:200px 1fr;gap:30px;padding:34px 0;border-bottom:1px solid var(--line)}
#posts article.post:first-of-type{padding-top:0}
.thumb{height:150px;border-radius:14px;overflow:hidden;position:relative;box-shadow:var(--shadow-soft);transition:transform .5s var(--ease);display:block}
article.post:hover .thumb{transform:translateY(-4px)}
.thumb i{position:absolute;inset:0;display:block}
.thumb.img img{width:100%;height:100%;object-fit:cover}
.g1{background:linear-gradient(140deg,#FBEFB6,#EAD27E)}
.g2{background:linear-gradient(140deg,#E7E0CB,#C9BE9C)}
.g3{background:linear-gradient(140deg,#D9E2CE,#A9BC95)}
.g4{background:linear-gradient(140deg,#F3DEC0,#DDB389)}
.thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.10))}
.post-cat{font-family:'Inter',sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;display:inline-block;transition:color .3s}
.post-cat:hover{color:var(--accent-deep)}
.post h2{font-family:'Fraunces',serif;font-weight:500;font-size:1.6rem;line-height:1.18;letter-spacing:-.01em;margin-bottom:12px}
.post h2 a{background-image:linear-gradient(var(--accent),var(--accent));background-size:0 1.5px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .4s var(--ease)}
article.post:hover h2 a{background-size:100% 1.5px}
.meta{font-family:'Inter',sans-serif;font-size:.8rem;color:var(--ink-faint);margin-bottom:14px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.meta .sep{width:4px;height:4px;border-radius:50%;background:var(--ink-faint)}
.excerpt{color:var(--ink-soft);font-size:1.02rem;margin-bottom:16px}
.read-more{font-family:'Inter',sans-serif;font-size:.84rem;font-weight:500;color:var(--ink);display:inline-flex;align-items:center;gap:8px}
.read-more .arrow{transition:transform .35s var(--ease);color:var(--accent)}
.read-more:hover .arrow{transform:translateX(6px)}

/* sidebar */
aside{position:sticky;top:96px;display:flex;flex-direction:column;gap:24px}
.side-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-soft)}
.author{text-align:center}
.avatar{width:84px;height:84px;border-radius:50%;margin:0 auto 16px;background:radial-gradient(circle at 34% 30%,#FBEFB6,var(--butter) 55%,var(--ochre));display:grid;place-items:center;font-family:'Fraunces',serif;font-size:1.7rem;color:#7a5a16;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7),0 8px 20px -10px rgba(120,90,20,.6)}
.avatar.big{width:120px;height:120px;font-size:2.5rem;margin-bottom:24px}
.author h3{font-family:'Fraunces',serif;font-weight:500;font-size:1.3rem;margin-bottom:6px}
.author .role{font-family:'Inter',sans-serif;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.author p{font-size:.96rem;color:var(--ink-soft);margin-bottom:16px}
.author a.more{font-family:'Inter',sans-serif;font-size:.82rem;font-weight:500;border-bottom:1.5px solid var(--accent);padding-bottom:2px}
.side-card.news{background:linear-gradient(160deg,var(--butter-soft),var(--butter-band));border-color:#EAD98E}
.news h4{font-family:'Fraunces',serif;font-size:1.22rem;font-weight:500;margin-bottom:8px}
.news p{font-size:.92rem;color:#6e5a26;margin-bottom:16px}
.news form{display:flex;flex-direction:column;gap:10px}
.news input{font-family:'Inter',sans-serif;font-size:.88rem;padding:12px 16px;border-radius:12px;border:1px solid #E2CE80;background:rgba(255,255,255,.7);color:var(--ink)}
.news input:focus{outline:none;border-color:var(--ochre);box-shadow:0 0 0 3px rgba(206,155,63,.18)}
.news button{font-family:'Inter',sans-serif;font-size:.88rem;font-weight:600;padding:12px;border:none;border-radius:12px;background:var(--ink);color:var(--cream);cursor:pointer;transition:transform .3s var(--ease),background .3s}
.news button:hover{transform:translateY(-2px);background:var(--accent-deep)}
.side-card h4.t{font-family:'Inter',sans-serif;font-size:.76rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:16px}
.tags{display:flex;flex-wrap:wrap;gap:9px}
.tags a{font-family:'Inter',sans-serif;font-size:.82rem;padding:7px 14px;border-radius:30px;background:var(--cream);border:1px solid var(--line);color:var(--ink-soft);transition:all .3s var(--ease)}
.tags a:hover{background:var(--butter);border-color:var(--ochre);color:#6c4f12;transform:translateY(-2px)}
.quote-card{background:var(--ink);color:var(--cream);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.quote-card .q{font-family:'Fraunces',serif;font-style:italic;font-size:1.18rem;line-height:1.5;margin-bottom:14px}
.quote-card .q::first-letter{font-size:1.6em;color:var(--butter)}
.quote-card .src{font-family:'Inter',sans-serif;font-size:.78rem;letter-spacing:.05em;color:var(--butter)}

/* ===== single post ===== */
article.single{max-width:760px;margin:0 auto;padding:140px clamp(20px,5vw,30px) 20px}
.art-head{text-align:center;margin-bottom:34px}
.art-head .post-cat{margin-bottom:16px}
.art-head h1{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.12;letter-spacing:-.02em;margin-bottom:18px}
.art-head .meta{justify-content:center}
.art-hero{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin-bottom:40px;height:auto}
.art-hero img{width:100%;display:block}
.art-hero.band{height:300px}
.art-body{font-size:1.16rem;line-height:1.85;color:#37322a}
.art-body>*{margin-bottom:1.35rem}
.art-body p{margin-bottom:1.35rem}
.art-body h1,.art-body h2,.art-body h3{font-family:'Fraunces',serif;font-weight:600;line-height:1.22;letter-spacing:-.01em;color:var(--ink);margin:2.4rem 0 1rem}
.art-body h1{font-size:1.9rem}
.art-body h2{font-size:1.55rem}
.art-body h3{font-size:1.28rem}
.art-body h2::before{content:"";display:block;width:46px;height:3px;border-radius:3px;background:var(--butter);margin-bottom:14px}
.art-body strong{color:var(--ink);font-weight:600}
.art-body em{font-style:italic}
.art-body a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--butter)}
.art-body ul,.art-body ol{padding-left:1.4em;margin-bottom:1.5rem}
.art-body li{margin-bottom:.6rem}
.art-body ul li::marker{color:var(--accent)}
.art-body blockquote{border-left:3px solid var(--ochre);background:var(--butter-soft);padding:18px 24px;border-radius:0 12px 12px 0;font-style:italic;color:#5e4e25;margin:1.8rem 0}
.art-body img{border-radius:14px;box-shadow:var(--shadow-soft);margin:1.6rem 0}
.art-body hr{border:none;height:1px;background:var(--line);margin:2.4rem 0}
.art-foot{max-width:760px;margin:48px auto 0;padding-top:30px;border-top:1px solid var(--line)}
.share{display:flex;align-items:center;gap:16px;font-family:'Inter',sans-serif;font-size:.85rem;color:var(--ink-faint);margin-bottom:32px}
.share a{color:var(--accent);border-bottom:1.5px solid transparent;transition:border-color .3s}
.share a:hover{border-color:var(--accent)}
.art-foot .author{max-width:520px;margin:0 auto;text-align:center}

/* related */
.related{background:var(--cream-deep);border-top:1px solid var(--line);margin-top:54px;padding:54px clamp(20px,5vw,54px)}
.rel-inner{max-width:var(--maxw);margin:0 auto}
.rel-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.rel-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow-soft);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.rel-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.rel-cat{font-family:'Inter',sans-serif;font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.rel-title{font-family:'Fraunces',serif;font-size:1.3rem;line-height:1.22;color:var(--ink)}
.rel-go{font-family:'Inter',sans-serif;font-size:.82rem;color:var(--ink-soft);margin-top:auto}

/* news band */
.news-band{padding:64px clamp(20px,5vw,54px)}
.news-band-inner{max-width:680px;margin:0 auto;text-align:center;background:linear-gradient(160deg,var(--butter-soft),var(--butter-band));border:1px solid #EAD98E;border-radius:24px;padding:46px 34px;box-shadow:var(--shadow-soft)}
.news-band h2{font-family:'Fraunces',serif;font-weight:500;font-size:1.9rem;margin-bottom:10px}
.news-band p{color:#6e5a26;margin-bottom:24px}
.news-band form{display:flex;gap:10px;max-width:430px;margin:0 auto}
.news-band input{flex:1;font-family:'Inter',sans-serif;font-size:.9rem;padding:14px 18px;border-radius:12px;border:1px solid #E2CE80;background:rgba(255,255,255,.8)}
.news-band input:focus{outline:none;border-color:var(--ochre);box-shadow:0 0 0 3px rgba(206,155,63,.18)}
.news-band button{font-family:'Inter',sans-serif;font-weight:600;padding:14px 26px;border:none;border-radius:12px;background:var(--ink);color:var(--cream);cursor:pointer;transition:transform .3s var(--ease),background .3s}
.news-band button:hover{transform:translateY(-2px);background:var(--accent-deep)}

/* about */
header.about-hero{text-align:center;padding:150px clamp(20px,5vw,54px) 20px;max-width:760px;margin:0 auto}
.about-hero h1{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(2.4rem,5vw,3.6rem);letter-spacing:-.02em;margin-bottom:18px}
.about-hero .lead{font-size:1.16rem;color:var(--ink-soft);max-width:48ch;margin:0 auto}
.about-body{max-width:var(--maxw);margin:0 auto;padding:40px clamp(20px,5vw,54px) 20px;display:grid;grid-template-columns:1fr 320px;gap:60px;align-items:start}
.about-col h2{font-family:'Fraunces',serif;font-weight:500;font-size:1.7rem;margin:2rem 0 1rem}
.about-col h2:first-child{margin-top:0}
.about-col p{color:#37322a;font-size:1.1rem;margin-bottom:1.2rem}
.about-col ul{padding-left:1.3em;margin-bottom:1.4rem}
.about-col li{margin-bottom:.7rem;color:#37322a}
.about-col li::marker{color:var(--accent)}
.about-cta-line{font-style:italic;color:var(--ink-soft)}
.about-col .btn-primary{margin-top:8px}
.about-quote{border-left:3px solid var(--ochre);background:var(--butter-soft);padding:22px 26px;border-radius:0 14px 14px 0;font-family:'Fraunces',serif;font-style:italic;font-size:1.3rem;line-height:1.5;color:#5e4e25;margin:0 0 2rem}
.about-quote cite{display:block;margin-top:12px;font-family:'Inter',sans-serif;font-style:normal;font-size:.82rem;letter-spacing:.04em;color:var(--accent)}
.about-side{position:sticky;top:96px;display:flex;flex-direction:column;gap:24px}

/* footer */
footer{background:var(--ink);color:#D9D2C2;margin-top:60px;padding:64px clamp(20px,5vw,54px) 34px}
.foot-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:46px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.12)}
.foot-brand .brand{color:var(--cream);margin-bottom:14px}
.foot-brand p{font-size:.98rem;color:#A9A18E;max-width:34ch}
footer h5{font-family:'Inter',sans-serif;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--butter);margin-bottom:16px}
footer ul{list-style:none;display:flex;flex-direction:column;gap:11px}
footer ul a{font-size:.96rem;color:#C7BFAD;transition:color .3s}
footer ul a:hover{color:var(--cream)}
.foot-bottom{max-width:var(--maxw);margin:26px auto 0;display:flex;justify-content:space-between;align-items:center;font-family:'Inter',sans-serif;font-size:.8rem;color:#8C8472;flex-wrap:wrap;gap:12px}

/* reveal + toast */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
#toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(140%);background:var(--ink);color:var(--cream);padding:14px 24px;border-radius:40px;font-family:'Inter',sans-serif;font-size:.88rem;box-shadow:var(--shadow);z-index:300;transition:transform .5s var(--ease)}
#toast.show{transform:translateX(-50%) translateY(0)}

/* responsive */
@media(max-width:980px){
  header.hero{grid-template-columns:1fr;padding-top:150px;gap:30px}
  .hero-visual{height:320px;max-width:460px}
  .wrap,.about-body{grid-template-columns:1fr;gap:40px}
  aside,.about-side{position:static;flex-direction:row;flex-wrap:wrap}
  .side-card{flex:1;min-width:240px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .nav-links{display:none;position:absolute;top:100%;right:14px;background:var(--paper);flex-direction:column;gap:16px;padding:20px 26px;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
  .nav-links.open{display:flex}
  .menu-btn{display:block}
  article.post{grid-template-columns:1fr;gap:16px}
  .thumb{height:190px}
  .rel-grid,.foot-grid{grid-template-columns:1fr}
  aside,.about-side{flex-direction:column}
  .news-band form{flex-direction:column}
}

/* avatar anh that */
.avatar.has-photo{background:none;overflow:hidden;padding:0;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7),0 8px 20px -10px rgba(120,90,20,.6)}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}