@font-face { font-family: 'FS';          font-weight: 400; font-display: swap; src: url(/css/FiraSans-Regular.woff2) format('woff2'); }
@font-face { font-family: 'FS';          font-weight: 700; font-display: swap; src: url(/css/FiraSans-Bold.woff2) format('woff2'); }
@font-face { font-family: 'Merriweather'; font-weight: 400; font-display: swap; src: url(/css/Merriweather-Regular.woff2) format('woff2'); }
@font-face { font-family: 'Merriweather'; font-weight: 700; font-display: swap; src: url(/css/Merriweather-Bold.woff2) format('woff2'); }

*, *::before, *::after { box-sizing: border-box; }
html, body  { margin: 0; padding: 0; }
body        { font: 1rem/1.5 'FS', sans-serif; }
img         { display: block; max-width: 100%; height: auto; border-radius: 5px; }
hr          { margin: 20px 0; padding: 0; border: 0; border-top: 1px solid #000; }
a           { color: #003775; text-decoration: none; }
a:hover     { text-decoration: underline; }

h1, h2, h3, h4, h5, h6, .pt {
    font-family: 'Merriweather', serif;
    font-weight: 700;
    text-transform: uppercase;
}
h1, h2, h3, h4, h5, h6 { font-size: 1rem; margin: 20px 0; padding: 0; }
h1 { font-size: 1.5rem; }
.pt { display: block; font-size: 1rem; margin: 0 0 10px; }

p             { margin: 0 0 10px; }
p:last-child  { margin: 0; }
ul, ol        { margin: 0 0 10px; padding-left: 20px; }
li            { margin-bottom: 5px; }

.w  { max-width: 800px; margin: 0 auto; padding: 0 20px; }
.pg { padding-bottom: 40px; }

.topbar       { position: sticky; top: 0; background: #fff; border-bottom: 1px solid; padding: 10px 0; z-index: 10; }
.topbar .w    { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.brand        { display: inline-flex; align-items: center; gap: 10px; font-family: 'Merriweather', serif; font-weight: 700; }
.brand img    { width: 1.3rem; height: 1.3rem; }

/* post card */
.po           { display: flex; gap: 20px; align-items: start; }
.pi           { flex: 0 0 250px; overflow: hidden; }
.pi img       { width: 100%; }
.pn           { flex: 1; min-width: 0; }
.hashtag      { display: inline-block; }
.card-desc    { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* article */
.ph           { margin-bottom: 20px; overflow: hidden; }
.ph img       { width: 100%; }
.art-meta     { display: flex; flex-wrap: wrap; gap: 20px; align-items: baseline; justify-content: space-between; margin-bottom: 20px; }

/* sections */
.sec               { margin-top: 20px; }
.sec > :first-child { margin-top: 0; }
.sec > :last-child  { margin-bottom: 0; }
.breadcrumbs       { margin-top: 20px; }
.filter-bar,
.seo-intro         { margin: 20px 0; }
.seo-outro         { margin-top: 40px; }
.empty             { padding: 40px 0; text-align: center; }
.pager             { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; margin-top: 40px; }
.ft                { margin-bottom: 40px; padding: 20px 0; }

@media (max-width: 600px) {
    h1                  { font-size: 1.2rem; }
    .po                 { flex-direction: column; align-items: stretch; }
    .pi                 { flex: 0 0 auto; width: 100%; }
    .table-wrap         { overflow-x: auto; }
}

/* admin */
body.admin .w        { padding: 20px; }
body.admin nav       { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 20px; }
body.admin table     { width: 100%; border-collapse: collapse; }
body.admin th,
body.admin td        { padding: 5px 10px; border: 1px solid; text-align: left; vertical-align: top; }
body.admin input,
body.admin select,
body.admin textarea  { font: inherit; padding: 0 5px; vertical-align: middle; }
body.admin input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]),
body.admin select,
body.admin textarea  { width: 100%; }
body.admin input[type="checkbox"] { padding: 0; }
body.admin button    { background: none; border: 0; padding: 0; font: inherit; color: #003775; cursor: pointer; }
body.admin button:hover { text-decoration: underline; }

.table-wrap   { overflow-x: visible; }
.fg           { margin-bottom: 20px; }
.fg label     { display: block; margin-bottom: 5px; }
.inp          { width: 100%; padding: 0 5px; }
.fa           { margin-top: 10px; }
.fa a         { margin-left: 10px; }
.al           { padding: 10px 20px; margin-bottom: 20px; border: 1px solid; }
.cron-form    { margin: 20px 0; }
.fi           { display: inline-block; margin: 0; }
.filter-form  { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.btn-link     { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: inherit; }
.danger       { color: #c00; }
.al2          { max-width: 300px; margin: 40px auto; }
.al2 h1       { text-align: center; margin: 0 0 20px; }