/* ==========================================================================
   Between the Houses — main stylesheet.
   Concept: Tel Aviv's White City. Flat Bauhaus colour panels, one rounded
   "balcony" corner, ribbon-window stripes, the sun between two houses.
   RTL-first, logical properties throughout. Prefix: bh-
   ========================================================================== */

:root {
    --bh-teal: #0A7B83;
    --bh-teal-deep: #08636A;
    --bh-teal-dark: #064A50;
    --bh-teal-tint: #E2F0EF;
    --bh-teal-light: #7FD0D4;
    --bh-coral: #F25F5C;
    --bh-coral-text: #B8312F;
    --bh-coral-tint: #FCE8E7;
    --bh-ink: #1B2326;
    --bh-ink-2: #2A3437;
    --bh-muted: #5B6466;
    --bh-plaster: #F6F3EC;
    --bh-sand: #ECE5D6;
    --bh-white: #FFFFFF;
    --bh-line: #DAD3C4;

    --bh-f-body: "Lunasima", "Arial Hebrew", "Segoe UI", Arial, sans-serif;
    --bh-f-title: "Bona Nova", "Frank Ruhl Libre", "David", Georgia, serif;
    --bh-f-logo: "Playpen Sans Hebrew", "Lunasima", Arial, sans-serif;

    --bh-rail: 292px;
    --bh-bar: 64px;
    --bh-gutter: clamp(16px, 4vw, 56px);
    --bh-max: 1240px;
    --bh-balcony: 56px;
    --bh-focus: var(--bh-ink);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--bh-bar) + 16px);
}

body {
    margin: 0;
    background: var(--bh-plaster);
    color: var(--bh-ink);
    font-family: var(--bh-f-body);
    font-size: 1.0625rem;
    line-height: 1.75;
    text-rendering: optimizeLegibility;
    overflow-wrap: break-word;
}

img, svg { max-width: 100%; height: auto; display: block; }
svg.bh-ico { display: inline-block; flex: none; }

a { color: var(--bh-teal-deep); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--bh-ink); }

h1, h2, h3, h4 {
    font-family: var(--bh-f-title);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 .5em;
    color: inherit;
}

p { margin: 0 0 1em; }

:focus-visible {
    outline: 3px solid var(--bh-focus);
    outline-offset: 3px;
}

.bh-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; margin: -1px; padding: 0; border: 0;
}

.bh-skip {
    position: absolute;
    inset-inline-start: 12px;
    top: -60px;
    z-index: 100;
    background: var(--bh-ink);
    color: var(--bh-white);
    padding: .6rem 1rem;
    font-weight: 700;
}
.bh-skip:focus { top: 12px; color: var(--bh-white); }

.bh-main:focus { outline: none; }

.bh-wrap {
    max-width: var(--bh-max);
    margin-inline: auto;
    padding-inline: var(--bh-gutter);
}

/* ---------- Rail (desktop sidebar / mobile top bar) ---------- */
.bh-rail {
    --bh-focus: var(--bh-white);
    --bh-mk-a: var(--bh-plaster);
    --bh-mk-gap: var(--bh-teal);
    --bh-mk-b: var(--bh-ink);
    --bh-mk-sun: var(--bh-coral);
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bh-teal);
    color: var(--bh-white);
}

.bh-rail__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: var(--bh-bar);
    padding-inline: 16px 10px;
}

.bh-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}
.bh-brand:hover { color: inherit; }
.bh-brand .bh-mark { width: 40px; height: 40px; }
.bh-brand__name {
    font-family: var(--bh-f-logo);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: -.01em;
}
.bh-brand__name b { font-weight: 700; }

.bh-burger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 12px;
    border: 2px solid currentColor;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.bh-burger .bh-ico--close { display: none; }
.bh-rail.is-open .bh-burger .bh-ico--close { display: inline-block; }
.bh-rail.is-open .bh-burger .bh-ico--menu { display: none; }

.bh-rail__panel { display: none; }
.bh-rail:not(.is-ready) .bh-rail__panel { display: block; padding: 0 16px 16px; }
.bh-rail.is-open .bh-rail__panel {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: var(--bh-bar) 0 0 0;
    overflow-y: auto;
    background: var(--bh-teal);
    padding: 8px 16px 32px;
    border-top: 1px solid rgba(255, 255, 255, .25);
}

.bh-rail__tag {
    font-size: .95rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .92);
    margin: 0 0 18px;
}

.bh-nav__list {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    counter-reset: bhnav;
    border-top: 2px solid rgba(255, 255, 255, .35);
}
.bh-nav__list li { counter-increment: bhnav; border-bottom: 1px solid rgba(255, 255, 255, .2); }
.bh-nav__list a {
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-height: 46px;
    padding: 10px 6px;
    color: var(--bh-white);
    text-decoration: none;
    font-weight: 700;
    line-height: 1.35;
}
.bh-nav__list a::before {
    content: counter(bhnav, decimal-leading-zero);
    font-family: var(--bh-f-title);
    font-size: .85rem;
    font-weight: 400;
    color: rgba(255, 255, 255, .75);
    min-width: 1.6em;
}
.bh-nav__list a:hover { background: var(--bh-teal-deep); color: var(--bh-white); }
.bh-nav__list .current-menu-item > a,
.bh-nav__list .current-category-ancestor > a,
.bh-nav__list .current-post-ancestor > a {
    background: var(--bh-plaster);
    color: var(--bh-ink);
}
.bh-nav__list .current-menu-item > a::before,
.bh-nav__list .current-post-ancestor > a::before { color: var(--bh-coral-text); }

.bh-rail__all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 10px 14px;
    background: var(--bh-coral);
    color: var(--bh-ink);
    font-weight: 700;
    text-decoration: none;
    margin-bottom: 18px;
}
.bh-rail__all:hover { background: var(--bh-plaster); color: var(--bh-ink); }

.bh-rail .bh-search { --bh-focus: var(--bh-white); }
.bh-rail .bh-search__input {
    background: var(--bh-teal-deep);
    border-color: rgba(255, 255, 255, .6);
    color: var(--bh-white);
}
.bh-rail .bh-search__input::placeholder { color: rgba(255, 255, 255, .78); }
.bh-rail .bh-search__btn { background: var(--bh-plaster); color: var(--bh-ink); border-color: var(--bh-plaster); }

.bh-rail__deco { display: none; }

/* reading progress: horizontal under the mobile bar */
.bh-progress {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 4px;
    background: var(--bh-teal-deep);
}
.bh-progress span {
    display: block;
    height: 100%;
    background: var(--bh-coral);
    transform-origin: right center;
    transform: scaleX(var(--bh-p, 0));
}

body.bh-lock { overflow: hidden; }

@media (min-width: 1100px) {
    html { scroll-padding-top: 24px; }
    .bh-rail {
        position: fixed;
        top: 0;
        bottom: 0;
        inset-inline-start: 0;
        width: var(--bh-rail);
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }
    .bh-rail__bar { padding: 28px 24px 18px; min-height: 0; }
    .bh-brand .bh-mark { width: 48px; height: 48px; }
    .bh-brand__name { font-size: 1.75rem; }
    .bh-burger { display: none; }
    .bh-rail__panel,
    .bh-rail:not(.is-ready) .bh-rail__panel {
        display: block;
        padding: 0 24px 20px;
    }
    .bh-rail__deco {
        display: block;
        position: relative;
        margin-top: auto;
        min-height: 132px;
        flex: none;
    }
    .bh-rail__deco span { position: absolute; display: block; }
    .bh-rail__deco span:nth-child(1) {
        width: 132px; height: 132px; border-radius: 50%;
        background: var(--bh-coral);
        bottom: -66px; inset-inline-start: 24px;
    }
    .bh-rail__deco span:nth-child(2) {
        width: 96px; height: 96px;
        background: var(--bh-ink);
        bottom: 0; inset-inline-end: 0;
        border-start-start-radius: 96px;
    }
    .bh-rail__deco span:nth-child(3) {
        width: 120px; height: 34px;
        bottom: 54px; inset-inline-start: 120px;
        background: repeating-linear-gradient(to bottom, var(--bh-plaster) 0 6px, transparent 6px 14px);
    }
    .bh-progress {
        position: fixed;
        top: 0;
        bottom: 0;
        inset-inline-start: calc(var(--bh-rail) - 6px);
        inset-inline-end: auto;
        width: 6px;
        height: auto;
    }
    .bh-progress span {
        width: 100%;
        height: 100%;
        transform-origin: center top;
        transform: scaleY(var(--bh-p, 0));
    }
    .bh-page { margin-inline-start: var(--bh-rail); }
}

/* ---------- Buttons, kicker, meta ---------- */
.bh-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 10px 22px;
    font-weight: 700;
    text-decoration: none;
    border: 2px solid var(--bh-ink);
}
.bh-btn--ink { background: var(--bh-ink); color: var(--bh-white); }
.bh-btn--ink:hover { background: var(--bh-teal-deep); border-color: var(--bh-teal-deep); color: var(--bh-white); }
.bh-btn--line { background: transparent; color: var(--bh-ink); }
.bh-btn--line:hover { background: var(--bh-coral); color: var(--bh-ink); }

.bh-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    font-weight: 700;
    color: var(--bh-teal-deep);
    text-decoration: none;
    line-height: 1.3;
    margin-bottom: 8px;
}
.bh-kicker::before {
    content: "";
    width: 10px; height: 10px;
    background: var(--bh-coral);
    flex: none;
}
.bh-kicker:hover { color: var(--bh-ink); text-decoration: underline; }
.bh-kicker--big { font-size: .95rem; padding: 6px 12px 6px 14px; background: var(--bh-white); }

.bh-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 0;
    font-size: .85rem;
    color: var(--bh-muted);
}
.bh-meta > * + *::before {
    content: "";
    display: inline-block;
    width: 5px; height: 5px;
    background: var(--bh-line);
    margin-inline-end: 14px;
    vertical-align: middle;
}

/* ---------- Section headers ---------- */
.bh-sechead {
    display: flex;
    align-items: end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin-bottom: 28px;
    padding-top: 18px;
    border-top: 6px solid var(--bh-ink);
}
.bh-sechead__title {
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}
.bh-sechead__title::before {
    content: "";
    width: .55em; height: .55em;
    background: var(--bh-teal);
    border-start-start-radius: .55em;
    flex: none;
}
.bh-sechead__text { margin: 0; color: var(--bh-muted); }
.bh-sechead__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    min-height: 40px;
}

/* ---------- Hero ---------- */
.bh-hero {
    display: grid;
    background: var(--bh-white);
    border-bottom: 6px solid var(--bh-ink);
}
.bh-hero__text { padding: 40px var(--bh-gutter) 36px; }
.bh-hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--bh-f-logo);
    font-weight: 700;
    color: var(--bh-teal-deep);
    margin-bottom: 14px;
}
.bh-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--bh-coral); }
.bh-hero__title {
    font-size: clamp(2.1rem, 4.6vw, 3.9rem);
    line-height: 1.08;
    letter-spacing: -.01em;
    margin-bottom: 18px;
    max-width: 16ch;
}
.bh-hero__lede {
    font-size: clamp(1.1rem, 1.6vw, 1.3rem);
    line-height: 1.6;
    color: var(--bh-ink-2);
    max-width: 44ch;
    margin-bottom: 26px;
}
.bh-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }

.bh-counts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    max-width: 520px;
}
.bh-counts > div {
    display: flex;
    flex-direction: column-reverse;
    padding: 14px 16px 12px;
    color: var(--bh-white);
    background: var(--bh-teal);
}
.bh-counts > div:nth-child(2) { background: var(--bh-coral); color: var(--bh-ink); }
.bh-counts > div:nth-child(3) { background: var(--bh-ink); }
.bh-counts dt { font-size: .9rem; font-weight: 700; }
.bh-counts dd {
    margin: 0;
    font-family: var(--bh-f-title);
    font-weight: 700;
    font-size: clamp(2rem, 3.4vw, 2.8rem);
    line-height: 1;
}
.bh-hero__visual { background: var(--bh-sand); min-height: 260px; display: flex; align-items: flex-end; }
.bh-hero__art { width: 100%; height: 100%; }

@media (min-width: 900px) {
    .bh-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
    .bh-hero__text { padding-block: clamp(48px, 7vw, 96px) clamp(40px, 5vw, 72px); }
    .bh-hero__art { height: 100%; object-fit: cover; }
    .bh-hero__visual svg { height: 100%; width: 100%; }
}

/* ---------- Topics (category panels) ---------- */
.bh-topics, .bh-latest, .bh-writers, .bh-related {
    max-width: var(--bh-max);
    margin-inline: auto;
    padding: clamp(48px, 6vw, 80px) var(--bh-gutter) 0;
}
.bh-topics__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
}
.bh-topic {
    --bg: var(--bh-white);
    --fg: var(--bh-ink);
    --link: var(--bh-ink);
    --sub: var(--bh-muted);
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--fg);
    padding: 16px;
}
.bh-topic--1 { --bg: var(--bh-teal); --fg: var(--bh-white); --link: var(--bh-white); --sub: rgba(255,255,255,.88); --bh-focus: var(--bh-white); }
.bh-topic--2 { --bg: var(--bh-white); }
.bh-topic--3 { --bg: var(--bh-coral); --sub: var(--bh-ink); }
.bh-topic--4 { --bg: var(--bh-ink); --fg: var(--bh-white); --link: var(--bh-white); --sub: rgba(255,255,255,.8); --bh-focus: var(--bh-white); }
.bh-topic--5 { --bg: var(--bh-sand); }
.bh-topic--6 { --bg: var(--bh-teal-tint); }

.bh-topic__img {
    aspect-ratio: 2 / 1;
    overflow: hidden;
    background: rgba(0, 0, 0, .08);
    margin-bottom: 16px;
}
.bh-topic__img img, .bh-card__img img, .bh-row__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bh-topic--1 .bh-topic__img { border-start-start-radius: 72px; }
.bh-topic--2 .bh-topic__img { border-radius: 400px 400px 0 0; }
.bh-topic--3 .bh-topic__img { border-start-end-radius: 999px; border-end-end-radius: 999px; }
.bh-topic--4 .bh-topic__img { border-end-start-radius: 72px; }
.bh-topic--5 .bh-topic__img { border-radius: 999px; }
.bh-topic--6 .bh-topic__img { border-end-end-radius: 72px; border-start-start-radius: 72px; }

.bh-topic__body { display: flex; flex-direction: column; flex: 1; }
.bh-topic__num {
    font-family: var(--bh-f-title);
    font-size: 2.6rem;
    line-height: .9;
    font-weight: 700;
    opacity: .9;
    margin-bottom: 6px;
}
.bh-topic__title { font-size: 1.4rem; margin-bottom: 8px; }
.bh-topic__title a { color: var(--link); text-decoration: none; }
.bh-topic__title a::after { content: ""; position: absolute; inset: 0; }
.bh-topic__title a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.bh-topic__text { font-size: .95rem; line-height: 1.6; color: var(--sub); margin-bottom: 14px; }
.bh-topic__count {
    margin: auto 0 8px;
    font-size: .85rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.bh-topic__count::before { content: ""; width: 22px; height: 3px; background: currentColor; }
.bh-topic__new {
    position: relative;
    z-index: 1;
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid color-mix(in srgb, var(--fg) 25%, transparent);
    font-size: .9rem;
    line-height: 1.45;
}
.bh-topic__new span { font-weight: 700; }
.bh-topic__new a { color: var(--link); }

/* ---------- Cards ---------- */
.bh-grid {
    display: grid;
    gap: 28px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.bh-grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }

.bh-card {
    display: flex;
    flex-direction: column;
    background: var(--bh-white);
    border-bottom: 6px solid var(--bh-teal);
    min-width: 0;
}
.bh-grid > .bh-card:nth-child(3n+2) { border-bottom-color: var(--bh-coral); }
.bh-grid > .bh-card:nth-child(3n) { border-bottom-color: var(--bh-ink); }
.bh-card__img {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--bh-sand);
    border-start-start-radius: var(--bh-balcony);
}
.bh-card__img img { transition: transform .4s ease; }
.bh-card:hover .bh-card__img img { transform: scale(1.03); }
.bh-card__body { display: flex; flex-direction: column; padding: 18px 20px 20px; flex: 1; }
.bh-card__title { font-size: 1.32rem; line-height: 1.25; margin-bottom: 10px; }
.bh-card__title a { color: var(--bh-ink); text-decoration: none; background-image: linear-gradient(var(--bh-coral), var(--bh-coral)); background-size: 0 3px; background-repeat: no-repeat; background-position: right bottom; transition: background-size .25s ease; }
.bh-card__title a:hover { background-size: 100% 3px; }
.bh-card__text { color: var(--bh-ink-2); font-size: .97rem; line-height: 1.65; margin-bottom: 14px; }
.bh-card .bh-meta { margin-top: auto; }

.bh-noimg {
    display: grid;
    place-items: center;
    width: 100%; height: 100%;
    background: var(--bh-sand);
}

/* ---------- Latest ---------- */
.bh-latest__layout { display: grid; gap: 28px; }
.bh-card--lead .bh-card__title { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.bh-card--lead .bh-card__img { border-start-start-radius: 120px; aspect-ratio: 16 / 10; }
.bh-card--lead { border-bottom-color: var(--bh-coral); }

.bh-rows { list-style: none; margin: 0; padding: 0; counter-reset: bhrow; }
.bh-row {
    counter-increment: bhrow;
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    padding: 16px 0;
    border-bottom: 1px solid var(--bh-line);
}
.bh-row:first-child { padding-top: 0; }
.bh-row__img {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--bh-sand);
    border-radius: 50%;
}
.bh-row:nth-child(even) .bh-row__img { border-radius: 0; border-start-start-radius: 42px; }
.bh-row__title { font-size: 1.12rem; line-height: 1.3; margin: 0 0 6px; }
.bh-row__title a { color: var(--bh-ink); text-decoration: none; }
.bh-row__title a:hover { text-decoration: underline; text-decoration-color: var(--bh-coral); text-decoration-thickness: 2px; }
.bh-row .bh-kicker { margin-bottom: 4px; }

@media (min-width: 1000px) {
    .bh-latest__layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
}

/* ---------- Front page prose ---------- */
.bh-about {
    max-width: var(--bh-max);
    margin: clamp(56px, 7vw, 96px) auto 0;
    padding: clamp(32px, 5vw, 64px) var(--bh-gutter);
    background: var(--bh-white);
    display: grid;
    gap: 32px;
    position: relative;
}
.bh-about__deco { display: none; }
@media (min-width: 1000px) {
    .bh-about {
        grid-template-columns: 200px minmax(0, 1fr);
        width: calc(100% - 2 * var(--bh-gutter));
    }
    .bh-about__deco { display: block; position: relative; }
    .bh-about__deco span { position: sticky; top: 40px; display: block; }
    .bh-about__deco span:nth-child(1) {
        width: 160px; height: 220px;
        background: var(--bh-teal);
        border-start-start-radius: 100px;
        background-image: repeating-linear-gradient(to bottom, transparent 0 60px, var(--bh-plaster) 60px 72px);
    }
    .bh-about__deco span:nth-child(2) {
        width: 90px; height: 90px; border-radius: 50%;
        background: var(--bh-coral);
        margin-top: -50px;
        margin-inline-start: 110px;
        top: 240px;
    }
}

/* ---------- Prose ---------- */
.bh-prose { max-width: 70ch; font-size: 1.1rem; line-height: 1.85; }
.bh-prose > *:first-child { margin-top: 0; }
.bh-prose h2 {
    font-size: clamp(1.55rem, 2.3vw, 1.95rem);
    margin: 2.2em 0 .6em;
    padding-inline-start: 26px;
    position: relative;
}
.bh-prose h2::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: .3em;
    width: 14px; height: 14px;
    background: var(--bh-teal);
    border-start-start-radius: 14px;
}
.bh-prose h3 { font-size: 1.3rem; margin: 1.8em 0 .5em; color: var(--bh-teal-dark); }
.bh-prose a { color: var(--bh-teal-deep); text-decoration-color: var(--bh-coral); text-decoration-thickness: 2px; }
.bh-prose a:hover { color: var(--bh-ink); }
.bh-prose ul, .bh-prose ol { padding-inline-start: 1.6em; margin: 0 0 1.3em; }
.bh-prose ul { list-style: none; padding-inline-start: 1.4em; }
.bh-prose ul > li { position: relative; margin-bottom: .45em; }
.bh-prose ul > li::before {
    content: "";
    position: absolute;
    inset-inline-start: -1.25em;
    top: .72em;
    width: 8px; height: 8px;
    background: var(--bh-coral);
}
.bh-prose ol > li { margin-bottom: .45em; }
.bh-prose ol > li::marker { color: var(--bh-teal-deep); font-weight: 700; }
.bh-prose blockquote {
    margin: 1.6em 0;
    padding: 4px 22px;
    border-inline-start: 6px solid var(--bh-coral);
    font-family: var(--bh-f-title);
    font-size: 1.25rem;
}
.bh-prose img { margin: 1.5em 0; }
.bh-prose strong { color: var(--bh-ink); }

.bh-table { overflow-x: auto; margin: 1.6em 0; }
.bh-table table { border-collapse: collapse; width: 100%; font-size: .95rem; background: var(--bh-white); }
.bh-table th, .bh-table td { padding: 10px 12px; border-bottom: 1px solid var(--bh-line); text-align: start; }
.bh-table th { background: var(--bh-ink); color: var(--bh-white); }

.bh-note {
    display: flex;
    gap: 14px;
    margin: 2em 0;
    padding: 18px 20px;
    background: var(--bh-coral-tint);
    border-inline-start: 6px solid var(--bh-coral);
    font-size: .98rem;
    line-height: 1.7;
}
.bh-note .bh-ico { color: var(--bh-coral-text); margin-top: 3px; }
.bh-note p { margin: 0; }
.bh-note__label { font-weight: 700; font-family: var(--bh-f-title); font-size: 1.1rem; margin-bottom: 4px !important; }
.bh-note--safety { background: var(--bh-teal-tint); border-inline-start-color: var(--bh-teal); }
.bh-note--safety .bh-ico { color: var(--bh-teal-deep); }

.bh-stamp {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 2px solid var(--bh-ink);
    font-size: .9rem;
    font-weight: 700;
    background: var(--bh-white);
}

.bh-readalso {
    padding: 14px 18px;
    background: var(--bh-sand);
    border-inline-start: 6px solid var(--bh-teal);
}

/* ---------- Writers ---------- */
.bh-writers__grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.bh-writer {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    background: var(--bh-white);
    padding: 22px;
}
.bh-writer__name { font-size: 1.35rem; margin: 0 0 2px; }
.bh-writer__link { color: var(--bh-ink); }
.bh-writer__count { font-size: .85rem; font-weight: 700; color: var(--bh-teal-deep); margin-bottom: 8px; }
.bh-writer__bio { font-size: .96rem; line-height: 1.65; color: var(--bh-ink-2); margin: 0; }

.bh-avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 72px; height: 72px;
    font-family: var(--bh-f-logo);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1;
    background: var(--bh-teal);
    color: var(--bh-white);
}
.bh-avatar--circle { border-radius: 50%; background: var(--bh-coral); color: var(--bh-ink); }
.bh-avatar--square { border-start-start-radius: 36px; }

/* ---------- Page header band ---------- */
.bh-head {
    position: relative;
    overflow: hidden;
    background: var(--bh-teal);
    color: var(--bh-white);
    --bh-focus: var(--bh-white);
}
.bh-head--coral { background: var(--bh-coral); color: var(--bh-ink); --bh-focus: var(--bh-ink); }
.bh-head--plaster { background: var(--bh-sand); color: var(--bh-ink); --bh-focus: var(--bh-ink); }
.bh-head--ink { background: var(--bh-ink); color: var(--bh-white); }
.bh-head__inner {
    position: relative;
    z-index: 1;
    max-width: var(--bh-max);
    margin-inline: auto;
    padding: clamp(28px, 4vw, 48px) var(--bh-gutter) clamp(32px, 5vw, 56px);
}
.bh-head__kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: .9rem;
    margin-bottom: 8px;
}
.bh-head__kicker::before { content: ""; width: 12px; height: 12px; background: currentColor; border-radius: 50%; }
.bh-head__title { font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.1; margin-bottom: 16px; max-width: 22ch; }
.bh-head__intro { max-width: 68ch; font-size: 1.05rem; line-height: 1.75; }
.bh-head__intro p:last-child { margin-bottom: 0; }
.bh-head__count { margin: 18px 0 0; font-weight: 700; }
.bh-head__count b { font-family: var(--bh-f-title); font-size: 1.8rem; margin-inline-end: 6px; }
.bh-head__search { margin-top: 18px; max-width: 520px; }
.bh-head__shapes { display: none; }

@media (min-width: 900px) {
    .bh-head__inner { padding-inline-end: calc(var(--bh-gutter) + 220px); }
    .bh-head__shapes { display: block; position: absolute; inset-block: 0; inset-inline-end: 0; width: 240px; }
    .bh-head__shapes span { position: absolute; display: block; }
    .bh-head__shapes span:nth-child(1) {
        width: 200px; height: 200px; border-radius: 50%;
        background: var(--bh-coral);
        top: 34px; inset-inline-end: -40px;
    }
    .bh-head__shapes span:nth-child(2) {
        width: 150px; height: 150px;
        background: var(--bh-ink);
        bottom: 0; inset-inline-end: 70px;
        border-start-start-radius: 150px;
    }
    .bh-head__shapes span:nth-child(3) {
        width: 120px; height: 70px;
        bottom: 26px; inset-inline-end: 0;
        background: repeating-linear-gradient(to bottom, var(--bh-plaster) 0 8px, transparent 8px 18px);
    }
    .bh-head--coral .bh-head__shapes span:nth-child(1) { background: var(--bh-teal); }
    .bh-head--ink .bh-head__shapes span:nth-child(2) { background: var(--bh-teal); }
    .bh-head--plaster .bh-head__shapes span:nth-child(1) { background: var(--bh-teal); }
    .bh-head--plaster .bh-head__shapes span:nth-child(2) { background: var(--bh-coral); }
    .bh-head--plaster .bh-head__shapes span:nth-child(3) { background: repeating-linear-gradient(to bottom, var(--bh-ink) 0 8px, transparent 8px 18px); }
}

.bh-crumbs { font-size: .85rem; margin-bottom: 14px; opacity: .95; }
.bh-crumbs a { color: inherit; }
.bh-crumbs .breadcrumb_last { font-weight: 700; }

.bh-chips { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bh-chips a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 6px 12px;
    background: var(--bh-white);
    color: var(--bh-ink);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 700;
}
.bh-chips a span { font-family: var(--bh-f-title); color: var(--bh-coral-text); }
.bh-chips a:hover { background: var(--bh-ink); color: var(--bh-white); }
.bh-chips a:hover span { color: var(--bh-coral); }

.bh-listing { padding-block: clamp(32px, 5vw, 56px) 0; }
.bh-pagebody { padding-block: clamp(32px, 5vw, 56px) 0; }
.bh-pagebody .bh-prose { margin-inline: auto; background: var(--bh-white); padding: clamp(22px, 4vw, 48px); max-width: calc(70ch + 96px); }

.bh-empty { background: var(--bh-white); padding: 32px; max-width: 640px; }

/* ---------- Pagination ---------- */
.bh-pager ul { list-style: none; margin: 40px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bh-pager a, .bh-pager span {
    display: grid;
    place-items: center;
    min-width: 44px; min-height: 44px;
    padding: 0 12px;
    background: var(--bh-white);
    color: var(--bh-ink);
    text-decoration: none;
    font-weight: 700;
}
.bh-pager .current { background: var(--bh-teal); color: var(--bh-white); }
.bh-pager a:hover { background: var(--bh-coral); }

/* ---------- Single ---------- */
.bh-article__head { background: var(--bh-white); }
.bh-article__headin {
    max-width: 920px;
    margin-inline: auto;
    padding: clamp(24px, 4vw, 44px) var(--bh-gutter) clamp(28px, 4vw, 40px);
}
.bh-article__head .bh-kicker--big { background: var(--bh-teal-tint); }
.bh-article__title { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.12; margin: 6px 0 22px; }
.bh-byline { display: flex; gap: 14px; align-items: center; }
.bh-byline .bh-avatar { width: 52px; height: 52px; font-size: 1.1rem; }
.bh-byline .bh-avatar--square { border-start-start-radius: 26px; }
.bh-byline__name { margin: 0; font-weight: 700; }
.bh-byline__meta { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 16px; font-size: .9rem; color: var(--bh-muted); }
.bh-byline__meta span { display: inline-flex; align-items: center; gap: 5px; }

.bh-article__figure {
    position: relative;
    max-width: 920px;
    margin: 0 auto;
    padding: 0 var(--bh-gutter);
}
.bh-article__figure::before {
    content: "";
    position: absolute;
    inset-inline-end: calc(var(--bh-gutter) - 14px);
    bottom: -14px;
    width: 46%;
    height: 60%;
    background: var(--bh-teal);
}
.bh-article__figure img {
    position: relative;
    width: 100%;
    max-height: 560px;
    object-fit: cover;
    border-start-start-radius: 120px;
    background: var(--bh-sand);
}

.bh-article__layout {
    max-width: calc(70ch + 2 * var(--bh-gutter));
    margin: 0 auto;
    padding: clamp(36px, 5vw, 56px) var(--bh-gutter) 0;
}
.bh-article__body { margin-inline: auto; }

.bh-toc {
    background: var(--bh-white);
    border-top: 6px solid var(--bh-ink);
    margin-bottom: 36px;
}
.bh-toc__sum {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 10px 18px;
    cursor: pointer;
    font-family: var(--bh-f-title);
    font-weight: 700;
    font-size: 1.2rem;
    list-style: none;
}
.bh-toc__sum::-webkit-details-marker { display: none; }
.bh-toc__sum small { font-family: var(--bh-f-body); font-size: .85rem; color: var(--bh-muted); margin-inline-start: auto; }
.bh-toc__sum::after {
    content: "";
    width: 12px; height: 12px;
    border-inline-end: 2px solid var(--bh-ink);
    border-bottom: 2px solid var(--bh-ink);
    transform: rotate(45deg);
    margin-top: -6px;
    transition: transform .2s;
}
.bh-toc[open] .bh-toc__sum::after { transform: rotate(-135deg); margin-top: 6px; }
.bh-toc__list {
    margin: 0;
    padding: 4px 18px 18px;
    list-style: none;
    counter-reset: bhtoc;
    columns: 1;
    column-gap: 28px;
    font-size: .95rem;
}
@media (min-width: 760px) { .bh-toc__list { columns: 2; } }
.bh-toc__list li {
    counter-increment: bhtoc;
    break-inside: avoid;
    display: flex;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--bh-plaster);
    line-height: 1.4;
}
.bh-toc__list li::before {
    content: counter(bhtoc, decimal-leading-zero);
    font-family: var(--bh-f-title);
    font-weight: 700;
    color: var(--bh-coral-text);
    min-width: 1.6em;
}
.bh-toc__list a { color: var(--bh-ink); text-decoration: none; }
.bh-toc__list a:hover { color: var(--bh-teal-deep); text-decoration: underline; }

.bh-authorbox {
    margin-top: 48px;
    border-top: 6px solid var(--bh-teal);
}
.bh-authorbox__label {
    margin: 0;
    padding: 12px 22px 0;
    background: var(--bh-white);
    font-size: .85rem;
    font-weight: 700;
    color: var(--bh-teal-deep);
}

/* ---------- Search form ---------- */
.bh-search { display: flex; }
.bh-search__input {
    flex: 1;
    min-width: 0;
    min-height: 46px;
    padding: 8px 14px;
    border: 2px solid var(--bh-ink);
    border-inline-end: 0;
    background: var(--bh-white);
    color: var(--bh-ink);
    font: inherit;
    font-size: 1rem;
    border-radius: 0;
}
.bh-search__btn {
    display: grid;
    place-items: center;
    width: 50px;
    min-height: 46px;
    border: 2px solid var(--bh-ink);
    background: var(--bh-ink);
    color: var(--bh-white);
    cursor: pointer;
}
.bh-search__btn:hover { background: var(--bh-teal-deep); }
.bh-head--ink .bh-search__input { border-color: var(--bh-white); }
.bh-head--ink .bh-search__btn { background: var(--bh-coral); color: var(--bh-ink); border-color: var(--bh-coral); }

/* ---------- 404 ---------- */
.bh-404 {
    display: grid;
    gap: 32px;
    align-items: center;
    max-width: var(--bh-max);
    margin-inline: auto;
    padding: clamp(40px, 6vw, 80px) var(--bh-gutter) 0;
}
.bh-404__art { display: flex; align-items: center; gap: 12px; direction: ltr; justify-content: center; }
.bh-404__art span {
    display: grid; place-items: center;
    width: clamp(90px, 14vw, 150px); aspect-ratio: 3 / 4;
    background: var(--bh-teal);
    color: var(--bh-white);
    font-family: var(--bh-f-title);
    font-weight: 700;
    font-size: clamp(4rem, 9vw, 6.4rem);
    border-start-start-radius: 60px;
}
.bh-404__art span:last-child { background: var(--bh-ink); border-radius: 0 0 0 60px; }
.bh-404__art i { width: clamp(80px, 12vw, 130px); aspect-ratio: 1; border-radius: 50%; background: var(--bh-coral); }
.bh-404__title { font-size: clamp(2rem, 4vw, 3rem); }
.bh-404__text .bh-search { max-width: 520px; margin-bottom: 20px; }
@media (min-width: 900px) { .bh-404 { grid-template-columns: 1fr 1fr; } }

/* ---------- Contact form (adx-contact-form, style mode "inherit") ---------- */
.bh-prose .adxc {
    --adxc-accent: var(--bh-teal);
    --adxc-bg: var(--bh-plaster);
    --adxc-input-bg: var(--bh-white);
    --adxc-border: var(--bh-ink);
    --adxc-radius: 0;
    margin: 1.5em 0 0;
}
.bh-prose .adxc .adxc-form { border: 0; border-top: 6px solid var(--bh-teal); padding: clamp(18px, 3vw, 28px); }
.bh-prose .adxc .adxc-field label { font-size: .95rem; font-weight: 700; }
.bh-prose .adxc .adxc-field input,
.bh-prose .adxc .adxc-field textarea { border: 2px solid var(--bh-ink); border-radius: 0; min-height: 46px; }
.bh-prose .adxc .adxc-field input:focus,
.bh-prose .adxc .adxc-field textarea:focus { outline: 3px solid var(--bh-ink); outline-offset: 2px; box-shadow: none; }
.bh-prose .adxc .adxc-submit {
    min-height: 48px;
    padding: 10px 30px;
    border: 2px solid var(--bh-ink);
    border-radius: 0;
    background: var(--bh-coral);
    color: var(--bh-ink);
    font-weight: 700;
}
.bh-prose .adxc .adxc-submit:hover { background: var(--bh-ink); color: var(--bh-white); filter: none; }

/* ---------- Footer ---------- */
.bh-footer {
    --bh-focus: var(--bh-white);
    --bh-mk-a: var(--bh-teal);
    --bh-mk-gap: var(--bh-ink);
    --bh-mk-b: var(--bh-plaster);
    --bh-mk-sun: var(--bh-coral);
    margin-top: clamp(64px, 8vw, 112px);
    background: var(--bh-ink);
    color: rgba(255, 255, 255, .88);
}
.bh-footer__blocks { display: grid; grid-template-columns: 3fr 1fr 2fr 5fr; height: 16px; }
.bh-footer__blocks span:nth-child(1) { background: var(--bh-teal); }
.bh-footer__blocks span:nth-child(2) { background: var(--bh-coral); }
.bh-footer__blocks span:nth-child(3) { background: var(--bh-plaster); }
.bh-footer__blocks span:nth-child(4) { background: var(--bh-teal-deep); }
.bh-footer__inner {
    display: grid;
    gap: 36px;
    padding-block: 48px 32px;
}
@media (min-width: 900px) {
    .bh-footer__inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, .8fr); }
}
.bh-brand--footer { color: var(--bh-white); margin-bottom: 14px; }
.bh-brand--footer .bh-brand__name b { color: var(--bh-teal-light); }
.bh-footer__tag { font-size: .95rem; }
.bh-footer__note { font-size: .85rem; line-height: 1.65; color: rgba(255, 255, 255, .72); border-inline-start: 4px solid var(--bh-coral); padding-inline-start: 12px; }
.bh-footer__h {
    font-size: 1.15rem;
    color: var(--bh-white);
    margin-bottom: 12px;
}
.bh-footer__list { list-style: none; margin: 0; padding: 0; }
.bh-footer__topics .bh-footer__list { columns: 2; column-gap: 24px; }
.bh-footer__list li { break-inside: avoid; }
.bh-footer__list a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: rgba(255, 255, 255, .9);
    text-decoration: none;
    font-size: .95rem;
    line-height: 1.35;
}
.bh-footer__list a:hover { color: var(--bh-white); text-decoration: underline; text-decoration-color: var(--bh-coral); }
.bh-footer__base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    padding-block: 18px 22px;
    border-top: 1px solid rgba(255, 255, 255, .16);
    font-size: .85rem;
}
.bh-footer__base p { margin: 0; }
.bh-footer__top { color: var(--bh-white); min-height: 40px; display: inline-flex; align-items: center; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* ---------- Refinements ---------- */
.bh-topic__num, .bh-counts dd, .bh-nav__list a::before, .bh-toc__list li::before,
.bh-head__count b, .bh-chips a span, .bh-404__art span { font-variant-numeric: lining-nums; }
.bh-avatar { font-family: var(--bh-f-title); }
.home .bh-rail__tag { display: none; }

@media (max-width: 899px) {
    .bh-hero__visual { min-height: 0; height: 220px; }
}

@media (max-width: 639px) {
    .bh-topic {
        display: grid;
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 14px;
        align-items: start;
        padding: 14px;
    }
    .bh-topic__img { aspect-ratio: 1; margin: 0; }
    .bh-topic--2 .bh-topic__img, .bh-topic--5 .bh-topic__img { border-radius: 50%; }
    .bh-topic__num { font-size: 1.5rem; margin-bottom: 2px; }
    .bh-topic__title { font-size: 1.2rem; }
    .bh-topic__text { display: none; }
    .bh-topic__count { margin: 0 0 6px; }
}
.bh-note { align-items: flex-start; }