/*
Theme Name: dangthanhson
Theme URI: https://dangthanhson.com
Author: Đặng Thanh Sơn
Description: Theme portfolio cá nhân cho chuyên viên SEO — trang chủ dạng bento, dự án (case study), blog, liên hệ, Pay Me (VietQR) và chế độ sáng/tối.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dangthanhson
Tags: portfolio, blog, one-column, custom-menu, featured-images, dark-mode
*/

:root{--bg:#F2F4F1;--surface:#FFFFFF;--sunk:#E7EBE6;--ink:#1E2321;--muted:#5C6460;--line:#DCE1DA;--accent:#2F6BFF;--accent-soft:color-mix(in srgb,var(--accent) 10%,transparent);--r:22px;--mono:'JetBrains Mono',ui-monospace,monospace}
[data-theme="dark"]{--bg:#141716;--surface:#1C201F;--sunk:#252A28;--ink:#EDF1EE;--muted:#9AA39E;--line:#2F3532;--accent-soft:color-mix(in srgb,var(--accent) 20%,transparent)}
*{box-sizing:border-box}
html{scroll-padding-top:90px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Be Vietnam Pro',system-ui,sans-serif;-webkit-font-smoothing:antialiased;transition:background .25s,color .25s}
input,textarea,select,button{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
::selection{background:var(--accent);color:#fff}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link:focus{position:fixed;top:8px;left:8px;z-index:100;width:auto;height:auto;clip:auto;padding:10px 16px;background:var(--ink);color:var(--bg);border-radius:999px}

/* ---------- Layout ---------- */
.site{min-height:100vh;display:flex;flex-direction:column}
.site-main{flex:1}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.page-wrap{max-width:1160px;margin:0 auto;padding:64px 24px 96px;display:flex;flex-direction:column;gap:40px}
.eyebrow{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.06em;text-transform:uppercase}
.eyebrow--muted{color:var(--muted)}
.h-section{margin:0;font-size:36px;letter-spacing:-.025em;line-height:1.15}
.h-page{margin:0;font-size:clamp(36px,5vw,52px);letter-spacing:-.03em;line-height:1.1;text-wrap:balance}
.lead{margin:0;font-size:17px;line-height:1.6;color:var(--muted);text-wrap:pretty}
.stack{display:flex;flex-direction:column;gap:12px}
.stack-14{display:flex;flex-direction:column;gap:14px}
.muted{color:var(--muted)}
.mono{font-family:var(--mono)}
.section{padding:72px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:36px}
.grid-auto{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.grid-250{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:16px}
.grid-320{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.grid-fill-320{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}

/* ---------- Buttons / chips ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;padding:15px 24px;border-radius:999px;font-weight:600;font-size:15px;line-height:1.2;text-decoration:none!important;transition:filter .15s,background .15s,border-color .15s,transform .15s}
.btn--sm{padding:12px 20px;font-size:14px}
.btn--xs{padding:9px 16px;font-size:14px}
.btn--accent{background:var(--accent);color:#fff}
.btn--accent:hover{filter:brightness(1.08)}
.btn--ink{background:var(--ink);color:var(--bg)}
.btn--ink:hover{filter:brightness(1.15)}
.btn--ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn--ghost:hover{background:var(--surface)}
.btn--outline{background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.btn--outline:hover{border-color:var(--ink)}
.btn-copy{border:1px solid var(--line);background:var(--bg);padding:7px 12px;border-radius:999px;font-size:12.5px;font-weight:500;flex-shrink:0}
.link-arrow{background:none;border:0;color:var(--accent);font-weight:600;font-size:15px;padding:0}
.chip{display:inline-block;padding:5px 11px;border-radius:999px;background:var(--sunk);font-size:12.5px;font-weight:500;color:var(--ink)}
.chip--line{background:transparent;border:1px solid var(--line);color:var(--muted);font-size:12px;padding:4px 10px}
.chip--accent{align-self:flex-start;padding:4px 10px;background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.placeholder{background:repeating-linear-gradient(135deg,var(--sunk) 0 10px,var(--surface) 10px 20px);display:grid;place-items:center}
.placeholder>span{font-family:var(--mono);font-size:12px;color:var(--muted);background:var(--surface);padding:5px 10px;border-radius:8px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
a.card,.card-link{color:inherit;text-decoration:none!important;transition:border-color .15s,transform .15s}
a.card:hover,.card-link:hover{border-color:var(--accent)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.admin-bar .site-header{top:32px}
@media (max-width:782px){.admin-bar .site-header{top:0}}
.site-header__inner{max-width:1160px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none!important}
.brand img{width:38px;height:38px;border-radius:50%;object-fit:cover;object-position:center 25%;border:2px solid var(--accent);display:block}
.brand span{font-weight:700;font-size:17px;letter-spacing:-.01em}
.brand--logo img.brand__logo{width:auto;height:40px;max-width:180px;border:0;border-radius:0;object-fit:contain}
.brand .brand__logo--dark{display:none}
[data-theme="dark"] .brand .brand__logo:has(+.brand__logo--dark){display:none}
[data-theme="dark"] .brand .brand__logo--dark{display:block}
.main-nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap;align-items:center}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;flex-wrap:wrap}
.main-nav li a{display:block;padding:9px 14px;border-radius:999px;color:var(--muted);font-weight:500;font-size:14px;text-decoration:none}
.main-nav li a:hover{color:var(--ink);background:var(--sunk)}
.main-nav li.current-menu-item>a,.main-nav li.current_page_item>a,.main-nav li.current-menu-ancestor>a,.main-nav li.current_page_parent>a,.main-nav li.is-active>a{background:var(--accent-soft);color:var(--accent);font-weight:600}
.nav-pay{margin-left:6px}
.theme-toggle{display:inline-flex;gap:2px;padding:3px;border-radius:999px;border:1px solid var(--line);background:var(--sunk)}
.theme-toggle button{width:32px;height:32px;border-radius:999px;border:0;background:transparent;display:grid;place-items:center;padding:0;color:var(--muted);transition:background .2s,color .2s,box-shadow .2s}
.theme-toggle button:hover{color:var(--ink)}
.theme-toggle button[aria-pressed="true"]{background:var(--surface);color:var(--accent);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.nav-toggle{display:none;margin-left:auto;width:38px;height:38px;border-radius:999px;border:1px solid var(--line);background:var(--surface);place-items:center;padding:0;color:var(--ink)}
@media (max-width:720px){
  .nav-toggle{display:grid}
  .main-nav{display:none;width:100%;margin-left:0;flex-direction:column;align-items:stretch;padding-bottom:8px}
  .main-nav.is-open{display:flex}
  .main-nav ul{flex-direction:column}
  .nav-pay{margin:6px 0 0}
  .nav-actions{display:flex;gap:8px;align-items:center}
}
.nav-actions{display:flex;gap:6px;align-items:center}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line)}
.site-footer__inner{max-width:1160px;margin:0 auto;padding:28px 24px;display:flex;gap:16px;flex-wrap:wrap;align-items:center;justify-content:space-between;font-size:14px;color:var(--muted)}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;gap:20px;flex-wrap:wrap}
.site-footer a{color:var(--muted)}
.site-footer a:hover{color:var(--ink);text-decoration:none}

/* ---------- Home: hero ---------- */
.hero{padding:40px 0 88px;display:flex;flex-direction:column;gap:16px}
.hero__row{display:flex;flex-wrap:wrap;gap:16px}
.hero__main{flex:3 1 460px;position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:32px;padding:clamp(28px,4vw,44px);display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:400px}
.hero__spark{position:absolute;top:36px;right:36px}
.hero__asterisk{position:absolute;top:110px;right:104px;opacity:.85}
.hero__body{display:flex;flex-direction:column;gap:22px;position:relative}
.hero h1{margin:0;font-size:clamp(44px,6vw,76px);line-height:1.12;letter-spacing:-.045em;font-weight:700}
.hero h1 .dot{color:var(--accent)}
.hero__desc{margin:0;font-size:18.5px;line-height:1.6;color:var(--muted);max-width:480px;text-wrap:pretty}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}
.hero__portrait{flex:1 1 260px;max-width:360px;margin:0 auto;position:relative;overflow:hidden;border-radius:32px 32px 32px 140px;background:var(--sunk);border:1px solid var(--line);min-height:380px}
.hero__portrait>img,.hero__portrait>.placeholder{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%}
.hero__badge{position:absolute;top:22px;right:22px;width:60px;height:60px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;transform:rotate(-12deg);box-shadow:0 10px 24px rgba(0,0,0,.18)}
.hero__hello{position:absolute;right:22px;bottom:22px;display:flex;align-items:center;gap:10px;background:var(--surface);color:var(--ink);border-radius:999px;padding:10px 18px 10px 10px;box-shadow:0 10px 28px rgba(0,0,0,.14);font-size:13.5px;font-weight:600}
.hero__hello>span:first-child{width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.bento{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:16px}
.bento__stat{position:relative;overflow:hidden;background:var(--accent);color:#fff;border-radius:28px;padding:28px;display:flex;flex-direction:column;justify-content:flex-end;gap:28px;min-height:190px}
.bento__stat svg{position:absolute;right:-14px;bottom:-14px}
.bento__stat strong{font-size:52px;font-weight:700;letter-spacing:-.04em;line-height:1;display:block}
.bento__stat span{font-size:15px;position:relative}
.bento__skills{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.bento__skills>span{font-size:15px;font-weight:600}
.bento__icons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.bento__icons>div{display:flex;flex-direction:column;align-items:center;gap:8px}
.bento__icons>div>span:first-child{width:52px;height:52px;display:grid;place-items:center}
.bento__icons>div>span:last-child{font-family:var(--mono);font-size:11.5px;font-weight:500}
.bento__cta{text-align:left;border:0;background:var(--ink);color:var(--bg)!important;border-radius:28px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;gap:28px;text-decoration:none!important;transition:transform .15s}
.bento__cta:hover{transform:translateY(-2px)}
.status-dot{display:inline-flex;align-items:center;gap:10px;font-size:14px}
.status-dot::before{content:"";width:10px;height:10px;border-radius:50%;background:#2DB37A;box-shadow:0 0 0 5px rgba(45,179,122,.25)}
.bento__cta-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;width:100%}
.bento__cta-foot>span:first-child{font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.arrow-circle{flex-shrink:0;width:44px;height:44px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:20px}

/* ---------- Home: bio, skills ---------- */
.bio{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:40px;padding:72px 0;border-top:1px solid var(--line)}
.bio__text{display:flex;flex-direction:column;gap:18px;font-size:17px;line-height:1.75;color:var(--muted)}
.bio__text p{margin:0;text-wrap:pretty}
.player{position:relative;margin-top:24px;max-width:420px;padding:12px;border:1px solid var(--line);border-radius:20px;background:var(--surface);display:flex;flex-direction:column;gap:10px}
.player__label{display:flex;align-items:center;gap:8px;padding:2px 4px 0;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.player__dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.player.is-playing .player__dot{animation:player-pulse 1.4s ease-in-out infinite}
@keyframes player-pulse{50%{opacity:.3}}
.player__body{display:flex;align-items:center;gap:12px;padding:8px;border-radius:14px;background:var(--bg)}
/* Vinyl: grooves + centre label (track artwork or accent), spins while playing and pauses in place */
.player__art{position:relative;flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle,transparent 0 30%,rgba(255,255,255,.07) 31%,transparent 33%,transparent 41%,rgba(255,255,255,.07) 42%,transparent 44%,transparent 54%,rgba(255,255,255,.06) 55%,transparent 57%),
  conic-gradient(from 30deg,#1b1b1b,#3a3a3a 12%,#1b1b1b 25%,#1b1b1b 50%,#3a3a3a 62%,#1b1b1b 75%);
  box-shadow:0 2px 6px rgba(0,0,0,.25),inset 0 0 0 2px #111;
  animation:player-spin 3.2s linear infinite;animation-play-state:paused}
.player.is-playing .player__art{animation-play-state:running}
.player__label-disc{position:relative;width:46%;height:46%;border-radius:50%;overflow:hidden;background:var(--accent)}
.player__label-disc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.player__hole{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 1px rgba(0,0,0,.35)}
@keyframes player-spin{to{transform:rotate(360deg)}}

/* Equalizer bars next to the artist */
.player__meta{display:flex;align-items:center;gap:8px;min-width:0}
.player__eq{flex:none;display:flex;align-items:flex-end;gap:2px;height:10px;opacity:0;transition:opacity .2s}
.player__eq i{width:3px;height:30%;border-radius:1px;background:var(--accent);animation:player-eq .9s ease-in-out infinite alternate;animation-play-state:paused}
.player__eq i:nth-child(2){animation-delay:-.3s;animation-duration:.7s}
.player__eq i:nth-child(3){animation-delay:-.6s;animation-duration:1s}
.player__eq i:nth-child(4){animation-delay:-.15s;animation-duration:.8s}
.player.is-playing .player__eq{opacity:1}
.player.is-playing .player__eq i{animation-play-state:running}
@keyframes player-eq{0%{height:25%}100%{height:100%}}
.player__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.player__title{font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player__artist{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player__progress{display:flex;align-items:center;gap:10px;margin-top:6px}
.player__bar{flex:1;height:4px;border-radius:99px;background:var(--line);cursor:pointer;position:relative}
.player__bar::before{content:"";position:absolute;inset:-8px 0}
.player__bar span{display:block;height:100%;width:0;border-radius:inherit;background:var(--accent)}
.player__bar:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.player__time{flex:none;font-family:var(--mono);font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.player__btn{flex:none;display:grid;place-items:center;border:0;border-radius:50%;padding:0;transition:filter .15s,transform .15s}
.player__btn--play{width:40px;height:40px;background:var(--accent);color:#fff}
.player__btn--play:hover{filter:brightness(1.08)}
.player__btn--play:active{transform:scale(.94)}
.player__btn--play:disabled{opacity:.5;cursor:wait}
.player__btn--next{width:32px;height:32px;background:transparent;color:var(--muted)}
.player__btn--next:hover{color:var(--ink);background:var(--sunk)}
.player__btn .i-pause,.player.is-playing .player__btn .i-play{display:none}
.player.is-playing .player__btn .i-pause{display:block}
.player__frame{position:absolute;width:1px;height:1px;border:0;opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.player__art,.player__eq i,.player.is-playing .player__dot{animation:none}.player__eq i{height:60%}}
.bio__cta{align-self:flex-start;margin-top:6px;padding:12px 12px 12px 22px;gap:12px}
.bio__cta-arrow{width:28px;height:28px;border-radius:999px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:15px;line-height:1;transition:transform .15s}
.bio__cta:hover .bio__cta-arrow{transform:translateX(3px)}
.skill{padding:26px;display:flex;flex-direction:column;gap:16px}
.skill__icon{width:44px;height:44px;display:grid;place-items:center}
.skill__head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.skill h3{margin:0;font-size:20px;letter-spacing:-.01em}
.skill__years{font-family:var(--mono);font-size:12px;color:var(--muted)}
.skill p{margin:0;font-size:14px;line-height:1.6;color:var(--muted)}
.skill .chips{margin-top:auto}

/* ---------- Project cards ---------- */
.pcard{overflow:hidden;display:flex;flex-direction:column}
.pcard__shot{aspect-ratio:16/10;border-bottom:1px solid var(--line);overflow:hidden}
.pcard__shot img{width:100%;height:100%;object-fit:cover;display:block}
.pcard__body{padding:24px;display:flex;flex-direction:column;gap:12px;flex:1}
.pcard__client{font-size:13px;color:var(--muted)}
.pcard h3{margin:0;font-size:20px;line-height:1.3;letter-spacing:-.01em}
.pcard__metric{display:flex;align-items:baseline;gap:10px;padding:14px 16px;border-radius:14px;background:var(--accent-soft)}
.pcard__metric strong{font-size:26px;font-weight:700;color:var(--accent);letter-spacing:-.02em}
.pcard__metric span{font-size:13px;color:var(--muted)}
.pcard .chips{margin-top:auto;padding-top:6px}

/* ---------- Experience ---------- */
.exp{padding:72px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:40px}
.exp__intro{display:flex;flex-direction:column;gap:12px;align-self:start;position:sticky;top:100px}
.exp__intro p{margin:4px 0 0;font-size:16px;line-height:1.65;color:var(--muted);max-width:380px;text-wrap:pretty}
.exp__intro .btn-row{margin-top:12px;gap:10px}
.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.timeline li{display:grid;grid-template-columns:20px 1fr;gap:18px}
.timeline__rail{display:flex;flex-direction:column;align-items:center}
.timeline__rail::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--accent);margin-top:6px;box-shadow:0 0 0 5px var(--accent-soft)}
.timeline__rail::after{content:"";flex:1;width:1px;background:var(--line);margin-top:8px}
.timeline__body{padding-bottom:36px;display:flex;flex-direction:column;gap:6px}
.timeline__time{font-family:var(--mono);font-size:12px;color:var(--muted)}
.timeline h3{margin:0;font-size:19px}
.timeline__org{font-size:15px;font-weight:500;color:var(--accent)}
.timeline p{margin:4px 0 0;font-size:15px;line-height:1.65;color:var(--muted);text-wrap:pretty}

/* ---------- Post cards ---------- */
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.bcard{padding:26px;display:flex;flex-direction:column;gap:14px}
.bcard h3{margin:0;font-size:19px;line-height:1.35;letter-spacing:-.01em}
.bcard p{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted)}
.meta{margin-top:auto;font-size:13px;color:var(--muted)}
.bcard--cover{padding:0;overflow:hidden}
.bcard--cover:hover{transform:translateY(-2px)}
.bcard__cover{aspect-ratio:16/9;width:100%;border-bottom:1px solid var(--line);overflow:hidden}
.bcard__cover img{width:100%;height:100%;object-fit:cover;display:block}
.bcard__cover.placeholder>span{font-size:11.5px;padding:4px 9px;border-radius:7px}
.bcard__inner{padding:22px;display:flex;flex-direction:column;gap:12px;flex:1}
.bcard--cover h3{font-size:18.5px}
.rcard{padding:12px 12px 24px;display:flex;flex-direction:column;gap:12px}
.rcard__thumb{width:100%;aspect-ratio:16/9;border-radius:14px;border:1px solid var(--line);margin-bottom:4px;overflow:hidden}
.rcard__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rcard__body{display:flex;flex-direction:column;gap:12px;padding:0 12px}
.rcard h3{margin:0;font-size:18px;line-height:1.35}

/* ---------- Contact band (home) ---------- */
.band-wrap{padding:24px 0 96px}
.band{position:relative;overflow:hidden;border-radius:40px;background-color:var(--ink);background-image:radial-gradient(color-mix(in srgb,var(--bg) 16%,transparent) 1.2px,transparent 1.6px);background-size:22px 22px;color:var(--bg);padding:clamp(36px,6vw,76px)}
.band__sun{position:absolute;top:-110px;right:-90px;width:320px;height:320px;border-radius:50%;background:var(--accent)}
.band__ring{position:absolute;top:-150px;right:-130px;width:400px;height:400px;border-radius:50%;border:1.5px solid var(--accent);opacity:.6}
.band__spark{position:absolute;top:44px;right:60px}
.band__ast{position:absolute;right:28px;top:250px;pointer-events:none}
.band__grid{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:44px;align-items:end}
.band h2{margin:0;font-size:clamp(34px,5vw,60px);line-height:1.15;letter-spacing:-.035em;text-wrap:balance}
.band__eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.08em}
.band__avatar{display:inline-block;vertical-align:middle;width:1.7em;height:.95em;border-radius:999px;overflow:hidden;border:2px solid var(--accent);margin:-.1em .05em 0}
.band__avatar img{width:100%;height:100%;object-fit:cover;object-position:center 25%;display:block}
.band__side{display:flex;flex-direction:column;gap:12px;max-width:420px;width:100%;justify-self:end}
.band__mail{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 20px;border-radius:20px;border:1px solid color-mix(in srgb,var(--bg) 22%,transparent)}
.band__mail>div{display:flex;flex-direction:column;flex:1;min-width:0}
.band__mail>div span:first-child{font-size:12.5px}
.band__mail>div span:last-child{font-weight:600;overflow-wrap:anywhere}
.band__mail .btn-copy{border:0;background:var(--bg);color:var(--ink);padding:9px 14px;font-size:13px;font-weight:600}
.band__send{border:0;padding:18px 24px;border-radius:20px;background:var(--accent);color:#fff!important;font-weight:700;font-size:16px;display:flex;justify-content:space-between;align-items:center;text-decoration:none!important}
.band__send:hover{filter:brightness(1.08)}
.band__note{font-size:13.5px;padding-left:4px}

/* ---------- Projects archive ---------- */
.archive-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.archive-head .stack-14{max-width:640px}
.h-display{margin:0;font-size:clamp(40px,6vw,72px);letter-spacing:-.04em;line-height:1.05}
.tabs{display:flex;gap:28px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.tabs a,.tabs button{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:0 0 14px;font-size:15px;font-weight:500;color:var(--muted);text-decoration:none}
.tabs a:hover,.tabs button:hover{color:var(--ink)}
.tabs .is-active{border-bottom-color:var(--accent);font-weight:600;color:var(--ink)}
.prow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(24px,4vw,56px);align-items:center;padding:36px 0;border-bottom:1px solid var(--line);color:inherit;text-decoration:none!important}
.prow__shot{position:relative;aspect-ratio:4/3;border-radius:28px;overflow:hidden;border:1px solid var(--line)}
.prow__shot img{width:100%;height:100%;object-fit:cover;display:block}
.prow__cat{position:absolute;top:18px;left:18px;padding:6px 12px;border-radius:999px;background:var(--surface);font-size:12.5px;font-weight:600;color:var(--ink)}
.prow__body{display:flex;flex-direction:column;gap:18px}
.prow__num{display:flex;align-items:baseline;gap:14px}
.prow__num span:first-child{font-family:var(--mono);font-size:14px;color:var(--accent);font-weight:500}
.prow__num span:last-child{font-size:14px;color:var(--muted)}
.prow h2{margin:0;font-size:clamp(26px,3vw,36px);line-height:1.2;letter-spacing:-.025em;text-wrap:balance}
.prow__metric{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.prow__metric strong{font-size:clamp(40px,5vw,56px);font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--accent)}
.prow__metric span{font-size:15px;color:var(--muted);max-width:200px;line-height:1.4}
.prow__foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.hashtags{display:flex;flex-wrap:wrap;gap:6px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.more{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px}
.more>span{width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;transition:background .15s}
.prow:hover .more>span{background:var(--accent);color:#fff}

/* ---------- Blog archive ---------- */
.filters{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:14px;font-weight:500;color:var(--ink);text-decoration:none!important}
.pill:hover{border-color:var(--ink)}
.pill .count{color:var(--muted)}
.pill.is-active{border-color:var(--ink);background:var(--ink);color:var(--bg);font-weight:600}
.pill.is-active .count{color:inherit;opacity:.6;font-weight:400}
.search-form{margin:0}
.search-field{padding:11px 18px;border-radius:999px;border:1px solid var(--line);background:var(--surface);min-width:min(100%,260px);outline:none}
.search-field:focus{border-color:var(--accent)}
.empty{padding:56px;text-align:center;border:1px dashed var(--line);border-radius:var(--r);color:var(--muted)}
.pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.pagination .page-numbers{min-width:42px;height:42px;padding:0 14px;display:grid;place-items:center;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:500;text-decoration:none}
.pagination .page-numbers.current{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* ---------- Single post ---------- */
.post-wrap{padding-top:48px;gap:40px}
.post-head{display:flex;flex-direction:column;gap:18px;max-width:780px}
.crumbs{display:flex;gap:8px;font-size:14px;color:var(--muted);flex-wrap:wrap}
.crumbs a{font-weight:500}
.post-head h1{margin:0;font-size:clamp(32px,5vw,50px);line-height:1.12;letter-spacing:-.03em;text-wrap:balance}
.byline{display:flex;align-items:center;gap:12px}
.byline img{width:42px;height:42px;border-radius:50%;object-fit:cover;object-position:center 25%;flex-shrink:0}
.byline>div{display:flex;flex-direction:column;font-size:14px}
.byline strong{font-weight:600}
.post-cover{border-radius:28px;overflow:hidden;border:1px solid var(--line)}
.post-cover img{display:block;width:100%;height:auto}
.post-layout{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start;padding-top:32px;border-top:1px solid var(--line)}
.post-layout--page{border-top:0;padding-top:0;gap:48px}
.post-main{flex:999 1 460px;min-width:0;max-width:740px;display:flex;flex-direction:column;gap:22px}
.sidebar{flex:1 1 240px;position:sticky;top:96px;display:flex;flex-direction:column;gap:16px}
.box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:12px}
.box__title{font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.toc{gap:4px}
.toc .box__title{margin-bottom:8px}
.toc a{color:var(--muted);font-size:14.5px;padding:7px 0 7px 12px;border-left:2px solid var(--line);text-decoration:none}
.toc a:hover,.toc a.is-active{color:var(--ink);border-left-color:var(--accent)}
.toc--plain a{border-left:0;padding:6px 0;color:var(--ink)}
.toc--plain a:hover{color:var(--accent)}
.side-posts{gap:4px}
.side-posts .box__title{margin-bottom:6px}
.side-posts a{border-top:1px solid var(--line);padding:12px 0;display:flex;flex-direction:column;gap:4px;color:var(--ink);text-decoration:none}
.side-posts a:hover{color:var(--accent)}
.side-posts a strong{font-size:14.5px;font-weight:600;line-height:1.4}
.side-posts a span{font-size:12.5px;color:var(--muted)}
.side-tags a{padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--bg);font-size:13px;font-weight:500;color:var(--ink);text-decoration:none}
.side-tags a:hover{border-color:var(--ink)}
.box--ink{background:var(--ink);color:var(--bg);border:0}
.box--ink strong{font-size:16px;font-weight:700;line-height:1.35}
.box--ink .btn{padding:12px 16px;font-size:14px}
.author-box{display:flex;gap:18px;align-items:center;padding:24px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);flex-wrap:wrap}
.author-box img{width:64px;height:64px;border-radius:20px;object-fit:cover;object-position:center 25%;flex-shrink:0}
.author-box>div{flex:1;min-width:200px;display:flex;flex-direction:column;gap:4px}
.author-box p{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted)}
.author-box .btn{background:var(--bg);border:1px solid var(--line);color:var(--ink);padding:11px 18px;font-size:14px}
.post-tags{display:flex;gap:8px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--line)}
.post-tags a{padding:5px 12px;border-radius:999px;background:var(--sunk);font-size:13px;color:var(--ink);text-decoration:none}
.related{display:flex;flex-direction:column;gap:22px;padding-top:32px;border-top:1px solid var(--line)}
.related>h2{margin:0;font-size:26px;letter-spacing:-.02em}

/* ---------- Entry content (WP editor) ---------- */
.entry{font-size:17.5px;line-height:1.8;display:flex;flex-direction:column;gap:22px}
.entry>*{margin:0}
.entry .lede{font-size:20px;line-height:1.7;color:var(--muted);text-wrap:pretty}
.entry h2{margin:16px 0 0;font-size:27px;letter-spacing:-.02em;line-height:1.3}
.entry h3{margin:10px 0 0;font-size:21px;letter-spacing:-.015em;line-height:1.35}
.entry p{text-wrap:pretty}
.entry ul,.entry ol{padding-left:22px;display:flex;flex-direction:column;gap:8px}
.entry blockquote{margin:8px 0;padding:22px 26px;border-radius:18px;background:var(--accent-soft);font-size:19px;line-height:1.6;font-weight:500;border:0}
.entry blockquote p{margin:0}
.entry blockquote cite{display:block;margin-top:8px;font-size:14px;color:var(--muted);font-style:normal}
.entry pre,.entry .wp-block-code{padding:22px;border-radius:16px;background:#1A1E1D;color:#E6ECE8;font-family:var(--mono);font-size:14px;line-height:1.7;overflow-x:auto}
.entry code{font-family:var(--mono);font-size:.9em;background:var(--sunk);padding:2px 6px;border-radius:6px}
.entry pre code{background:none;padding:0;font-size:inherit;color:inherit}
.entry img,.entry figure{border-radius:18px}
.entry figure{margin:0}
.entry figcaption{font-size:14px;color:var(--muted);text-align:center;margin-top:8px}
.entry table{width:100%;border-collapse:collapse;font-size:15px}
.entry th,.entry td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.entry hr{border:0;border-top:1px solid var(--line);width:100%}
.entry--page{font-size:17px;gap:18px}
.entry--page h2{margin-top:20px;font-size:25px}
.alignwide,.alignfull{max-width:100%}
.aligncenter{margin-left:auto;margin-right:auto}

/* ---------- Comments ---------- */
.comments{display:flex;flex-direction:column;gap:20px;padding-top:32px;border-top:1px solid var(--line)}
.comments h2{margin:0;font-size:24px;letter-spacing:-.02em}
.comment-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.comment-list .children{list-style:none;padding-left:24px;margin-top:14px;display:flex;flex-direction:column;gap:14px}
.comment-body{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px 20px;font-size:15px;line-height:1.6}
.comment-author{display:flex;align-items:center;gap:10px;font-weight:600}
.comment-author img{border-radius:50%}
.comment-metadata{font-size:12.5px}
.comment-metadata a{color:var(--muted)}
.comment-respond .comment-form{display:flex;flex-direction:column;gap:14px}
.comment-form label{display:block;font-size:14px;font-weight:500;margin-bottom:6px}

/* ---------- Forms ---------- */
.field{display:flex;flex-direction:column;gap:7px;font-size:14px;font-weight:500}
.input,.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{width:100%;padding:13px 16px;border-radius:14px;border:1px solid var(--line);background:var(--bg);font-weight:400;outline:none}
.input:focus,.comment-form input:focus,.comment-form textarea:focus{border-color:var(--accent)}
textarea.input{resize:vertical;line-height:1.6}
.field-error{color:#D2492F;font-size:13px;font-weight:400}
.form-submit .submit,.btn-submit{border:0;padding:15px;border-radius:999px;background:var(--accent);color:#fff;font-weight:600;font-size:15px;margin-top:4px;width:100%}
.form-submit .submit:hover,.btn-submit:hover{filter:brightness(1.08)}
.hp-field{position:absolute!important;left:-9999px!important}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:48px;align-items:start}
.contact-intro{display:flex;flex-direction:column;gap:28px}
.contact-list{display:flex;flex-direction:column;gap:10px}
.contact-item{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:18px;background:var(--surface);border:1px solid var(--line)}
.contact-item__code{width:40px;height:40px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:500;flex-shrink:0}
.contact-item>div{display:flex;flex-direction:column;flex:1;min-width:0}
.contact-item>div span:first-child{font-size:13px;color:var(--muted)}
.contact-item>div span:last-child{font-weight:600;overflow-wrap:anywhere}
.form-card{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:clamp(24px,4vw,40px)}
.form-card form{display:flex;flex-direction:column;gap:18px}
.form-card h2{margin:0 0 4px;font-size:24px;letter-spacing:-.02em}
.sent{display:flex;flex-direction:column;gap:14px;align-items:flex-start;padding:24px 0}
.sent__icon{width:52px;height:52px;border-radius:50%;background:#2DB37A;color:#fff;display:grid;place-items:center;font-size:22px;font-weight:700}
.sent h2{margin:0;font-size:26px;letter-spacing:-.02em}
.sent p{margin:0;color:var(--muted);line-height:1.6}
.notice-error{padding:12px 16px;border-radius:14px;background:rgba(210,73,47,.1);color:#D2492F;font-size:14px}

/* ---------- Pay ---------- */
.pay-wrap{max-width:1000px}
.pay-head{display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center}
.pay-head .lead{max-width:560px}
.pay-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:24px;align-items:stretch}
.pay-card{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:32px;display:flex;flex-direction:column;gap:22px}
.pay-card h2{margin:0;font-size:20px}
.amounts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.amount{position:relative;padding:16px 14px;border-radius:18px;border:2px solid var(--line);background:var(--bg);display:flex;align-items:center;gap:12px;text-align:left;transition:border-color .15s,background .15s}
.amount:hover{border-color:var(--muted)}
.amount__icon{flex:none;width:40px;height:40px}
.amount__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.amount strong{font-weight:700;font-size:18px}
.amount__text span{font-size:13px;color:var(--muted)}
.amount__check{position:absolute;top:8px;right:8px;color:var(--accent);opacity:0;transform:scale(.6);transition:opacity .15s,transform .15s}
.amount.is-active{border-color:var(--accent);background:var(--accent-soft)}
.amount.is-active strong{color:var(--accent)}
.amount.is-active .amount__check{opacity:1;transform:none}
@media (max-width:420px){.amount{padding:14px 10px;gap:8px}.amount__icon{width:32px;height:32px}.amount strong{font-size:16px}}
.qr-row{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.qr{width:160px;height:160px;border-radius:18px;border:1px solid var(--line);flex-shrink:0;overflow:hidden;background:#fff}
.qr img{width:100%;height:100%;object-fit:contain;display:block}
.qr-amount{display:flex;flex-direction:column;gap:4px}
.qr-amount span:first-child{font-size:13px;color:var(--muted)}
.qr-amount strong{font-size:30px;font-weight:700;letter-spacing:-.02em;color:var(--accent)}
.bank{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.bank__row{display:flex;align-items:center;gap:12px;padding:13px 16px;border-top:1px solid var(--line);background:var(--bg)}
.bank__row:first-child{border-top:0}
.bank__row[hidden]{display:none}
.bank__row>div{display:flex;flex-direction:column;flex:1;min-width:0}
.bank__row>div span:first-child{font-size:12.5px;color:var(--muted)}
.bank__row>div span:last-child{font-weight:600;overflow-wrap:anywhere}
.bank__row .btn-copy{background:var(--surface)}
.pay-note{margin:0;font-size:13.5px;line-height:1.6;color:var(--muted)}

/* ---------- Single project ---------- */
.proj-metric{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proj-metric strong{font-size:clamp(48px,6vw,72px);font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--accent)}
.proj-metric span{font-size:16px;color:var(--muted);max-width:260px;line-height:1.4}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:999px;font-size:14px;font-weight:500;z-index:50;box-shadow:0 10px 30px rgba(0,0,0,.2);transition:opacity .2s,transform .2s}
.toast.is-show{opacity:1;transform:translate(-50%,0)}

@media (max-width:900px){.sidebar,.exp__intro{position:static}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}