/* ==========================================================================
   hajonaplo-theme — Main Stylesheet
   Kavehaz (Budapester Kaffeehaus) Design
   CSS-Prefix: hn-
   Mobile-first, no framework
   ========================================================================== */

/* ==========================================================================
   1. Custom Properties
   ========================================================================== */
:root {
    /* Farben */
    --hn-olive: #3D3B30;
    --hn-olive-light: #4A483C;
    --hn-messing: #B8960C;
    --hn-messing-light: #D4AF37;
    --hn-messing-pale: #F5EED5;
    --hn-paper: #F2EDE4;
    --hn-paper-dark: #E5DDD0;
    --hn-white: #FFFFFF;
    --hn-text: #1A1A1A;
    --hn-text-light: #6B6560;
    --hn-text-muted: #8A8480;
    --hn-border: #D5CFC5;

    /* Fonts */
    --hn-font-serif: 'Lora', Georgia, 'Times New Roman', serif;
    --hn-font-sans: 'Fira Sans', 'Segoe UI', Tahoma, sans-serif;

    /* Spacing */
    --hn-gap: 1.5rem;
    --hn-gap-lg: 2.5rem;
    --hn-max-width: 1140px;
    --hn-sidebar-width: 280px;

    /* Transitions */
    --hn-transition: 0.2s ease;
}

/* ==========================================================================
   2. Reset & Base
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--hn-font-sans);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--hn-text);
    background-color: var(--hn-paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--hn-messing);
    text-decoration: none;
    transition: color var(--hn-transition);
}

a:hover,
a:focus {
    color: var(--hn-olive);
}

ul,
ol {
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

/* Utility — lock scroll when mobile nav is open */
.hn-no-scroll {
    overflow: hidden;
}

/* ==========================================================================
   3. Typography
   ========================================================================== */
h1, h2, h3, h4 {
    font-family: var(--hn-font-serif);
    font-weight: 700;
    line-height: 1.25;
    color: var(--hn-text);
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }

/* Prose — article body content */

.hn-prose {
    line-height: 1.75;
    max-width: 720px;
    font-size: 1rem;
}

.hn-prose p {
    margin-bottom: 1.25em;
}

.hn-prose h2,
.hn-prose h3 {
    margin-top: 2em;
    margin-bottom: 0.75em;
}

.hn-prose blockquote {
    border-left: 3px solid var(--hn-messing);
    padding-left: 1.5rem;
    margin: 1.5em 0;
    font-style: italic;
    font-family: var(--hn-font-serif);
    color: var(--hn-text-light);
}

.hn-prose img {
    max-width: 100%;
    margin: 1.5em 0;
    border-radius: 2px;
}

.hn-prose a {
    color: var(--hn-messing);
    text-decoration: none;
}

.hn-prose a:hover {
    text-decoration: underline;
}

.hn-prose ul,
.hn-prose ol {
    margin: 1em 0 1.25em 1.5em;
}

.hn-prose ul {
    list-style: disc;
}

.hn-prose ol {
    list-style: decimal;
}

.hn-prose li {
    margin-bottom: 0.4em;
}

.hn-prose figure {
    margin: 1.5em 0;
}

.hn-prose figcaption {
    font-size: 0.85rem;
    color: var(--hn-text-muted);
    margin-top: 0.5rem;
}

/* ==========================================================================
   4. Layout Container
   ========================================================================== */
.hn-container {
    width: 100%;
    max-width: var(--hn-max-width);
    margin: 0 auto;
    padding: 0 1rem;
}

/* ==========================================================================
   5. Header
   ========================================================================== */
.hn-header {
    background: var(--hn-olive);
    padding: 0;
    position: relative;
    z-index: 100;
}

.hn-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--hn-max-width);
    margin: 0 auto;
    padding: 0.75rem 1rem;
}

.hn-header__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.hn-header__logo img {
    height: 40px;
    width: auto;
}

.hn-header__logo a {
    display: flex;
    align-items: center;
}

/* ==========================================================================
   6. Navigation
   ========================================================================== */

/* --- Desktop: hidden by default (mobile-first) --- */
.hn-nav {
    display: none;
}

.hn-nav__list {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.hn-nav__link {
    color: var(--hn-paper);
    font-size: 0.95rem;
    font-weight: 400;
    padding: 0.5rem 0;
    border-bottom: 2px solid transparent;
    transition: color var(--hn-transition), border-color var(--hn-transition);
}

.hn-nav__link:hover,
.hn-nav__link:focus {
    color: var(--hn-messing);
}

.hn-nav__link--active {
    border-bottom-color: var(--hn-messing);
    color: var(--hn-messing-light);
}

/* --- Hamburger --- */
.hn-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 28px;
    height: 28px;
    padding: 0;
    z-index: 110;
}

.hn-hamburger__bar {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--hn-paper);
    border-radius: 1px;
    transition: transform var(--hn-transition), opacity var(--hn-transition);
}

.hn-hamburger--active .hn-hamburger__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hn-hamburger--active .hn-hamburger__bar:nth-child(2) {
    opacity: 0;
}

.hn-hamburger--active .hn-hamburger__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* --- Mobile overlay --- */
.hn-nav--open {
    display: flex;
    position: fixed;
    inset: 0;
    background: var(--hn-olive);
    z-index: 105;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hn-nav--open .hn-nav__list {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
}

.hn-nav--open .hn-nav__link {
    font-size: 1.25rem;
}

/* ==========================================================================
   7. Featured Section
   ========================================================================== */
.hn-featured {
    padding: var(--hn-gap-lg) 0;
}

.hn-featured__inner {
    display: flex;
    flex-direction: column;
    gap: var(--hn-gap);
}

.hn-featured__image {
    width: 100%;
}

.hn-featured__image img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 2px;
}

.hn-featured__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hn-featured__rovat {
    color: var(--hn-messing);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.hn-featured__title {
    font-family: var(--hn-font-serif);
    font-size: 1.75rem;
    line-height: 1.25;
    margin-bottom: 0.75rem;
}

.hn-featured__title a {
    color: var(--hn-text);
}

.hn-featured__title a:hover {
    color: var(--hn-messing);
}

.hn-featured__excerpt {
    color: var(--hn-text-light);
    font-size: 0.95rem;
    margin-bottom: 1rem;
    line-height: 1.6;
}

.hn-featured__cta {
    color: var(--hn-messing);
    font-weight: 500;
    font-size: 0.9rem;
}

.hn-featured__cta:hover {
    text-decoration: underline;
}

/* ==========================================================================
   8. Content Wrap (Main + Sidebar)
   ========================================================================== */
.hn-content-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--hn-gap-lg);
    max-width: var(--hn-max-width);
    margin: 0 auto;
    padding: 0 1rem var(--hn-gap-lg);
}

.hn-main-col {
    flex: 1;
    min-width: 0;
}

/* ==========================================================================
   9. Section
   ========================================================================== */
.hn-section {
    margin-bottom: var(--hn-gap-lg);
}

.hn-section__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-bottom: 2px solid var(--hn-messing);
    padding-bottom: 0.5rem;
    margin-bottom: var(--hn-gap);
}

.hn-section__title {
    font-family: var(--hn-font-serif);
    font-size: 1.25rem;
    font-weight: 700;
}

.hn-section__more {
    color: var(--hn-messing);
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
}

.hn-section__more:hover {
    text-decoration: underline;
}

/* ==========================================================================
   10. Card Grid
   ========================================================================== */
.hn-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--hn-gap);
}

/* ==========================================================================
   11. Card
   ========================================================================== */
.hn-card {
    background: var(--hn-white);
    border-radius: 2px;
    overflow: hidden;
}

.hn-card__thumb img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
}

.hn-card__body {
    padding: 1rem;
}

.hn-card__rovat {
    color: var(--hn-messing);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.35rem;
}

.hn-card__date {
    color: var(--hn-text-muted);
    font-size: 0.8rem;
    margin-bottom: 0.35rem;
}

.hn-card__title {
    font-family: var(--hn-font-serif);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.5rem;
}

.hn-card__title a {
    color: var(--hn-text);
    transition: color var(--hn-transition);
}

.hn-card__title a:hover {
    color: var(--hn-messing);
}

.hn-card__excerpt {
    color: var(--hn-text-light);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* ==========================================================================
   12. List Item
   ========================================================================== */
.hn-list-item {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--hn-border);
}

.hn-list-item:last-child {
    border-bottom: none;
}

.hn-list-item__thumb {
    flex-shrink: 0;
    width: 120px;
}

.hn-list-item__thumb img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 2px;
}

.hn-list-item__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hn-list-item__rovat {
    color: var(--hn-messing);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.hn-list-item__title {
    font-family: var(--hn-font-serif);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.25rem;
}

.hn-list-item__title a {
    color: var(--hn-text);
}

.hn-list-item__title a:hover {
    color: var(--hn-messing);
}

.hn-list-item__date {
    color: var(--hn-text-muted);
    font-size: 0.75rem;
}

/* ==========================================================================
   13. Article (Single Post)
   ========================================================================== */
.hn-article__header {
    margin-bottom: 2rem;
}

.hn-article__rovat {
    color: var(--hn-messing);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    display: inline-block;
}

.hn-article__title {
    font-family: var(--hn-font-serif);
    font-size: 2rem;
    line-height: 1.2;
    margin-bottom: 0.75rem;
}

.hn-article__subtitle {
    font-style: italic;
    color: var(--hn-text-light);
    border-left: 3px solid var(--hn-messing);
    padding-left: 1rem;
    margin-bottom: 1rem;
    font-size: 1.05rem;
    line-height: 1.5;
}

.hn-article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    color: var(--hn-text-muted);
    font-size: 0.85rem;
}

.hn-article__hero {
    margin: 1.5rem 0;
    border-radius: 2px;
    overflow: hidden;
}

.hn-article__hero img {
    width: 100%;
    display: block;
}

/* ==========================================================================
   14. Breadcrumb
   ========================================================================== */
.hn-breadcrumb {
    font-size: 0.85rem;
    color: var(--hn-text-muted);
    padding: 1rem 0;
}

.hn-breadcrumb a {
    color: var(--hn-text-muted);
}

.hn-breadcrumb a:hover {
    color: var(--hn-messing);
}

.hn-breadcrumb__sep {
    margin: 0 0.4rem;
}

/* ==========================================================================
   15. Author Box
   ========================================================================== */
.hn-author-box {
    border-top: 1px solid var(--hn-border);
    padding-top: 1.5rem;
    margin-top: 2rem;
}

.hn-author-box__name {
    font-family: var(--hn-font-serif);
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.hn-author-box__bio {
    color: var(--hn-text-light);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* ==========================================================================
   16. Related Posts
   ========================================================================== */
.hn-related {
    margin-top: var(--hn-gap-lg);
    padding-top: var(--hn-gap-lg);
    border-top: 1px solid var(--hn-border);
}

.hn-related__title {
    font-family: var(--hn-font-serif);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: var(--hn-gap);
}

.hn-related__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--hn-gap);
}

/* ==========================================================================
   17. Sidebar
   ========================================================================== */
.hn-sidebar {
    width: 100%;
}

.hn-sidebar__block {
    margin-bottom: 2.25rem;
    padding-bottom: 2.25rem;
    border-bottom: 1px solid var(--hn-border);
}

.hn-sidebar__block:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.hn-sidebar__title {
    font-family: var(--hn-font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--hn-text-muted);
    margin-bottom: 1rem;
}

.hn-sidebar__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hn-sidebar__list li a {
    font-family: var(--hn-font-serif);
    font-size: 1rem;
    color: var(--hn-text);
    text-decoration: none;
    transition: color var(--hn-transition);
}

.hn-sidebar__list li a:hover {
    color: var(--hn-messing);
}

.hn-sidebar__recent {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hn-sidebar__recent-item a {
    font-family: var(--hn-font-serif);
    font-size: 0.9rem;
    color: var(--hn-text);
    text-decoration: none;
    line-height: 1.4;
    transition: color var(--hn-transition);
}

.hn-sidebar__recent-item a:hover {
    color: var(--hn-messing);
}

.hn-idezet {
    border-left: 3px solid var(--hn-messing);
    padding-left: 1rem;
    margin: 0;
}

.hn-idezet p {
    font-family: var(--hn-font-serif);
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--hn-text);
}

.hn-idezet__forras {
    display: block;
    margin-top: 0.6rem;
    font-family: var(--hn-font-sans);
    font-size: 0.8rem;
    color: var(--hn-text-muted);
    font-style: normal;
}

/* ==========================================================================
   18. Archive Banner
   ========================================================================== */
.hn-archive-banner {
    background: var(--hn-olive);
    color: var(--hn-paper);
    padding: 3rem 0;
}

.hn-archive-banner__title {
    font-family: var(--hn-font-serif);
    font-size: 2rem;
    color: var(--hn-paper);
}

.hn-archive-banner__desc {
    color: var(--hn-paper-dark);
    font-size: 0.95rem;
    margin-top: 0.5rem;
    max-width: 600px;
}

/* ==========================================================================
   19. Footer
   ========================================================================== */
.hn-footer {
    background: var(--hn-olive);
    color: var(--hn-paper);
    padding: var(--hn-gap-lg) 0 0;
    margin-top: var(--hn-gap-lg);
}

.hn-footer .hn-container {
    max-width: var(--hn-max-width);
    margin: 0 auto;
    padding: 0 1rem;
}

.hn-footer__top {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    align-items: flex-start;
}

.hn-footer-brand {
    flex: 1 1 240px;
}

.hn-footer-brand__img {
    height: 36px;
    width: auto;
}

.hn-footer-brand__desc {
    color: var(--hn-paper-dark);
    font-size: 0.875rem;
    margin-top: 0.75rem;
    line-height: 1.6;
    max-width: 280px;
}

.hn-footer-col {
    flex: 0 0 auto;
}

.hn-footer-col__title {
    font-family: var(--hn-font-serif);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--hn-paper);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hn-footer-col__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
}

.hn-footer-col__list li a {
    color: var(--hn-paper-dark);
    font-size: 0.9rem;
    text-decoration: none;
    transition: color var(--hn-transition);
}

.hn-footer-col__list li a:hover {
    color: var(--hn-messing);
}

/* Jogi col: vertical stack */
.hn-footer-col--jogi .hn-footer-col__list {
    flex-direction: column;
    gap: 0.25rem;
}

.hn-footer__copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.5rem 1rem;
    margin-top: var(--hn-gap-lg);
    font-size: 0.85rem;
    color: var(--hn-paper-dark);
    text-align: center;
}

/* legacy — kept for backward compat */
.hn-footer__inner { display: grid; grid-template-columns: 1fr; gap: var(--hn-gap-lg); }
.hn-footer__brand-desc { color: var(--hn-paper-dark); font-size: 0.9rem; margin-top: 0.75rem; line-height: 1.6; }
.hn-footer__heading { font-family: var(--hn-font-serif); font-size: 1rem; font-weight: 700; color: var(--hn-paper); margin-bottom: 1rem; }
.hn-footer__link { display: block; color: var(--hn-paper-dark); font-size: 0.9rem; padding: 0.25rem 0; transition: color var(--hn-transition); }
.hn-footer__link:hover { color: var(--hn-messing); }

/* ==========================================================================
   20. Pagination
   ========================================================================== */
.hn-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: var(--hn-gap-lg) 0;
}

.hn-pagination__link,
.hn-pagination__current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.5rem;
    font-size: 0.9rem;
    border-radius: 2px;
    transition: background var(--hn-transition), color var(--hn-transition);
}

.hn-pagination__link {
    border: 1px solid var(--hn-border);
    color: var(--hn-text);
    background: var(--hn-white);
}

.hn-pagination__link:hover {
    background: var(--hn-messing-pale);
    color: var(--hn-messing);
    border-color: var(--hn-messing);
}

.hn-pagination__current {
    background: var(--hn-messing);
    color: var(--hn-white);
    border: 1px solid var(--hn-messing);
    font-weight: 600;
}

/* ==========================================================================
   21. Horizontal Rule
   ========================================================================== */
.hn-hr {
    border: none;
    height: 1px;
    background: var(--hn-border);
    margin: var(--hn-gap-lg) 0;
}

/* ==========================================================================
   22. 404 Page
   ========================================================================== */
.hn-404 {
    text-align: center;
    padding: 4rem 0;
}

.hn-404__title {
    font-family: var(--hn-font-serif);
    font-size: 4rem;
    color: var(--hn-messing);
    margin-bottom: 1rem;
}

.hn-404__text {
    color: var(--hn-text-light);
    font-size: 1.1rem;
    margin-bottom: 2rem;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.hn-404__link {
    display: inline-block;
    color: var(--hn-messing);
    font-weight: 500;
    border: 1px solid var(--hn-messing);
    padding: 0.6rem 1.5rem;
    border-radius: 2px;
    transition: background var(--hn-transition), color var(--hn-transition);
}

.hn-404__link:hover {
    background: var(--hn-messing);
    color: var(--hn-white);
}

/* ==========================================================================
   23. WordPress Specific
   ========================================================================== */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute;
    height: 1px;
    width: 1px;
    overflow: hidden;
    word-wrap: normal;
}

.screen-reader-text:focus {
    background-color: var(--hn-white);
    clip: auto;
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    height: auto;
    padding: 1rem;
    width: auto;
    z-index: 100000;
}

/* ==========================================================================
   24. Responsive — Tablet (768px+)
   ========================================================================== */
@media (min-width: 768px) {

    .hn-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hn-related__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hn-featured__inner {
        flex-direction: row;
    }

    .hn-featured__image {
        width: 60%;
    }

    .hn-featured__body {
        width: 40%;
        padding-left: var(--hn-gap);
    }

    .hn-featured__title {
        font-size: 2rem;
    }

    .hn-article__title {
        font-size: 2.5rem;
    }

    .hn-list-item__thumb {
        width: 140px;
    }

    .hn-footer__inner {
        grid-template-columns: 2fr 1fr 1fr;
    }
}

/* ==========================================================================
   25. Responsive — Desktop (960px+)
   ========================================================================== */
@media (min-width: 960px) {

    /* Show desktop nav, hide hamburger */
    .hn-nav {
        display: flex;
    }

    .hn-hamburger {
        display: none;
    }

    /* Layout with sidebar */
    .hn-content-wrap {
        flex-direction: row;
    }

    .hn-sidebar {
        width: var(--hn-sidebar-width);
        flex-shrink: 0;
        position: sticky;
        top: 2rem;
        align-self: flex-start;
    }

    .hn-related__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .hn-container {
        padding: 0 1.5rem;
    }
}

/* ==========================================================================
   26. Responsive — Wide (1200px+)
   ========================================================================== */
@media (min-width: 1200px) {

    h1 { font-size: 2.5rem; }

    .hn-featured__title {
        font-size: 2.25rem;
    }

    .hn-article__title {
        font-size: 2.75rem;
    }
}

/* ==========================================================================
   27. About Strip
   ========================================================================== */
.hn-about-strip {
    background: var(--hn-messing-pale);
    border-top: 2px solid var(--hn-messing);
    border-bottom: 2px solid var(--hn-messing);
    padding: 3rem 0;
    margin-top: 3rem;
}

.hn-about-strip__inner {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
}

.hn-about-strip__title {
    font-family: var(--hn-font-serif);
    font-size: 1.5rem;
    color: var(--hn-olive);
    margin-bottom: 0.75rem;
}

.hn-about-strip__desc {
    color: var(--hn-text);
    font-size: 1rem;
    line-height: 1.75;
    max-width: 68ch;
}

.hn-about-strip__link {
    display: inline-block;
    color: var(--hn-olive);
    font-family: var(--hn-font-sans);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    border: 2px solid var(--hn-olive);
    padding: 0.6rem 1.25rem;
    transition: background var(--hn-transition), color var(--hn-transition);
    white-space: nowrap;
}

.hn-about-strip__link:hover {
    background: var(--hn-olive);
    color: var(--hn-paper);
}

@media (min-width: 720px) {
    .hn-about-strip__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .hn-about-strip__cta {
        flex-shrink: 0;
    }
}

/* ==========================================================================
   28. Pillar Section
   ========================================================================== */
.hn-pillar-section {
    background: var(--hn-olive);
    padding: 4rem 0;
}

.hn-pillar-section__title {
    font-family: var(--hn-font-serif);
    font-size: 1.5rem;
    color: var(--hn-paper);
    margin-bottom: 2rem;
    text-align: center;
    letter-spacing: 0.02em;
}

.hn-pillar-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}

.hn-pillar-card {
    background: var(--hn-olive-light);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.hn-pillar-card__image {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.hn-pillar-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.hn-pillar-card:hover .hn-pillar-card__image img {
    transform: scale(1.04);
}

.hn-pillar-card__body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.hn-pillar-card__rovat {
    font-family: var(--hn-font-sans);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--hn-messing);
    font-weight: 600;
}

.hn-pillar-card__title {
    font-family: var(--hn-font-serif);
    font-size: 1.1rem;
    line-height: 1.4;
    margin: 0;
}

.hn-pillar-card__title a {
    color: var(--hn-paper);
    text-decoration: none;
}

.hn-pillar-card__title a:hover {
    color: var(--hn-messing-light);
}

.hn-pillar-card__excerpt {
    font-size: 0.9rem;
    color: var(--hn-paper-dark);
    line-height: 1.6;
    flex: 1;
}

.hn-pillar-card__cta {
    font-family: var(--hn-font-sans);
    font-size: 0.85rem;
    color: var(--hn-messing);
    text-decoration: none;
    font-weight: 600;
    margin-top: 0.5rem;
    align-self: flex-start;
}

.hn-pillar-card__cta:hover {
    color: var(--hn-messing-light);
    text-decoration: underline;
}

@media (min-width: 720px) {
    .hn-pillar-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}