/*
Theme Name: Pioneer Web
Theme URI: https://pioneerweb3.com
Author: Masthead
Description: Trail notes
Version: 2.0.0
Text Domain: mast-pioneerweb3
*/
body { margin: 0; background: #f3ecdf; color: #2a2118; font-family: "Albert Sans", sans-serif; }
h1, h2, .name { font-family: "Young Serif", Georgia, serif; }
a { color: #c4552a; text-decoration: none; }
.pw-mast { display: flex; align-items: center; height: 48px; flex-wrap: nowrap; overflow: hidden; gap: 12px; padding: 0 16px; }
.pw-mast .flag { writing-mode: vertical-rl; background: #c4552a; color: #f3ecdf; text-align: center; padding: 0 8px; }
.pw-mast .id { padding: 0 8px; }
.pw-mast .name { font-size: 22px; margin: 0; }
.pw-mast nav ol { margin: 18px 16px 0 0; }
.pw-front { display: grid; grid-template-columns: 64px 1fr; }
.pw-front > .wp-block-query, .pw-front > section, .pw-front > p { grid-column: 2; }
.pw-trail { padding: 16px 28px 64px; }
.pw-trail .story { display: grid; grid-template-columns: 1fr 180px; gap: 16px; border-bottom: 1px solid #e4d8c6; padding: 14px 0; }
.pw-trail .wp-block-post-template, .pw-margin .wp-block-post-template { list-style: none; padding: 0; margin: 0; }
.pw-margin .wp-block-post-template { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.pw-foot { padding: 16px 28px 36px; }
.pw-piece { max-width: 700px; margin: 0 auto; padding: 24px; }
img { width: 100%; height: auto; display: block; }

/* one-line mast */
.pw-mast { display: flex; align-items: center; height: 48px; flex-wrap: nowrap; overflow: hidden; gap: 12px; padding: 0 16px; }
.pw-mast .name { font-size: 22px; margin: 0; line-height: 1; }
.pw-mast div, .pw-mast aside, .pw-mast section, .pw-mast address, .pw-mast blockquote, .pw-mast figure, .pw-mast dl, .pw-mast details { display: flex; align-items: center; flex-wrap: nowrap; gap: 10px; }

/* dense columns */
.pw-front { display: grid; grid-template-columns: 240px 1fr 240px; align-items: start; gap: 16px; max-width: none; width: 100%; margin: 0; }
.pw-front-c .story { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; }
.pw-front-c img { width: 48px; height: 48px; object-fit: cover; }
@media (max-width: 800px) {
.pw-front { grid-template-columns: 1fr; }
}