/* ============================================================
   Piano Trails — public site styles
   Palette: paper #eef2f6 · card #fbfcfd · ink #0d0f1e
   Accent #5c7ca3 / #3e5d80 · type: Newsreader + Space Mono
   ============================================================ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#eef2f6;color:#0d0f1e;font-family:'Newsreader',Georgia,serif;-webkit-font-smoothing:antialiased;line-height:1.5}
img{max-width:100%;display:block}
a{color:#5c7ca3;text-decoration:none}
a:hover{color:#3e5d80}
h1,h2,h3{letter-spacing:-.02em;margin:0}
::selection{background:#5c7ca3;color:#fbfcfd}
input,textarea,button{font-family:inherit}
input:focus,textarea:focus{outline:none}
::placeholder{color:#93a0b2}
.mono{font-family:'Space Mono',monospace}
.muted{color:#7a8598}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 22px}

/* ---------- buttons / chips ---------- */
.btn{display:inline-block;cursor:pointer;border:none;background:#0d0f1e;color:#eef2f6;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:14px 24px;border-radius:999px;transition:background .2s}
.btn:hover{background:#5c7ca3;color:#eef2f6}
.btn.btn-sm{padding:9px 18px;font-size:11px}
.btn.ghost{background:none;border:1px solid #0d0f1e;color:#0d0f1e}
.btn.ghost:hover{background:#0d0f1e;color:#eef2f6}
.chip{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#5c7ca3;background:#fbfcfd;border:1px solid #d7e0e8;padding:4px 9px;border-radius:999px}
.chip-admin{background:#5c7ca3;color:#fbfcfd;border:none;font-size:8px;padding:2px 6px}
.kicker{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#5c7ca3;display:flex;align-items:center;gap:10px}
.kicker .rule{width:26px;height:1.5px;background:#5c7ca3;display:inline-block}
.kicker-lite{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#5c7ca3;margin-bottom:14px}

/* ---------- reading progress ---------- */
.progress-rail{position:fixed;top:0;left:0;right:0;height:36px;z-index:60;pointer-events:none}
.progress-rail>*{position:absolute}
.progress-track,.progress-fill{top:17px;height:0;max-width:1180px;left:50%;transform:translateX(-50%);width:calc(100% - 44px)}
.progress-track{border-top:1.5px dashed #b0bece}
.progress-fill{border-top:2.5px solid #5c7ca3;width:0 !important;left:22px;transform:none;max-width:none}
.progress-plane{top:8px;left:0;font-size:15px;line-height:1;color:#5c7ca3;transform:translateX(-50%)}

/* ---------- masthead ---------- */
.masthead{border-bottom:1px solid #cdd9e2;background:rgba(238,242,246,.92);backdrop-filter:blur(8px);position:sticky;top:0;z-index:40}
.masthead-in{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding-top:15px;padding-bottom:15px}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto;color:#0d0f1e}
.brand img{width:48px;height:48px;border-radius:999px;object-fit:cover;flex-shrink:0}
.brand-text{display:flex;flex-direction:column;gap:3px}
.brand-name{font-size:23px;font-weight:600;letter-spacing:-.02em;line-height:1}
.brand-tag{font-size:9px;letter-spacing:.19em;text-transform:uppercase;color:#7a8598}
.topnav{display:flex;align-items:center;gap:2px;overflow-x:auto;max-width:100%}
.topnav::-webkit-scrollbar{height:0}
.topnav-link{position:relative;padding:9px 13px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#3c465c;white-space:nowrap}
.topnav-link:hover{color:#5c7ca3}
.topnav-link.on::after{content:"";position:absolute;left:13px;right:13px;bottom:3px;height:2px;background:#5c7ca3;border-radius:2px}
.search{display:flex;align-items:center;gap:4px;background:#fbfcfd;border:1px solid #cdd9e2;border-radius:999px;padding:5px 6px 5px 15px}
.search input{border:none;background:none;font-size:14px;color:#0d0f1e;width:140px}
.search button{border:none;cursor:pointer;background:#0d0f1e;color:#eef2f6;width:30px;height:30px;border-radius:999px;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.search button:hover{background:#5c7ca3}

/* ---------- flash ---------- */
.flash-wrap{margin-top:18px;display:flex;flex-direction:column;gap:8px}
.flash{border-radius:6px;padding:12px 16px;font-size:15px;border:1px solid}
.flash-ok{background:#e2edf4;border-color:#bcd3e2;color:#3e5d80}
.flash-err{background:#fbe3d3;border-color:#e7b997;color:#bd4a2b}

/* ---------- cover placeholder ---------- */
.cover{position:relative;background-color:#d7e0e8;background-image:repeating-linear-gradient(135deg,rgba(13,15,30,.06) 0 8px,rgba(13,15,30,0) 8px 18px);border:1px solid #bcc9d6;border-radius:5px;display:flex;align-items:flex-end;padding:16px;overflow:hidden}
.cover-tag{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.05em;color:#586378;background:rgba(251,252,253,.85);padding:5px 9px;border-radius:2px}
.cover.has-img,.card-cover.has-img{padding:0;background-image:none;background-color:#0d0f1e;overflow:hidden}
.cover-img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- hero ---------- */
.hero{padding-top:44px;padding-bottom:8px}
.hero-grid{display:flex;flex-wrap:wrap;gap:36px;margin-top:20px;align-items:stretch}
.hero-cover{flex:1 1 400px;min-height:340px;border-radius:4px}
.hero-copy{flex:1 1 400px;display:flex;flex-direction:column;justify-content:center;gap:18px}
.hero-cat{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#5c7ca3}
.hero-copy h1{font-size:clamp(34px,4.6vw,56px);line-height:1.04;font-weight:600}
.hero-copy h1 a{color:#0d0f1e}
.hero-lede{margin:0;font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:#3c465c}
.hero-meta{font-size:12px;letter-spacing:.04em;color:#7a8598}

/* ---------- home body: feed + sidebar ---------- */
.home-body{padding-top:32px;padding-bottom:72px;display:flex;flex-wrap:wrap;gap:44px}
.feed{flex:3 1 560px;min-width:0}
.sidebar{flex:1 1 260px;max-width:340px;display:flex;flex-direction:column;gap:32px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-bottom:1px solid #cdd9e2;padding-bottom:12px;margin-bottom:26px}
.section-head h2{font-size:22px;font-weight:600}

/* ---------- cards ---------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:26px}
.card{display:flex;flex-direction:column;background:#fbfcfd;border:1px solid #cdd9e2;border-radius:3px;overflow:hidden;height:100%;color:#0d0f1e;transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s,border-color .28s}
.card:hover{transform:translateY(-5px);box-shadow:0 22px 44px -26px rgba(13,15,30,.55);border-color:#5c7ca3}
.card-cover{position:relative;aspect-ratio:3/2;background-color:#dae2ea;background-image:repeating-linear-gradient(135deg,rgba(13,15,30,.055) 0 7px,rgba(13,15,30,0) 7px 16px);display:flex;align-items:flex-end;padding:12px}
.card-cat{position:absolute;top:12px;left:12px}
.card-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.card-body .meta{font-size:11px;letter-spacing:.05em;color:#7a8598}
.card-body h3{font-size:23px;line-height:1.16;font-weight:600;color:#0d0f1e}
.excerpt{margin:0;font-size:15.5px;line-height:1.5;color:#586378;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.read{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#5c7ca3;margin-top:4px}

/* ---------- pager ---------- */
.pager{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:40px}
.pg{min-width:38px;height:38px;padding:0 6px;border-radius:3px;border:1px solid #cdd9e2;background:#fbfcfd;color:#3c465c;font-family:'Space Mono',monospace;font-size:13px;display:inline-flex;align-items:center;justify-content:center}
.pg:hover{border-color:#5c7ca3;color:#5c7ca3}
.pg.on{background:#0d0f1e;border-color:#0d0f1e;color:#eef2f6}

/* ---------- sidebar blocks ---------- */
.side-h{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#5c7ca3;margin-bottom:16px}
.board{display:flex;flex-direction:column}
.board-row{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid #d7e0e8;color:#0d0f1e}
.board-row:hover{opacity:.72}
.board-num{font-size:13px;color:#ffbe98;font-weight:700;line-height:1.3}
.board-title{display:block;font-size:16.5px;font-weight:600;line-height:1.25}
.board-cat{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#7a8598;margin-top:5px}
.bio-card{background:#fbfcfd;border:1px solid #cdd9e2;border-radius:4px;padding:22px}
.bio-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.bio-name{font-size:18px;font-weight:600}
.bio-role{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#7a8598}
.bio-card p{margin:0;font-size:15px;line-height:1.6;color:#464f63}
.avatar{width:52px;height:52px;border-radius:999px;background:#0d0f1e;color:#eef2f6;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;flex-shrink:0}
.avatar-lg{width:52px;height:52px;font-size:19px}
.avatar-xl{width:66px;height:66px;font-size:24px}
.shelf{display:flex;flex-direction:column;gap:16px}
.shelf-row{display:flex;gap:14px;align-items:flex-start;color:#0d0f1e}
.shelf-row:hover{opacity:.8}
.shelf-cover{width:58px;height:82px;object-fit:cover;border-radius:3px;border:1px solid #cdd9e2;flex-shrink:0;box-shadow:0 7px 16px -9px rgba(13,15,30,.55)}
.shelf-ph{background:#dae2ea;background-image:repeating-linear-gradient(135deg,rgba(13,15,30,.06) 0 6px,rgba(13,15,30,0) 6px 13px)}
.shelf-title{display:block;font-size:15.5px;font-weight:600;line-height:1.2}
.shelf-author{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#7a8598;margin-top:5px}
.shelf-link{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#5c7ca3;margin-top:8px}

/* ---------- single post ---------- */
.single{padding:60px 0 72px}
.post{max-width:760px}
.back{display:inline-block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#7a8598;margin-bottom:26px}
.back:hover{color:#5c7ca3}
.post-cat{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#5c7ca3;margin-bottom:16px}
.post-title{font-size:clamp(34px,5vw,58px);line-height:1.03;font-weight:600;margin-bottom:22px}
.byline{display:flex;align-items:center;gap:12px;margin-bottom:34px}
.avatar{width:42px;height:42px}
.byline-meta{font-size:12px;letter-spacing:.03em;color:#586378;line-height:1.5}
.byline-name{color:#0d0f1e}
.post-cover{aspect-ratio:16/9;margin-bottom:40px}
.post-body{font-size:19.5px;line-height:1.78;color:#14192a}
.post-body p{margin:0 0 24px}
.post-body p:first-of-type::first-letter{float:left;font-size:66px;line-height:.78;padding:6px 10px 0 0;font-weight:600;color:#5c7ca3}
.tagrow{display:flex;flex-wrap:wrap;gap:9px;margin:38px 0 8px}
.tagchip{background:#e4ebf1;border:1px solid #cdd9e2;color:#464f63;font-size:11px;letter-spacing:.03em;padding:6px 12px;border-radius:999px}
.tagchip:hover{border-color:#5c7ca3;color:#5c7ca3}
.route-divider{display:flex;align-items:center;gap:12px;margin:36px 0;color:#b0bece}
.route-divider span{flex:1;border-top:1.5px dashed #b0bece}
.route-divider i{font-size:13px;color:#5c7ca3;font-style:normal}
.share{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.share-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#7a8598}
.share-links{display:flex;gap:8px}
.share-links a{font-size:11px;letter-spacing:.05em;color:#3c465c;border:1px solid #cdd9e2;background:#fbfcfd;padding:8px 14px;border-radius:999px}
.share-links a:hover{border-color:#5c7ca3;color:#5c7ca3}

/* ---------- rating ---------- */
.rating-card{margin-top:40px;background:#fbfcfd;border:1px solid #cdd9e2;border-radius:5px;padding:24px;display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.rating-avg{display:flex;align-items:center;gap:18px}
.rating-num{font-size:46px;font-weight:600;line-height:1}
.stars{display:flex;gap:2px;font-size:20px;color:#5c7ca3}
.rating-votes{font-size:11px;margin-top:6px}
.rating-prompt{font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.rate-stars{display:flex;gap:4px}
.rate-stars button{cursor:pointer;background:none;border:none;padding:0;font-size:30px;line-height:1;color:#b0bece;transition:transform .12s,color .12s}
.rate-stars button:hover,.rate-stars button:hover~button{color:#b0bece}
.rate-stars:hover button{color:#5c7ca3}
.rate-stars button:hover~button{color:#b0bece}
.rate-stars button:hover{transform:scale(1.18)}

/* ---------- author box ---------- */
.author-box{margin-top:40px;background:#e4ebf1;border-radius:5px;padding:26px;display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.author-k{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#5c7ca3;margin-bottom:6px}
.author-name{font-size:21px;font-weight:600;margin-bottom:8px}
.author-box p{margin:0;font-size:16px;line-height:1.6;color:#464f63;flex:1 1 300px}

/* ---------- comments ---------- */
.comments{margin-top:52px}
.thread{display:flex;flex-direction:column;gap:22px;margin-bottom:40px}
.comment{border:1px solid #d7e0e8;border-radius:5px;padding:18px 20px;background:#fbfcfd}
.comment-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.comment-name{font-size:16px;font-weight:600}
.comment-date{font-size:11px;color:#93a0b2;margin-left:auto}
.comment-text{margin:0 0 10px;font-size:16.5px;line-height:1.55;color:#262d40}
.cbadge{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:999px}
.cbadge-author{background:#5c7ca3;color:#fbfcfd}
.cbadge-mod{background:#3e5d80;color:#fbfcfd}
.cbadge-reader{background:none;color:#93a0b2;border:1px solid #c4d0dc;padding:2px 8px}
.reply{margin-top:2px}
.reply summary{cursor:pointer;list-style:none;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#5c7ca3;display:inline-block}
.reply summary::-webkit-details-marker{display:none}
.reply-form{margin-top:14px;padding:14px;background:#eef2f6;border:1px solid #d7e0e8;border-radius:5px;display:flex;flex-direction:column;gap:10px}
.reply-comment{margin-top:16px;margin-left:20px;border:none;border-left:2px solid #d7e0e8;border-radius:0;padding:0 0 0 18px;background:none}
.reply-comment .comment-text{font-size:15.5px}
input[type=text],textarea{border:1px solid #cdd9e2;background:#eef2f6;border-radius:4px;padding:11px 14px;font-size:15px;color:#0d0f1e;width:100%;resize:vertical;font-family:'Newsreader',serif}
.reply-form input,.reply-form textarea{background:#fbfcfd;font-size:14px}
.comment-form{background:#fbfcfd;border:1px solid #cdd9e2;border-radius:5px;padding:24px;display:flex;flex-direction:column;gap:12px}
.form-h{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#5c7ca3;margin-bottom:4px}
.form-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:4px}
.form-foot .muted{font-size:10.5px}

/* ---------- related ---------- */
.related{margin-top:64px}
.related-head{display:flex;align-items:center;gap:12px;color:#5c7ca3;margin-bottom:28px;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.rule-fill{flex:1;border-top:1.5px dashed #b0bece}

/* ---------- listing / content / 404 ---------- */
.listing{padding:52px 22px 72px;min-height:60vh}
.listing-head{max-width:720px;margin-bottom:40px}
.listing-head h1{font-size:clamp(32px,4.4vw,50px);line-height:1.05;font-weight:600;margin-bottom:14px}
.listing-desc{margin:0;font-size:18px;line-height:1.55;color:#464f63}
.content-page{padding:56px 22px 72px;min-height:60vh}
.content-page h1{font-size:clamp(34px,4.8vw,54px);line-height:1.04;font-weight:600;margin-bottom:30px}
.content-body{font-size:18px;line-height:1.72;color:#14192a}
.content-body p{margin:0 0 22px}
.notfound{padding:96px 22px;text-align:center;min-height:60vh}
.nf-plane{font-size:64px;color:#b0bece;margin-bottom:10px}
.notfound h1{font-size:clamp(34px,5vw,52px);font-weight:600;margin-bottom:16px}
.notfound p{margin:0 auto 30px;font-size:19px;line-height:1.6;color:#464f63;max-width:440px}
.empty{border:1.5px dashed #b0bece;border-radius:6px;padding:64px 24px;text-align:center;background:#fbfcfd}
.empty.small{padding:36px 20px;margin-bottom:32px}
.empty-plane{font-size:40px;color:#b0bece;margin-bottom:8px}
.empty-k{font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.empty p{margin:0 auto 22px;font-size:18px;color:#464f63;max-width:400px}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid #cdd9e2;background:#e4ebf1;margin-top:20px}
.footer-grid{padding:52px 22px 32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:36px}
.footer-brand{grid-column:1;min-width:200px}
.footer-logo{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.footer-logo img{width:40px;height:40px;border-radius:999px;object-fit:cover}
.footer-brand p{margin:0;font-size:14.5px;line-height:1.6;color:#586378;max-width:260px}
.footer-h{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#7a8598;margin-bottom:14px}
.footer-link{display:flex;align-items:center;gap:7px;font-size:14.5px;color:#3c465c;padding:4px 0}
.footer-link:hover{color:#5c7ca3}
.footer-base{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;padding:18px 22px;border-top:1px solid #cdd9e2;font-size:11px;letter-spacing:.03em;color:#7a8598}