/* Public site: Elegant + Compact. Colours/fonts come from theme.css. */
.site-header { background: none; }
.site-nav { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; padding: 15px 0 5px; }
.site-nav nav { display: flex; justify-content: center; gap: 48px; }
.site-nav a { color: var(--text); display: inline-flex; align-items: center; min-height: 44px; text-decoration: none;
  text-transform: uppercase; letter-spacing: .2em; font-size: 11px; font-weight: 600; }
.site-nav a:hover { color: var(--primary); }
.site-nav .site-name { min-height: 0; font-size: 22px; font-weight: 700; letter-spacing: .32em; }

/* hero: framed, centred, no image */
.hero-wrap { margin: 10px 28px 0; border: 1px solid var(--border-strong); background: var(--bg); padding: 50px 0; margin-bottom: 28px; }
.hero { display: block; text-align: center; }
.hero-media { display: none; }
.eyebrow { display: inline-block; color: var(--primary); font-size: 11px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; }
.hero h1 { font-size: 2.6rem; line-height: 1.1; margin: 14px 0; }
.hero p { font-size: 1.05rem; color: var(--muted); max-width: 34em; margin: 0 auto 12px; }

/* outlined, uppercase buttons on the public site */
main .btn, .hero .btn {
  background: transparent; color: var(--text); border: 1px solid var(--text);
  text-transform: uppercase; letter-spacing: .2em; font-size: 11px; font-weight: 600;
  height: 46px; line-height: 44px; padding: 0 32px;
}
main .btn:hover, main .btn:focus, .hero .btn:hover, .hero .btn:focus { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

/* intro cards on home (compact rows, hairline dividers) */
.cards { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0 0 32px; }
.card-s { padding: 14px 18px; display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; align-items: center; text-align: left; }
.card-s + .card-s { border-top: 1px solid var(--border); }
.card-s .icon { grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--accent); color: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem; }
.card-s h3 { font-size: 1.1rem; margin: 0 0 2px; }
.card-s p { margin: 0; color: var(--muted); }

/* posts */
.page-title { font-size: 2rem; margin: 24px 0 12px; text-align: center; display: block; }
.page-title::after { content: ""; display: block; width: 1px; height: 40px; background: var(--accent); margin: 18px auto 0; }
#list { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 16px; }
.post { position: relative; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: var(--r); padding: 14px 20px 12px; transition: border-color .12s; }
.post:hover, .post:focus-within { border-color: var(--accent); }
.post p { margin: 4px 0 8px; }
.post h2 a, .post h3 a { color: inherit; text-decoration: none; }
.stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.preview { max-height: 9em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.preview > :first-child { margin-top: 0; }
.post .more { display: inline-block; margin-top: 6px; font-weight: 600; color: var(--primary); }
.post:hover .more { text-decoration: underline; }
.post-detail { margin: 8px auto 24px; max-width: 46em; }
.post-detail .body { font-size: 1.05rem; }
.post-detail h1 { font-size: 2rem; margin: 0 0 4px; }
.back { display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px; font-weight: 500; }
.post h2 { font-size: 1.35rem; margin: 0 0 2px; }
.meta { color: var(--muted); font-size: .85rem; margin-bottom: 6px; }
.meta .pill { display: inline-block; background: var(--fun-1); color: var(--primary); border-radius: 999px; padding: 0 10px; margin-left: 4px; font-size: .75rem; line-height: 20px; }
.body { overflow-wrap: anywhere; }
.post h3 { font-size: 1.2rem; margin: 0 0 2px; }
.body h2 { font-size: 1.1rem; margin: 10px 0 4px; }
.body p, .body ul { margin: 6px 0; }
.body ul { padding-left: 1.2em; }
.body li { list-style: disc; }
.body img { max-width: 100%; height: auto; border-radius: var(--r); }
.body .ql-align-center { text-align: center; }
.body .ql-align-right { text-align: right; }
.body .ql-align-justify { text-align: justify; }
.body iframe.ql-video { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--r); margin: 8px 0; }
.body blockquote { margin: 8px 0; padding: 6px 14px; border-left: 2px solid var(--accent); color: var(--muted); font-style: italic; }
/* home: latest */
.latest { margin-bottom: 32px; text-align: center; }
.latest .post, .latest .status { text-align: left; }
.section-title { font-size: 1.6rem; margin: 0 0 12px; }
.section-title::after { content: ""; display: block; width: 1px; height: 40px; background: var(--accent); margin: 14px auto 0; }
.section-title a { color: inherit; text-decoration: none; }
.section-title a:hover { color: var(--primary); }
.latest-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 16px; }
.search-bar { margin-bottom: 8px; }
#search-panel { background: var(--hero-bg); border-radius: var(--r); padding: 8px 16px 12px; margin-top: 10px; }
#search-panel .row { margin-bottom: 0; }
.tag-filters { margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.tag-filters .chip { margin: 0; }
.status { color: var(--muted); margin: 8px 0; }
.spinner-text { color: var(--muted); margin-left: 8px; }

/* footer: light, centred, hairline top */
.site-footer { background: var(--bg); color: var(--text); border-top: 1px solid var(--border); text-align: center; padding: 20px 28px; margin-top: 32px; width: 100%; }

@media (max-width: 700px) {
  .hero-wrap { margin-left: 12px; margin-right: 12px; padding: 36px 0; }
  .hero h1 { font-size: 2rem; }
  .site-nav nav { gap: 28px; }
}
@media (min-width: 993px) {
  .latest-grid { grid-template-columns: repeat(3, 1fr); }
  #list { grid-template-columns: 1fr 1fr; }
}