/* ==========================================================================
   Patélle Journal — archive + single templates.
   Colours and fonts marked with fallbacks are overridden inline from Settings.
   ========================================================================== */

.pj-template {
    --pj-bg: #fdfaf4;
    --pj-surface: #ffffff;
    --pj-ink: #2a241e;
    --pj-ink-soft: #7d7062;
    --pj-line: #e7dccb;
    --pj-accent: #a98a54;
    --pj-footer: #fdfaf4;
    --pj-chip: #f1e9dc;

    /* Warmer band, used to set alternating sections off the page ivory. */
    --pj-band: #f4ede3;

    /* Deep tone: solid buttons, immersive scrims, prev / next tiles. */
    --pj-deep: #1c1814;
    --pj-scrim: 0.55;

    /* Gold lifted toward white so it still reads on a dark photograph. */
    --pj-accent-light: #cdb182;

    --pj-display: "Cormorant Garamond", "Times New Roman", serif;
    --pj-body: "Jost", "Helvetica Neue", Arial, sans-serif;

    /* Layout. All four are overridden inline from Settings → Layout.
       The design is drawn at 1440; below that everything is fluid. */
    --pj-gutter: clamp(20px, 5vw, 56px);
    --pj-max: 1440px;
    --pj-measure: 760px;
    --pj-radius: 0px;

    --pj-cols: 3;
    --pj-cols-tablet: 2;
    --pj-cols-mobile: 1;
    --pj-card-ratio: 4 / 3;

    /* Multiplier on every display heading, from Settings → Design. */
    --pj-title-scale: 1;

    /* How far the sticky contents rail clears the top of the window. Sized for
       the plugin's own sticky header; smaller when there isn't one. */
    --pj-sticky-top: 104px;

    /* Featured banner on the blog page, from Settings → Blog page. */
    --pj-feat-h: 560px;
    --pj-feat-scrim: 0.52;

    margin: 0;
    background: var(--pj-bg);
    color: var(--pj-ink);
    font-family: var(--pj-body);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

/* Where supported, the muted tones follow whatever ink and accent are set in
   Settings → Design, so a custom palette stays coherent on its own. The plain
   values above remain the fallback. */
@supports (color: color-mix(in srgb, #000 50%, #fff)) {
    .pj-template {
        --pj-ink-soft: color-mix(in srgb, var(--pj-ink) 62%, var(--pj-bg));
        --pj-chip: color-mix(in srgb, var(--pj-accent) 12%, var(--pj-bg));
        --pj-band: color-mix(in srgb, var(--pj-accent) 11%, var(--pj-bg));
        --pj-accent-light: color-mix(in srgb, var(--pj-accent) 62%, #fff);
    }
}

/* Scoped, not a bare `article` selector: when the theme supplies the header
   and footer, its own <article> elements share the page with ours. */
.pj-main article {
    margin: 0 !important;
    padding: 0 !important;
}

.pj-template *,
.pj-template *::before,
.pj-template *::after {
    box-sizing: border-box;
}

.pj-template img {
    max-width: 100%;
    height: auto;
    display: block;
}
.pj-template a {
    color: inherit;
    text-decoration: none;
}

.pj-template :focus-visible {
    outline: 2px solid var(--pj-accent);
    outline-offset: 3px;
}

.pj-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    background: var(--pj-ink);
    color: #fff;
    padding: 12px 20px;
}
.pj-skip:focus {
    left: 0;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

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

/* --------------------------------------------------------------- Type ---- */

.pj-display {
    font-family: var(--pj-display);
    font-weight: 400;
    line-height: 1.14;
    letter-spacing: -0.005em;
    margin: 0;
}
.pj-display em {
    font-style: italic;
}

.pj-label,
.pj-eyebrow {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--pj-ink-soft);
    margin: 0;
}
.pj-label--accent {
    color: var(--pj-accent);
}
.pj-label--light {
    color: rgba(255, 255, 255, 0.75);
}

.pj-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--pj-ink-soft);
}
.pj-meta__dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.5;
}

/* CATEGORY / DATE / N MIN READ — the same rhythm the front-page cards use. */
.pj-metaline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--pj-ink-soft);
}
.pj-metaline__sep {
    opacity: 0.4;
}
.pj-metaline .pj-meta__cat {
    color: var(--pj-accent);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
}
.pj-metaline .pj-meta__cat:hover {
    border-color: currentColor;
}

/* The category chip, used on cards and the featured panel. */
.pj-chip {
    display: inline-block;
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pj-ink);
    background: var(--pj-chip);
    border: 1px solid var(--pj-line);
    padding: 5px 10px;
    line-height: 1;
}

/* ------------------------------------------------------------ Buttons ---- */

.pj-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--pj-body);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 14px 26px;
    border: 1px solid transparent;
    cursor: pointer;
    transition:
        background 0.35s ease,
        color 0.35s ease,
        border-color 0.35s ease;
}
.pj-btn--solid {
    background: var(--pj-deep);
    color: #fff;
}
.pj-btn--solid:hover {
    background: var(--pj-accent);
}

.pj-btn--outline {
    background: transparent;
    border-color: var(--pj-ink);
    color: var(--pj-ink);
}
.pj-btn--outline:hover {
    background: var(--pj-ink);
    color: #fff;
}

.pj-btn--outline-light {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.6);
    color: #fff;
}
.pj-btn--outline-light:hover {
    background: #fff;
    color: var(--pj-ink);
}

.pj-btn--ghost {
    background: transparent;
    border-color: var(--pj-line);
    color: var(--pj-ink-soft);
}
.pj-btn--ghost:hover:not(:disabled) {
    border-color: var(--pj-ink);
    color: var(--pj-ink);
}
.pj-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.pj-readmore {
    display: inline-block;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--pj-ink);
    transition:
        color 0.3s ease,
        border-color 0.3s ease;
}
.pj-readmore:hover {
    color: var(--pj-accent);
    border-color: var(--pj-accent);
}

/* ------------------------------------------------------------- Header ---- */

.pj-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--pj-bg);
    border-bottom: 1px solid var(--pj-line);
}

.pj-header__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
    max-width: var(--pj-max);
    margin: 0 auto;
    padding: 18px var(--pj-gutter);
}

.pj-header__nav {
    display: flex;
    align-items: center;
    gap: 26px;
}
.pj-header__nav--left {
    justify-content: center;
}
.pj-header__nav--right {
    justify-content: flex-end;
}

.pj-menu {
    display: flex;
    align-items: center;
    gap: 26px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.pj-header .pj-menu a,
.pj-header__link {
    font-size: 12px;
    letter-spacing: 0.04em;
    padding-bottom: 3px;
    border-bottom: 1px solid transparent;
    transition:
        border-color 0.3s ease,
        color 0.3s ease;
}
.pj-header .pj-menu a:hover,
.pj-header__link:hover {
    color: var(--pj-accent);
    border-color: var(--pj-accent);
}
.pj-header .pj-menu .current-menu-item > a {
    color: var(--pj-accent);
    border-color: var(--pj-accent);
}

.pj-brand__mark {
    font-family: var(--pj-display);
    font-size: 26px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.pj-brand--image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pj-brand__cover {
    position: absolute;
    inset: 0;
}
.pj-brand__logo {
    max-height: 40px;
    width: auto;
}

.pj-brand img {
    max-height: 34px;
    width: auto;
}

.pj-icon-btn {
    background: none;
    border: 0;
    padding: 4px;
    cursor: pointer;
    color: inherit;
    line-height: 0;
}
.pj-icon-btn svg {
    width: 17px;
    height: 17px;
}

.pj-header__cta {
    padding: 10px 20px;
}

.pj-burger {
    display: none;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 6px;
}
.pj-burger span:not(.screen-reader-text) {
    display: block;
    width: 20px;
    height: 1px;
    background: var(--pj-ink);
    margin: 5px 0;
}

.pj-search {
    border-top: 1px solid var(--pj-line);
    background: var(--pj-bg);
    padding: 22px var(--pj-gutter);
}
.pj-search__form {
    display: flex;
    gap: 10px;
    max-width: 620px;
    margin: 0 auto;
}
.pj-search__form input,
.pj-newsletter__form input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--pj-line);
    background: var(--pj-surface);
    padding: 14px 18px;
    font-family: var(--pj-body);
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--pj-ink);
}
.pj-search__form input::placeholder,
.pj-newsletter__form input::placeholder {
    color: var(--pj-ink-soft);
}

.pj-mobile-nav {
    border-top: 1px solid var(--pj-line);
    padding: 16px var(--pj-gutter) 24px;
}
.pj-mobile-nav .pj-menu {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

/* ---------------------------------------------------------- Page head ---- */

.pj-pagehead {
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(56px, 8vw, 96px) var(--pj-gutter) clamp(36px, 5vw, 56px);
    text-align: center;
}
.pj-pagehead__title {
    font-size: calc(clamp(44px, 6.6vw, 82px) * var(--pj-title-scale));
}
.pj-pagehead__sub {
    margin: 22px auto 0;
    max-width: 52ch;
    font-size: 14px;
    line-height: 1.85;
    color: var(--pj-ink-soft);
}

/* ----------------------------------------------------------- Featured ---- */

.pj-featured {
    max-width: var(--pj-max);
    margin: 0 auto;
    padding: 0 var(--pj-gutter);
}
.pj-featured__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
}
/* Height follows the taller of image or panel, so the panel never overhangs. */
.pj-featured__media {
    grid-area: 1 / 1;
    min-height: clamp(340px, 40vw, 540px);
    height: 100%;
    overflow: hidden;
    background: var(--pj-chip);
}
.pj-featured__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The white panel sits over the image, inset from the left. */
.pj-featured__panel {
    position: relative;
    grid-area: 1 / 1;
    align-self: center;
    justify-self: start;
    width: min(52%, 520px);
    margin: clamp(28px, 4vw, 56px) 0;
    background: var(--pj-surface);
    padding: clamp(28px, 3.4vw, 52px);
}
.pj-featured__meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 20px;
    font-size: 11px;
    color: var(--pj-ink-soft);
}
.pj-featured__title {
    font-size: calc(clamp(30px, 3.6vw, 44px) * var(--pj-title-scale));
    margin: 0 0 18px;
}
.pj-featured__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
}
.pj-featured__excerpt {
    font-size: 13px;
    line-height: 1.9;
    color: var(--pj-ink-soft);
    margin: 0 0 26px;
    max-width: 44ch;
}
.pj-featured__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--pj-accent);
}
.pj-featured__cta svg {
    width: 22px;
    height: 8px;
    overflow: visible;
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pj-featured__inner:hover .pj-featured__cta svg {
    transform: translateX(5px);
}

/* ------------------------------------------------------------ Stories ---- */

.pj-stories {
    max-width: var(--pj-max);
    margin: 0 auto;
    padding: clamp(40px, 6vw, 72px) var(--pj-gutter) 0;
}
.pj-stories--related {
    padding-bottom: 40px;
}

.pj-section-title {
    font-size: calc(clamp(26px, 3vw, 34px) * var(--pj-title-scale));
    text-align: center;
    margin-bottom: 44px;
}

.pj-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
    padding: 0 0 44px;
}
.pj-filters__item {
    background: none;
    border: 0;
    padding: 0 0 6px;
    cursor: pointer;
    font-family: var(--pj-body);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--pj-ink-soft);
    border-bottom: 1px solid transparent;
    transition:
        color 0.3s ease,
        border-color 0.3s ease;
}
.pj-filters__item:hover {
    color: var(--pj-ink);
}
.pj-filters__item.is-active {
    color: var(--pj-ink);
    border-bottom-color: var(--pj-accent);
}

.pj-stories__body {
    transition: opacity 0.3s ease;
}
.pj-stories__body.is-loading {
    opacity: 0.35;
}

.pj-grid {
    display: grid;
    grid-template-columns: repeat(var(--pj-cols), minmax(0, 1fr));
    gap: clamp(20px, 2.4vw, 32px);
    margin-bottom: clamp(20px, 2.4vw, 32px);
}

/* --------------------------------------------------------------- Card ---- */

.pj-card {
    position: relative;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.pj-js .pj-card[data-pj-reveal] {
    transform: translateY(18px);
    transition:
        opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
        transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pj-card.is-in {
    opacity: 1;
    transform: none;
}

.pj-card__media {
    position: relative;
    overflow: hidden;
}

.pj-card__frame {
    display: block;
    overflow: hidden;
    aspect-ratio: var(--pj-card-ratio);
    background: linear-gradient(100deg, #f0e8db 30%, #f7f1e6 50%, #f0e8db 70%);
    background-size: 220% 100%;
}
.pj-card__frame:not(.is-loaded) {
    animation: pj-shimmer 2.4s linear infinite;
}

@keyframes pj-shimmer {
    from {
        background-position: 130% 0;
    }
    to {
        background-position: -30% 0;
    }
}

.pj-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pj-card:hover .pj-card__img {
    transform: scale(1.05);
}

.pj-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 14px 0;
    border-bottom: 1px solid var(--pj-line);
}
.pj-card__time {
    font-size: 11px;
    color: var(--pj-ink-soft);
}

.pj-card__title {
    font-size: calc(clamp(21px, 2.1vw, 25px) * var(--pj-title-scale));
    margin: 18px 0 12px;
}
.pj-card__title a {
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 1px;
    transition: background-size 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pj-card:hover .pj-card__title a {
    background-size: 100% 1px;
}

/* Stretched hit area: one link per card in the accessibility tree. */
.pj-card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
}

.pj-card__excerpt {
    font-size: 13px;
    line-height: 1.85;
    color: var(--pj-ink-soft);
    margin: 0 0 20px;
}

.pj-card__cta {
    margin-top: auto;
    align-self: flex-start;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--pj-ink);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--pj-ink);
    transition:
        color 0.35s ease,
        border-color 0.35s ease;
}
.pj-card:hover .pj-card__cta {
    color: var(--pj-accent);
    border-bottom-color: var(--pj-accent);
}

/* Framed: bordered card on a white surface (matches the reference design). */
.pj-card--framed {
    background: var(--pj-surface);
    border: 1px solid var(--pj-line);
    transition:
        box-shadow 0.4s ease,
        transform 0.4s ease;
}
.pj-card--framed:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -28px rgba(23, 20, 15, 0.45);
}
.pj-card--framed .pj-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0 clamp(16px, 1.6vw, 22px) clamp(20px, 2vw, 26px);
}
.pj-card--framed .pj-card__frame {
    margin: 0;
}

/* Editorial: no frame, image above type. */
.pj-card--editorial .pj-card__media {
    margin-bottom: 4px;
}
.pj-card--editorial .pj-card__meta {
    border-bottom-color: transparent;
    padding-bottom: 4px;
}

/* Overlay: type sits on the image. */
.pj-card--overlay .pj-card__frame {
    aspect-ratio: 3 / 4;
}
.pj-card--overlay .pj-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(23, 20, 15, 0.05) 35%,
        rgba(23, 20, 15, 0.8) 100%
    );
    z-index: 1;
}
.pj-card--overlay .pj-card__body {
    position: absolute;
    z-index: 2;
    bottom: 0;
    padding: clamp(20px, 2.4vw, 32px);
    color: #fff;
}
.pj-card--overlay .pj-card__meta {
    border-bottom-color: rgba(255, 255, 255, 0.25);
}
.pj-card--overlay .pj-card__time,
.pj-card--overlay .pj-card__excerpt {
    color: rgba(255, 255, 255, 0.82);
}
.pj-card--overlay .pj-card__title,
.pj-card--overlay .pj-card__cta {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.5);
}
.pj-card--overlay .pj-chip {
    background: rgba(255, 255, 255, 0.9);
    border-color: transparent;
}

/* --------------------------------------------------------- Pagination ---- */

.pj-pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding: clamp(32px, 5vw, 56px) 0 clamp(40px, 6vw, 72px);
}

.pj-pages {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}
.pj-pages .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--pj-ink-soft);
    border: 1px solid transparent;
    transition:
        border-color 0.3s ease,
        color 0.3s ease,
        background 0.3s ease;
}
.pj-pages a.page-numbers:hover {
    border-color: var(--pj-line);
    color: var(--pj-ink);
}
.pj-pages .page-numbers.current {
    background: var(--pj-ink);
    border-color: var(--pj-ink);
    color: #fff;
}
.pj-pages .page-numbers.dots {
    min-width: 20px;
    padding: 0;
}
.pj-pages .prev,
.pj-pages .next {
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.pj-pages__count {
    margin: 0;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--pj-ink-soft);
}

.pj-empty {
    text-align: center;
    padding: 40px 0 90px;
}
.pj-empty .pj-display {
    font-size: 34px;
    margin-bottom: 12px;
}
.pj-empty p {
    color: var(--pj-ink-soft);
    font-size: 14px;
    margin-bottom: 28px;
}
.pj-empty .pj-search__form {
    justify-content: center;
}

/* ------------------------------------------------------------- Banner ---- */

.pj-banner {
    position: relative;
    margin: clamp(24px, 3vw, 40px) 0;
    padding: clamp(56px, 8vw, 104px) var(--pj-gutter);
    text-align: center;
    color: #fff;
    background: #6a5f52;
}
.pj-banner--image {
    background: #6a5f52 var(--pj-banner-image) center / cover no-repeat;
}
.pj-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(38, 31, 25, 0.44);
}
.pj-banner__inner {
    position: relative;
    z-index: 1;
    max-width: 620px;
    margin: 0 auto;
}
.pj-banner__title {
    font-size: clamp(36px, 5vw, 56px);
    margin: 18px 0 16px;
    color: rgba(255, 255, 255, 0.88);
}
.pj-banner__text {
    font-size: 14px;
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.88);
    margin: 0 0 28px;
}

/* --------------------------------------------------------- Newsletter ---- */

.pj-newsletter {
    max-width: var(--pj-max);
    margin: 0 auto;
    padding: clamp(52px, 7vw, 88px) var(--pj-gutter) clamp(60px, 8vw, 100px);
    text-align: center;
    border-top: 1px solid var(--pj-line);
}
.pj-newsletter__inner {
    max-width: 560px;
    margin: 0 auto;
}
.pj-newsletter__mark {
    display: block;
    width: 22px;
    height: 1px;
    background: var(--pj-accent);
    margin: 0 auto 28px;
}
.pj-newsletter__title {
    font-size: clamp(30px, 3.6vw, 40px);
    margin-bottom: 16px;
}
.pj-newsletter__text {
    font-size: 13px;
    line-height: 1.9;
    color: var(--pj-ink-soft);
    margin: 0 0 28px;
}
.pj-newsletter__form {
    display: flex;
}
.pj-newsletter__form input {
    border-right: 0;
}

/* ------------------------------------------------------------ Article ---- */

.pj-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 80;
    pointer-events: none;
}
.pj-progress span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--pj-accent);
    transition: width 0.12s linear;
}

/* ---- Masthead ---- */

.pj-posthead {
    position: relative;
    text-align: center;
}
.pj-posthead__inner {
    position: relative;
    z-index: 2;
    max-width: 820px;
    margin: 0 auto;
}

.pj-posthead__eyebrow {
    margin-bottom: 18px;
    color: var(--pj-accent);
}

.pj-posthead__title {
    font-size: calc(clamp(38px, 5.6vw, 68px) * var(--pj-title-scale));
    max-width: 20ch;
    margin: 0 auto;
}

.pj-posthead__standfirst {
    font-family: var(--pj-display);
    font-size: clamp(18px, 2.1vw, 24px);
    font-style: italic;
    font-weight: 300;
    line-height: 1.6;
    max-width: 48ch;
    margin: 22px auto 0;
    color: var(--pj-ink-soft);
}

.pj-posthead__meta {
    justify-content: center;
    margin-top: 30px;
}

.pj-crumbs {
    display: flex;
    justify-content: center;
    gap: 10px;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--pj-ink-soft);
    margin-bottom: 26px;
}
.pj-crumbs a {
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
}
.pj-crumbs a:hover {
    border-color: currentColor;
}
.pj-crumbs span {
    opacity: 0.45;
}

/* Stacked and minimal: type on the page background. */

.pj-posthead--stacked,
.pj-posthead--minimal {
    padding: clamp(48px, 7vw, 92px) var(--pj-gutter) clamp(32px, 4vw, 48px);
}
.pj-posthead--minimal {
    padding-bottom: clamp(40px, 5vw, 64px);
}
.pj-posthead--minimal .pj-posthead__inner::after {
    content: "";
    display: block;
    width: 64px;
    height: 1px;
    margin: clamp(32px, 4vw, 48px) auto 0;
    background: var(--pj-accent);
}

/* Immersive: type on the cover image, behind a scrim. Mirrors the hero on
   the front page. */

.pj-posthead--immersive {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: clamp(460px, 76vh, 760px);
    padding: clamp(72px, 12vw, 140px) var(--pj-gutter) clamp(48px, 7vw, 84px);
    background: var(--pj-deep);
    color: #fff;
    overflow: hidden;
}

.pj-posthead__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.pj-posthead__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pj-posthead__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, calc(var(--pj-scrim) * 0.55)) 0%,
        rgba(0, 0, 0, calc(var(--pj-scrim) * 0.35)) 38%,
        rgba(0, 0, 0, var(--pj-scrim)) 100%
    );
}

.pj-posthead--immersive .pj-posthead__title {
    color: #fff;
    text-shadow: 0 1px 30px rgba(0, 0, 0, 0.35);
}
.pj-posthead--immersive .pj-posthead__standfirst {
    color: rgba(255, 255, 255, 0.82);
}
.pj-posthead--immersive .pj-crumbs,
.pj-posthead--immersive .pj-metaline {
    color: rgba(255, 255, 255, 0.72);
}
.pj-posthead--immersive .pj-posthead__eyebrow,
.pj-posthead--immersive .pj-metaline .pj-meta__cat {
    color: #fff;
}
.pj-posthead--immersive .pj-posthead__eyebrow {
    opacity: 0.85;
}
.pj-posthead--immersive :focus-visible {
    outline-color: #fff;
}

/* ---- Cover (stacked masthead) ---- */

.pj-cover {
    max-width: var(--pj-max);
    margin: 0 auto;
    padding: 0 var(--pj-gutter);
}
.pj-cover__img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--pj-chip);
}
.pj-cover figcaption {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pj-ink-soft);
    margin-top: 14px;
    text-align: center;
}

/* ---- Reading grid ---- */

.pj-post__body {
    max-width: var(--pj-max);
    margin: 0 auto;
    padding: clamp(44px, 6vw, 80px) var(--pj-gutter) clamp(48px, 6vw, 80px);
}

.pj-post__column {
    max-width: var(--pj-measure);
    margin: 0 auto;
    min-width: 0;
}

/* Three tracks so the prose stays optically centred on the page while the
   rail sits out in the left margin. */
.pj-post__body--railed {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--pj-measure)) minmax(0, 1fr);
    column-gap: clamp(28px, 4vw, 64px);
    align-items: start;
}
.pj-post__body--railed .pj-post__column {
    grid-column: 2;
    max-width: none;
}

.pj-rail {
    grid-column: 1;
    justify-self: end;
    width: 100%;
    max-width: 220px;
}
.pj-rail__sticky {
    position: sticky;
    top: var(--pj-sticky-top);
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

/* ---- Contents ---- */

.pj-toc {
    border-left: 1px solid var(--pj-line);
    padding: 2px 0 2px 18px;
}
.pj-toc__label {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--pj-ink-soft);
    margin: 0 0 14px;
}
.pj-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: pj-toc;
}
.pj-toc__list li {
    counter-increment: pj-toc;
}
.pj-toc__list li + li {
    margin-top: 11px;
}
.pj-toc__list a {
    display: block;
    font-size: 13px;
    line-height: 1.5;
    color: var(--pj-ink-soft);
    transition: color 0.3s ease;
}
.pj-toc__list a::before {
    content: counter(pj-toc, decimal-leading-zero);
    display: inline-block;
    width: 26px;
    font-size: 9px;
    letter-spacing: 0.12em;
    color: var(--pj-accent);
    opacity: 0.6;
}
.pj-toc__list a:hover,
.pj-toc__list a.is-current {
    color: var(--pj-ink);
}
.pj-toc__list a.is-current::before {
    opacity: 1;
}

/* ---- Prose ---- */

.pj-prose {
    font-size: 17px;
    line-height: 1.95;
    color: #2a241f;
}
.pj-prose > * + * {
    margin-top: 1.45em;
}
.pj-prose p {
    margin: 0;
}

.pj-prose--dropcap > p:first-of-type::first-letter {
    float: left;
    font-family: var(--pj-display);
    font-size: 4.2em;
    line-height: 0.8;
    padding: 0.06em 0.12em 0 0;
    color: var(--pj-ink);
}

.pj-prose h2,
.pj-prose h3,
.pj-prose h4 {
    font-family: var(--pj-display);
    font-weight: 400;
    line-height: 1.24;
    margin: 2em 0 0.5em;
    scroll-margin-top: 100px;
}
.pj-prose h2 {
    font-size: calc(clamp(28px, 3.2vw, 36px) * var(--pj-title-scale));
}
.pj-prose h3 {
    font-size: calc(clamp(22px, 2.6vw, 27px) * var(--pj-title-scale));
}
.pj-prose h4 {
    font-size: 20px;
}

.pj-prose a {
    color: var(--pj-ink);
    border-bottom: 1px solid var(--pj-accent);
    transition: color 0.3s ease;
}
.pj-prose a:hover {
    color: var(--pj-accent);
}

.pj-prose blockquote {
    margin: 2.4em 0;
    padding: 0;
    text-align: center;
    font-family: var(--pj-display);
    font-size: clamp(22px, 2.8vw, 30px);
    font-style: italic;
    line-height: 1.45;
    color: var(--pj-ink);
}
.pj-prose blockquote p {
    margin: 0;
}
.pj-prose blockquote::before {
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    background: var(--pj-accent);
    transform: rotate(45deg);
    margin: 0 auto 22px;
}
.pj-prose blockquote cite {
    display: block;
    margin-top: 18px;
    font-family: var(--pj-body);
    font-size: 10px;
    font-style: normal;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--pj-ink-soft);
}

.pj-prose figure {
    margin: 2.6em 0;
}
.pj-prose .alignwide,
.pj-prose .alignfull {
    width: calc(100% + 2 * clamp(0px, 6vw, 130px));
    max-width: none;
    margin-left: calc(-1 * clamp(0px, 6vw, 130px));
}
.pj-prose figcaption {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pj-ink-soft);
    margin-top: 14px;
    text-align: center;
}

.pj-prose ul,
.pj-prose ol {
    padding-left: 1.15em;
}
.pj-prose li::marker {
    color: var(--pj-accent);
}
.pj-prose li + li {
    margin-top: 0.5em;
}
.pj-prose hr {
    border: 0;
    border-top: 1px solid var(--pj-line);
    margin: 3em 0;
}
.pj-prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.pj-prose th,
.pj-prose td {
    border-bottom: 1px solid var(--pj-line);
    padding: 12px 8px;
    text-align: left;
}
.pj-prose th {
    font-weight: 400;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pj-ink-soft);
}

.pj-pagelinks {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 3em;
    font-size: 12px;
}

/* ---- Article footer ---- */

.pj-postfoot {
    margin-top: 56px;
}

.pj-postfoot__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 0;
    border-top: 1px solid var(--pj-line);
    border-bottom: 1px solid var(--pj-line);
}

.pj-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.pj-tags a {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pj-ink-soft);
    border: 1px solid var(--pj-line);
    padding: 7px 13px;
    transition:
        border-color 0.3s ease,
        color 0.3s ease;
}
.pj-tags a:hover {
    border-color: var(--pj-ink);
    color: var(--pj-ink);
}

.pj-postfoot__back {
    flex-shrink: 0;
}

/* Share lives in the sticky rail, so it stacks on wide screens and lies flat
   when the rail collapses above the prose. */
.pj-share {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}
.pj-share .pj-label {
    padding-left: 18px;
}
.pj-share__list {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0 0 0 18px;
}
.pj-share__list a,
.pj-share__list button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: var(--pj-surface);
    border: 1px solid var(--pj-line);
    cursor: pointer;
    color: var(--pj-ink-soft);
    transition:
        border-color 0.3s ease,
        color 0.3s ease,
        background 0.3s ease;
}
.pj-share__list svg {
    width: 15px;
    height: 15px;
}
.pj-share__list a:hover,
.pj-share__list button:hover {
    border-color: var(--pj-ink);
    background: var(--pj-ink);
    color: #fff;
}
.pj-copy.is-copied {
    border-color: var(--pj-accent);
    color: var(--pj-accent);
}

.pj-author {
    display: grid;
    grid-template-columns: 82px 1fr;
    gap: 26px;
    align-items: start;
    margin-top: 44px;
    background: var(--pj-surface);
    border: 1px solid var(--pj-line);
    padding: clamp(22px, 3vw, 34px);
}
.pj-author__avatar {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    filter: grayscale(1);
}
.pj-author__name {
    font-size: 26px;
    margin: 8px 0 12px;
}
.pj-author__bio {
    font-size: 13px;
    line-height: 1.9;
    color: var(--pj-ink-soft);
    margin: 0 0 18px;
    max-width: 56ch;
}

/* ---- Adjacent ---- */

.pj-adjacent {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: var(--pj-line);
}
.pj-adjacent__link {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 280px;
    padding: 38px clamp(24px, 4vw, 50px);
    background:
        var(--pj-adjacent-image) center / cover no-repeat,
        var(--pj-chip);
    color: #fff;
    overflow: hidden;
}
.pj-adjacent__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(22, 18, 15, 0.15) 0%,
        rgba(22, 18, 15, 0.7) 100%
    );
    transition: background 0.5s ease;
}
.pj-adjacent__link:hover .pj-adjacent__veil {
    background: rgba(22, 18, 15, 0.78);
}
.pj-adjacent__body {
    position: relative;
    z-index: 1;
}
.pj-adjacent__body .pj-label {
    display: block;
    margin-bottom: 12px;
}
.pj-adjacent__title {
    font-size: clamp(22px, 2.4vw, 30px);
    max-width: 18ch;
    display: block;
}
.pj-adjacent__link--next {
    text-align: right;
    justify-content: flex-end;
}
.pj-adjacent__link--next .pj-adjacent__title {
    margin-left: auto;
}

/* ----------------------------------------------------------- Comments ---- */

.pj-comments {
    border-top: 1px solid var(--pj-line);
}
.pj-comments__inner {
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(48px, 6vw, 80px) var(--pj-gutter);
}

.pj-comments__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 40px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--pj-line);
}
.pj-comments__title {
    font-size: calc(clamp(26px, 3vw, 34px) * var(--pj-title-scale));
}

.pj-comments__list,
.pj-comments__list .children {
    list-style: none;
    margin: 0;
    padding: 0;
}
.pj-comments__list .children {
    margin-top: 24px;
    padding-left: clamp(20px, 4vw, 52px);
    border-left: 1px solid var(--pj-line);
}
.pj-comment {
    margin: 0 0 28px;
}

.pj-comment__inner {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 18px;
    background: var(--pj-surface);
    border: 1px solid var(--pj-line);
    padding: clamp(18px, 2vw, 26px);
}
.pj-comment__avatar img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    filter: grayscale(1);
}
.pj-comment__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.pj-comment__author {
    font-family: var(--pj-display);
    font-size: 19px;
}
.pj-comment__date {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pj-ink-soft);
    white-space: nowrap;
}
.pj-comment__pending {
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--pj-accent);
    margin: 0 0 8px;
}
.pj-comment__text {
    font-size: 14px;
    line-height: 1.85;
}
.pj-comment__text p {
    margin: 0 0 0.8em;
}
.pj-comment__text p:last-child {
    margin-bottom: 0;
}

.pj-comment__foot {
    display: flex;
    gap: 16px;
    margin-top: 14px;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.pj-comment__foot a {
    color: var(--pj-ink-soft);
    border-bottom: 1px solid transparent;
    transition:
        color 0.3s ease,
        border-color 0.3s ease;
}
.pj-comment__foot a:hover {
    color: var(--pj-accent);
    border-color: var(--pj-accent);
}

.pj-comments__closed {
    font-size: 13px;
    color: var(--pj-ink-soft);
    text-align: center;
    padding: 20px 0 40px;
}

.pj-pages--comments {
    margin: 8px 0 40px;
}

/* ---- Comment form ---- */

.pj-commentform {
    margin-top: 48px;
    padding-top: 40px;
    border-top: 1px solid var(--pj-line);
}
.pj-commentform__title {
    font-size: 26px;
    margin: 0 0 8px;
}
.pj-commentform__form {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 24px;
}
.pj-field {
    margin: 0;
}
.pj-field--full,
.pj-commentform__form .form-submit,
.pj-commentform__form .comment-form-cookies-consent {
    grid-column: 1 / -1;
}
.pj-field label,
.pj-commentform label {
    display: block;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--pj-ink-soft);
    margin-bottom: 8px;
}
.pj-commentform input:not([type="submit"]):not([type="checkbox"]),
.pj-commentform textarea {
    width: 100%;
    border: 1px solid var(--pj-line);
    background: var(--pj-surface);
    padding: 13px 16px;
    font-family: var(--pj-body);
    font-size: 14px;
    font-weight: 300;
    color: var(--pj-ink);
    transition: border-color 0.3s ease;
}
.pj-commentform input:focus,
.pj-commentform textarea:focus {
    border-color: var(--pj-accent);
    outline: none;
}
.pj-commentform textarea {
    resize: vertical;
}

.pj-commentform .comment-form-cookies-consent {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pj-commentform .comment-form-cookies-consent label {
    margin: 0;
    letter-spacing: 0.06em;
    text-transform: none;
    font-size: 12px;
}

.pj-commentform .form-submit {
    margin: 0;
}
.pj-commentform input[type="submit"] {
    border: 0;
    cursor: pointer;
    font-family: var(--pj-body);
}
.pj-commentform .comment-reply-title small {
    margin-left: 12px;
    font-size: 11px;
}
.pj-commentform .logged-in-as {
    font-size: 12px;
    color: var(--pj-ink-soft);
    margin: 0;
}

/* ------------------------------------------------------------- Footer ---- */

.pj-footer {
    background: var(--pj-footer);
    color: var(--pj-ink);
    padding: clamp(48px, 6vw, 72px) var(--pj-gutter) 0;
    border-top: 1px solid var(--pj-line);
}
.pj-footer__inner {
    max-width: var(--pj-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.7fr repeat(3, 1fr);
    gap: 44px;
    padding-bottom: 48px;
}
.pj-footer__mark {
    display: block;
    font-family: var(--pj-display);
    font-size: 24px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.pj-footer__brand p {
    font-size: 12px;
    line-height: 1.9;
    max-width: 34ch;
    margin: 0 0 22px;
    color: var(--pj-ink-soft);
}
.pj-footer__col .pj-label {
    margin-bottom: 18px;
}
.pj-footer .pj-menu {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}
.pj-footer .pj-menu a {
    font-size: 12px;
    color: var(--pj-ink-soft);
    transition: color 0.3s ease;
}
.pj-footer .pj-menu a:hover {
    color: var(--pj-accent);
}

.pj-social {
    display: flex;
    gap: 16px;
}
.pj-social a {
    color: var(--pj-ink-soft);
    transition: color 0.3s ease;
}
.pj-social a:hover {
    color: var(--pj-accent);
}
.pj-social svg {
    width: 17px;
    height: 17px;
}

.pj-footer__base {
    max-width: var(--pj-max);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0 24px;
    border-top: 1px solid var(--pj-line);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--pj-ink-soft);
}

/* ========================================================== Atelier ====== */
/* The house style: section headings in gold, item titles in ink, sections
   alternating between the page ivory and a warmer band. */

/* ---- Headings ---- */

/* Section-level headings carry the gold. Item titles — cards, the author
   name, prev / next tiles — stay in ink so the hierarchy reads at a glance. */
.pj-section-title,
.pj-newsletter__title,
.pj-comments__title,
.pj-pagehead__title,
.pj-posthead__title,
.pj-prose h2 {
    color: var(--pj-accent);
    font-weight: 300;
}

.pj-prose h2 {
    font-size: calc(clamp(25px, 2.7vw, 31px) * var(--pj-title-scale));
    letter-spacing: 0.005em;
}

/* ---- Section head: gold title over a hairline eyebrow ---- */

.pj-section-head {
    text-align: center;
    margin-bottom: clamp(40px, 5vw, 60px);
}
.pj-section-head .pj-section-title {
    margin-bottom: 10px;
}
.pj-section-head__sub {
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--pj-ink-soft);
    margin: 0;
}

/* ---- Alternating bands ---- */

.pj-comments,
.pj-newsletter--band {
    background: var(--pj-band);
}
.pj-comments {
    border-top: 1px solid var(--pj-line);
    border-bottom: 1px solid var(--pj-line);
}
.pj-newsletter--band {
    max-width: none;
    border-top: 1px solid var(--pj-line);
}
.pj-newsletter--band .pj-newsletter__inner {
    max-width: 560px;
}

/* ---- Newsletter ---- */

.pj-newsletter__icon {
    display: block;
    width: 26px;
    height: 26px;
    margin: 0 auto 24px;
    color: var(--pj-accent);
}
.pj-newsletter__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
.pj-newsletter--band .pj-newsletter__form input {
    background: var(--pj-surface);
}

/* ---- Chips read as quiet labels, not badges ---- */

.pj-chip {
    background: var(--pj-chip);
    color: var(--pj-ink-soft);
    border: 1px solid var(--pj-line);
    padding: 5px 11px;
    letter-spacing: 0.2em;
}

/* ---- Related: staggered, numbered ---- */

.pj-stories--related .pj-grid {
    counter-reset: pj-rel;
}
.pj-stories--related .pj-card {
    counter-increment: pj-rel;
}

/* The numeral sits at the end of the card's meta row, opposite the chip. */
.pj-stories--related .pj-card__meta::after {
    content: counter(pj-rel, decimal-leading-zero);
    font-size: 9px;
    letter-spacing: 0.16em;
    color: var(--pj-accent);
    opacity: 0.65;
    order: 3;
}
.pj-stories--related .pj-card__time {
    order: 2;
    margin-left: auto;
    margin-right: 14px;
}

/* Drop every other card so the row breathes the way the reference does.
   Only above the breakpoint where the grid is genuinely multi-column. */
@media (min-width: 821px) {
    .pj-stories--related .pj-card:nth-child(even) {
        margin-top: clamp(28px, 4vw, 56px);
    }
}

/* ---- Immersive masthead: gold title on the photograph ---- */

.pj-posthead--immersive .pj-posthead__title {
    color: var(--pj-accent-light);
    text-shadow: 0 1px 34px rgba(0, 0, 0, 0.55);
}
.pj-posthead--immersive .pj-posthead__eyebrow {
    color: var(--pj-accent-light);
    opacity: 1;
}

/* ---- Prose: quieter rules, gold marginalia ---- */

.pj-prose hr {
    border: 0;
    height: 1px;
    background: var(--pj-line);
}
.pj-prose blockquote {
    border: 0;
}
.pj-prose--dropcap > p:first-of-type::first-letter {
    color: var(--pj-accent);
}

/* ---- Footer: wordmark left, links right, hairline above ---- */

.pj-footer {
    background: var(--pj-footer);
    border-top: 1px solid var(--pj-line);
}
.pj-footer__mark {
    color: var(--pj-ink);
}

/* ------------------------------------- Featured: banner and stacked ---- */

/* The scrim is only drawn for the banner treatment. */
.pj-featured__scrim {
    display: none;
}

/* ---- Banner: the poster treatment, type on a wide cover image ---- */

.pj-featured--banner .pj-featured__inner {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: var(--pj-feat-h);
    padding: clamp(28px, 4vw, 64px);
    background: var(--pj-deep);
    border-radius: var(--pj-radius);
    overflow: hidden;
}

/* Full-bleed variant: out of the page width and hard to the window edges. */
.pj-featured--full {
    max-width: none;
    padding: 0;
}
.pj-featured--full .pj-featured__inner {
    border-radius: 0;
}

.pj-featured--banner .pj-featured__media {
    position: absolute;
    inset: 0;
    min-height: 0;
    height: auto;
    background: none;
}
.pj-featured--banner .pj-featured__scrim {
    display: block;
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, var(--pj-feat-scrim)) 0%,
        rgba(0, 0, 0, calc(var(--pj-feat-scrim) * 0.55)) 46%,
        rgba(0, 0, 0, calc(var(--pj-feat-scrim) * 0.22)) 100%
    );
}

.pj-featured--banner .pj-featured__panel {
    position: relative;
    z-index: 1;
    width: min(100%, 640px);
    margin: 0;
    padding: 0;
    background: none;
    color: #fff;
}
.pj-featured--banner .pj-featured__title {
    font-size: calc(clamp(32px, 4.4vw, 58px) * var(--pj-title-scale));
    color: var(--pj-accent-light);
    text-shadow: 0 1px 30px rgba(0, 0, 0, 0.4);
}
.pj-featured--banner .pj-featured__meta {
    color: rgba(255, 255, 255, 0.78);
}
.pj-featured--banner .pj-chip {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.34);
}
.pj-featured--banner .pj-featured__excerpt {
    max-width: 52ch;
    color: rgba(255, 255, 255, 0.82);
}
.pj-featured--banner .pj-featured__cta {
    color: var(--pj-accent-light);
}
.pj-featured--banner :focus-visible {
    outline-color: #fff;
}

/* Centred banner. */
.pj-featured--center .pj-featured__inner {
    align-items: center;
    justify-content: center;
    text-align: center;
}
.pj-featured--center .pj-featured__panel {
    width: min(100%, 760px);
    margin-inline: auto;
}
.pj-featured--center .pj-featured__meta {
    justify-content: center;
}
.pj-featured--center .pj-featured__excerpt {
    margin-inline: auto;
}

/* ---- Stacked: photograph above a centred panel ---- */

.pj-featured--stack .pj-featured__inner {
    display: block;
}
.pj-featured--stack .pj-featured__media {
    min-height: 0;
    aspect-ratio: 16 / 9;
    border-radius: var(--pj-radius);
}
.pj-featured--stack .pj-featured__panel {
    width: min(100% - 40px, 720px);
    margin: clamp(-72px, -5vw, -40px) auto 0;
    text-align: center;
    border-radius: var(--pj-radius);
}
.pj-featured--stack .pj-featured__meta {
    justify-content: center;
}
.pj-featured--stack .pj-featured__excerpt {
    max-width: 56ch;
    margin-inline: auto;
}

/* ------------------------------------------- Adjacent: simple links ---- */

/* The standard editorial ending: two text links on a hairline, sized to the
   reading column rather than the full page. */
.pj-adjacent--simple {
    display: block;
    max-width: var(--pj-max);
    margin: 0 auto;
    padding: 0 var(--pj-gutter);
    background: none;
}
.pj-adjacent--simple .pj-adjacent__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 4vw, 56px);
    max-width: var(--pj-measure);
    margin: 0 auto;
    padding: clamp(26px, 3.2vw, 40px) 0 clamp(40px, 5vw, 68px);
    border-top: 1px solid var(--pj-line);
}
.pj-adjacent--simple.pj-adjacent--one .pj-adjacent__inner {
    grid-template-columns: 1fr;
}

.pj-adjacent__item {
    display: block;
    min-width: 0;
}
.pj-adjacent__item--next {
    text-align: right;
}
.pj-adjacent__cue {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--pj-ink-soft);
}
.pj-adjacent__item--next .pj-adjacent__cue {
    flex-direction: row-reverse;
}
.pj-adjacent__cue svg {
    width: 22px;
    height: 8px;
    overflow: visible;
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pj-adjacent__item--prev .pj-adjacent__cue svg {
    transform: scaleX(-1);
}
.pj-adjacent__item--prev:hover .pj-adjacent__cue svg {
    transform: scaleX(-1) translateX(4px);
}
.pj-adjacent__item--next:hover .pj-adjacent__cue svg {
    transform: translateX(4px);
}

.pj-adjacent--simple .pj-adjacent__title {
    display: block;
    max-width: none;
    margin-top: 12px;
    font-size: calc(clamp(19px, 2vw, 24px) * var(--pj-title-scale));
    color: var(--pj-ink);
    transition: color 0.3s ease;
}
.pj-adjacent--simple .pj-adjacent__item:hover .pj-adjacent__title {
    color: var(--pj-accent);
}

/* Tiles: a lone neighbour shouldn't stretch across the whole row. */
.pj-adjacent--tiles.pj-adjacent--one {
    grid-template-columns: 1fr;
}

/* ------------------------------------------------------------ Radius ---- */

/* Settings → Layout → Corner radius. 0 keeps the square editorial look, so
   these are all no-ops until it is raised. */
.pj-card__frame,
.pj-featured__media,
.pj-featured__panel,
.pj-cover__img,
.pj-btn,
.pj-chip,
.pj-author__avatar,
.pj-promo,
.pj-newsletter__form input,
.pj-commentform__form input,
.pj-commentform__form textarea,
.pj-search__form input {
    border-radius: var(--pj-radius);
}

/* ------------------------------------------------------------ Chrome ---- */

/* When the header and footer come from the theme, or are switched off, the
   rail can't assume the plugin's header height. Raise --pj-sticky-top in
   Design → Custom CSS if your own header is taller and overlaps the rail. */
.pj-chrome-theme,
.pj-no-header {
    --pj-sticky-top: 32px;
}

/* Without the plugin header there is no hairline under the masthead, so the
   page needs a little air of its own at the top. */
.pj-no-header .pj-pagehead {
    padding-top: clamp(40px, 6vw, 72px);
}

/* --------------------------------------------------------- Responsive ---- */

/* Below this width there is no margin left for the rail, so it folds into the
   flow above the prose: contents as a bordered box, share as a flat row. */
@media (max-width: 1120px) {
    .pj-post__body--railed {
        display: block;
    }
    .pj-post__body--railed .pj-post__column {
        max-width: var(--pj-measure);
        margin: 0 auto;
    }

    .pj-rail {
        max-width: var(--pj-measure);
        margin: 0 auto 40px;
    }
    .pj-rail__sticky {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        max-height: none;
        overflow: visible;
    }

    .pj-toc {
        flex: 1 1 100%;
        border-left: 0;
        border: 1px solid var(--pj-line);
        background: var(--pj-surface);
        padding: 22px 26px;
    }
    .pj-toc__list {
        column-count: 2;
        column-gap: 32px;
    }

    .pj-share {
        flex-direction: row;
        align-items: center;
    }
    .pj-share .pj-label,
    .pj-share__list {
        padding-left: 0;
    }
}

/* Tablet. The grid drops to the tablet column count set under Layout. */
@media (max-width: 1024px) {
    /* The class is doubled on purpose. Settings emit --pj-cols from a
       .pj-template rule in an inline <style> that loads after this file, and
       media queries add no specificity — so a single class would lose. */
    .pj-template.pj-template {
        --pj-cols: var(--pj-cols-tablet);
    }
    .pj-posthead__title {
        max-width: none;
    }
    .pj-featured--banner .pj-featured__panel {
        width: 100%;
    }
}

@media (max-width: 900px) {
    .pj-footer__inner {
        grid-template-columns: 1fr 1fr;
    }
    .pj-footer__brand {
        grid-column: 1 / -1;
    }

    /* Split featured folds to photograph over panel. */
    .pj-featured--split .pj-featured__inner {
        grid-template-columns: 1fr;
    }
    .pj-featured--split .pj-featured__media {
        grid-area: auto;
        min-height: 0;
        aspect-ratio: 4 / 3;
    }
    .pj-featured--split .pj-featured__panel {
        grid-area: auto;
        width: calc(100% - 32px);
        margin: -48px auto 0;
        justify-self: center;
    }

    /* Banner: never taller than most of the viewport, whatever the setting. */
    .pj-featured--banner .pj-featured__inner {
        min-height: min(var(--pj-feat-h), 64vh);
    }
}

@media (max-width: 820px) {
    .pj-header__nav--left {
        display: none;
    }
    .pj-header__link {
        display: none;
    }
    .pj-burger {
        display: block;
    }
    .pj-header__inner {
        grid-template-columns: 1fr auto;
    }

    .pj-adjacent--tiles {
        grid-template-columns: 1fr;
    }
    .pj-adjacent__link {
        min-height: 210px;
    }
    .pj-adjacent__link--next {
        text-align: left;
        justify-content: flex-start;
    }
    .pj-adjacent__link--next .pj-adjacent__title {
        margin-left: 0;
    }

    .pj-author {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .pj-postfoot__row {
        flex-direction: column;
        align-items: flex-start;
    }

    .pj-toc__list {
        column-count: 1;
    }
    .pj-posthead--immersive {
        min-height: 0;
        padding-top: clamp(56px, 22vw, 96px);
    }
    .pj-posthead__standfirst {
        font-size: 17px;
    }
    .pj-prose {
        font-size: 16px;
    }
    .pj-prose .alignwide,
    .pj-prose .alignfull {
        width: 100%;
        margin-left: 0;
    }

    .pj-commentform__form {
        grid-template-columns: 1fr;
    }
    .pj-comment__inner {
        grid-template-columns: 1fr;
    }
    .pj-comment__avatar {
        display: none;
    }

    .pj-newsletter__form {
        flex-direction: column;
        gap: 10px;
    }
    .pj-newsletter__form input {
        border-right: 1px solid var(--pj-line);
    }
    .pj-search__form {
        flex-direction: column;
    }
    .pj-footer__base {
        flex-direction: column;
    }
}

/* Phone. The grid drops to the mobile column count set under Layout. */
@media (max-width: 700px) {
    .pj-template.pj-template {
        --pj-cols: var(--pj-cols-mobile);
    }
    .pj-grid {
        gap: 26px;
    }

    /* Two columns on a phone only works with the type dialled back. */
    .pj-card__title {
        font-size: calc(clamp(18px, 4.4vw, 22px) * var(--pj-title-scale));
    }

    /* Categories scroll sideways instead of stacking into three tall rows. */
    .pj-filters {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-inline: calc(-1 * var(--pj-gutter));
        padding-inline: var(--pj-gutter);
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .pj-filters::-webkit-scrollbar {
        display: none;
    }
    .pj-filters > * {
        flex: 0 0 auto;
    }

    /* Previous / next stack, the next link separated by its own hairline. */
    .pj-adjacent--simple .pj-adjacent__inner {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .pj-adjacent__item--next {
        text-align: left;
        padding-top: 24px;
        border-top: 1px solid var(--pj-line);
    }
    .pj-adjacent--simple.pj-adjacent--one .pj-adjacent__item--next {
        padding-top: 0;
        border-top: 0;
    }

    .pj-featured--banner .pj-featured__inner {
        padding: clamp(20px, 5vw, 32px);
    }
}

@media (max-width: 560px) {
    .pj-featured__panel {
        padding: 24px;
    }
    .pj-featured--stack .pj-featured__panel {
        width: calc(100% - 24px);
        margin-top: -32px;
    }

    /* On a small screen the banner is a title, not a paragraph. */
    .pj-featured--banner .pj-featured__excerpt {
        display: none;
    }
    .pj-featured--banner .pj-featured__inner {
        min-height: min(var(--pj-feat-h), 76vw);
    }
    .pj-featured--banner .pj-featured__title {
        font-size: calc(clamp(26px, 7.4vw, 36px) * var(--pj-title-scale));
    }

    .pj-pagehead {
        padding-top: clamp(40px, 12vw, 64px);
    }
    .pj-footer__inner {
        grid-template-columns: 1fr;
    }

    /* Wide blocks in the prose stay inside the gutter. */
    .pj-prose .alignwide,
    .pj-prose .alignfull {
        width: 100%;
        margin-left: 0;
        max-width: 100%;
    }
}

/* Small phones: single column regardless of the mobile setting, because two
   cards at this width leave no room for a title. */
@media (max-width: 400px) {
    .pj-template.pj-template {
        --pj-cols: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pj-js .pj-card[data-pj-reveal] {
        opacity: 1;
        transform: none;
    }
    .pj-card__frame:not(.is-loaded) {
        animation: none;
    }

    .pj-template *,
    .pj-template *::before,
    .pj-template *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

/* ==========================================================================
   Theme mode — Settings → Header & footer → "My theme or header/footer builder"

   In this mode the theme's header.php opens the document, so our <main> is
   handed to us already inside the theme's own wrappers: #page, #content,
   .site-content, .container, .elementor-section and so on. Those wrappers
   carry a max-width of their own (1140px on most themes), which is why the
   page width set under Layout looks like it does nothing, and they carry
   padding, floats and grid columns that squeeze the journal layout.

   Nothing below runs in standalone mode.
   ========================================================================== */

/* ----------------------------------------------- Out of the container ---- */

/* Two selectors for the same job. :has() finds the wrappers on its own in
   current browsers, before the first paint. The .pj-ancestor class is added
   by journal.js and covers everything older. */
.pj-chrome-theme.pj-unwrap .pj-ancestor,
.pj-chrome-theme.pj-unwrap :has(#pj-main) {
    max-width: none !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* The immediate parent only. Dropping it to block undoes a content/sidebar
   grid or a float pair; doing this to every ancestor would flatten the
   theme's own header layout too. */
.pj-chrome-theme.pj-unwrap .pj-ancestor--parent,
.pj-chrome-theme.pj-unwrap :has(> #pj-main) {
    display: block !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.pj-chrome-theme .pj-main {
    width: 100%;
}

/* ------------------------------------------------------ Theme sidebar ---- */

/* Our own rail is an <aside> inside .pj-main, so it is excluded by the
   :not() rather than by luck. */
.pj-chrome-theme.pj-hide-aside
    :is(#secondary, #sidebar, .sidebar, .widget-area, .sidebar-primary,
        .sidebar-container, .site-sidebar, .elementor-sidebar):not(.pj-main *) {
    display: none !important;
}

/* ------------------------------------------------------ Sticky header ---- */

/* --pj-sticky-top is 32px by default in theme mode, overwritten by the number
   in Settings, or by the height journal.js measures off a sticky theme header.
   Anchor targets have to clear the same header or a heading lands underneath
   it when the contents rail is clicked. */
.pj-chrome-theme .pj-prose h2,
.pj-chrome-theme .pj-prose h3,
.pj-chrome-theme .pj-prose h4 {
    scroll-margin-top: calc(var(--pj-sticky-top) + 24px);
}

/* The reading progress bar pins to the top of the window, which is behind a
   sticky theme header. Move it under the header instead. */
.pj-chrome-theme .pj-progress {
    top: var(--pj-sticky-top);
}

/* ------------------------------------------------ Force plugin styling ---- */

/* Header & footer → "Force plugin styling over the theme". Off by default.
   Themes style content on selectors like .entry-content p or #content h2,
   which outrank single-class plugin selectors no matter which file loads
   last. These re-assert the design's own values with enough weight to win. */

.pj-force .pj-main,
.pj-force .pj-main :is(p, li, dd, dt, td, th, label, input, button, textarea, select) {
    font-family: var(--pj-body) !important;
}

.pj-force .pj-main :is(h1, h2, h3, h4, h5, h6),
.pj-force .pj-main .pj-display,
.pj-force .pj-prose blockquote {
    font-family: var(--pj-display) !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.pj-force .pj-main {
    color: var(--pj-ink) !important;
    line-height: 1.75 !important;
    text-align: left;
}

/* Theme link colours and underlines are the most visible bleed of all. */
.pj-force .pj-main a {
    color: inherit;
    text-decoration: none !important;
    box-shadow: none !important;
}
.pj-force .pj-prose a {
    color: var(--pj-ink) !important;
    border-bottom: 1px solid var(--pj-accent) !important;
}
.pj-force .pj-prose a:hover {
    color: var(--pj-accent) !important;
}

/* Card and section chrome: themes add radii, shadows and background tints to
   anything that looks like a card. */
.pj-force .pj-main :is(article, .pj-card, .pj-card__frame, .pj-featured__inner) {
    box-shadow: none !important;
    text-shadow: none !important;
}
.pj-force .pj-main :is(img, figure) {
    box-shadow: none !important;
    border: 0 !important;
}
.pj-force .pj-main figure {
    max-width: none !important;
}

/* Buttons and inputs, which nearly every theme restyles globally. */
.pj-force .pj-main :is(.pj-btn, .pj-chip, button, input[type="submit"]) {
    text-transform: uppercase;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Ordered and unordered lists in the prose keep their markers; some themes
   strip them from every list on the site. */
.pj-force .pj-prose :is(ul, ol) {
    list-style-position: outside !important;
    padding-left: 1.4em !important;
    margin-left: 0 !important;
}
.pj-force .pj-prose ul {
    list-style-type: disc !important;
}
.pj-force .pj-prose ol {
    list-style-type: decimal !important;
}

/* ==========================================================================
   SINGLE POST LAYOUTS
   Settings → Single post → Post layout.

   Five designs over one set of template parts. Everything below is additive:
   it is scoped to .pj-layout-* on the body or to the .pj-post__body--* and
   .pj-aside classes, none of which existed before this section, so nothing
   above is altered. Every colour comes from the palette in Settings → Design,
   so all five follow your brand automatically.

   journal   — the original. Sticky contents rail in the left margin.
   magazine  — prose with an editorial sidebar, separated by hairlines.
   classic   — cover image first, sidebar blocks in tinted panels.
   editorial — left-aligned display masthead, boxed sidebar, wide measure.
   centered  — one narrow centred column, nothing beside it.
   ========================================================================== */

/* Overridden inline from Settings → Single post → Sidebar width. Declared here
   too so the stylesheet stands up on its own. */
.pj-template {
    --pj-aside-w: 320px;
}

/* -------------------------------------------------- Cover-first masthead --- */

/* The image runs first, so it needs the space the masthead would have had
   above it, and the type below it tightens up. */
.pj-posthead--cover {
    padding: clamp(32px, 4vw, 52px) var(--pj-gutter) clamp(28px, 3.5vw, 44px);
}
.pj-post .pj-cover:first-child {
    padding-top: clamp(28px, 4vw, 56px);
}

/* ----------------------------------------------------- The reading grid --- */

/* Two tracks, centred as a pair: the prose keeps its measure and the sidebar
   takes the width set in Settings, whatever the page width is. */
.pj-post__body--aside {
    display: grid;
    grid-template-columns: minmax(0, var(--pj-measure)) minmax(0, var(--pj-aside-w));
    justify-content: center;
    column-gap: clamp(32px, 4.5vw, 76px);
    align-items: start;
}
.pj-post__body--aside .pj-post__column {
    grid-column: 1;
    max-width: none;
    margin: 0;
}
.pj-aside {
    grid-column: 2;
    min-width: 0;
}

/* Sidebar on the left: swap the tracks rather than reordering the markup, so
   the article still comes first for screen readers and for search engines. */
.pj-post__body--aside-left {
    grid-template-columns: minmax(0, var(--pj-aside-w)) minmax(0, var(--pj-measure));
}
.pj-post__body--aside-left .pj-post__column {
    grid-column: 2;
}
.pj-post__body--aside-left .pj-aside {
    grid-column: 1;
}

.pj-aside__inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.pj-aside--sticky .pj-aside__inner {
    position: sticky;
    top: var(--pj-sticky-top);
    max-height: calc(100vh - var(--pj-sticky-top) - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

/* --------------------------------------------------- Sidebar: the parts --- */

.pj-aside__title {
    font-size: calc(10px * var(--pj-aside-title, 1));
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--pj-ink-soft);
    margin: 0 0 18px;
}

.pj-aside__block--toc {
    /* The rail version hangs off a left hairline; in the sidebar it sits in
       the block flow with the others, so that border is dropped. */
    border-left: 0;
    padding: 0;
}

.pj-aside__block--share .pj-share,
.pj-aside__block--share .pj-share .pj-label,
.pj-aside__block--share .pj-share__list {
    padding-left: 0;
}

/* Author */

.pj-aside__avatar {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin-bottom: 20px;
    border-radius: var(--pj-radius);
}
.pj-aside__name {
    font-size: calc(22px * var(--pj-title-scale));
    line-height: 1.2;
    margin: 0 0 12px;
}
.pj-aside__bio {
    font-size: 14px;
    line-height: 1.8;
    color: var(--pj-ink-soft);
    margin: 0 0 20px;
}

/* Search */

.pj-aside__search {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--pj-line);
    background: var(--pj-surface);
    border-radius: var(--pj-radius);
    overflow: hidden;
}
.pj-aside__search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: none;
    padding: 13px 16px;
    font-family: var(--pj-body);
    font-size: 13px;
    color: var(--pj-ink);
}
.pj-aside__search input:focus {
    outline: none;
}
.pj-aside__search button {
    flex: 0 0 auto;
    width: 46px;
    border: 0;
    background: none;
    color: var(--pj-ink-soft);
    cursor: pointer;
    transition: color 0.3s ease;
}
.pj-aside__search button:hover {
    color: var(--pj-accent);
}
.pj-aside__search svg {
    width: 16px;
    height: 16px;
}

/* Category list */

.pj-aside__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.pj-aside__list a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--pj-line);
    font-size: calc(14px * var(--pj-aside-item, 1));
    transition: color 0.3s ease;
}
.pj-aside__list li:first-child a {
    padding-top: 0;
}
.pj-aside__list a:hover {
    color: var(--pj-accent);
}
.pj-aside__list em {
    font-style: normal;
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--pj-ink-soft);
}

/* Post list */

.pj-aside__posts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.pj-aside__post-link {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.pj-aside__post-link--plain {
    grid-template-columns: minmax(0, 1fr);
}
.pj-aside__post-media {
    display: block;
    overflow: hidden;
    background: var(--pj-chip);
    border-radius: var(--pj-radius);
}
.pj-aside__post-img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pj-aside__post-link:hover .pj-aside__post-img {
    transform: scale(1.05);
}
.pj-aside__post-meta {
    display: block;
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--pj-ink-soft);
    margin-bottom: 7px;
}
.pj-aside__post-title {
    display: block;
    font-family: var(--pj-display);
    font-size: calc(17px * var(--pj-aside-item, 1));
    line-height: 1.32;
    transition: color 0.3s ease;
}
.pj-aside__post-link:hover .pj-aside__post-title {
    color: var(--pj-accent);
}

/* Promo box */

.pj-aside__block--cta {
    background: var(--pj-aside-bg, var(--pj-band));
    padding: 28px;
    border-radius: var(--pj-radius);
    text-align: center;
}
.pj-aside__cta-img {
    width: 100%;
    margin: 0 0 20px;
    border-radius: var(--pj-radius);
}
.pj-aside__cta-title {
    font-size: calc(22px * var(--pj-title-scale));
    line-height: 1.24;
    margin: 0 0 12px;
}
.pj-aside__cta-text {
    font-size: 14px;
    line-height: 1.75;
    color: var(--pj-ink-soft);
    margin: 0 0 22px;
}
.pj-aside__cta-btn {
    background: var(--pj-deep);
    color: #fff;
}
.pj-aside__cta-btn:hover {
    background: var(--pj-accent);
}

/* Third-party widgets dropped into the widget area. */

.pj-widget + .pj-widget {
    margin-top: 36px;
}
.pj-widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 14px;
}
.pj-widget li {
    padding: 10px 0;
    border-bottom: 1px solid var(--pj-line);
}
.pj-widget a:hover {
    color: var(--pj-accent);
}

/* ==================================================== Layout: magazine ==== */

/* Editorial weekly: a tight headline block, a wide cover, then the story with
   its furniture set off in the margin by hairlines rather than panels. */

.pj-layout-magazine .pj-posthead__title {
    max-width: 17ch;
}
.pj-layout-magazine .pj-posthead__standfirst {
    max-width: 44ch;
}

.pj-layout-magazine .pj-aside__block + .pj-aside__block {
    border-top: 1px solid var(--pj-line);
    padding-top: 32px;
}
.pj-layout-magazine .pj-aside__block--cta {
    border-top: 0;
    padding-top: 28px;
}

/* The first sidebar block lines up with the first line of the prose. */
.pj-layout-magazine .pj-aside__inner {
    padding-top: 4px;
}

.pj-layout-magazine .pj-prose {
    font-size: 17px;
}

/* ====================================================== Layout: classic ==== */

/* The familiar blog shape: photograph, headline, byline, story, sidebar in
   soft panels. Sans-serif headings keep it contemporary rather than literary. */

.pj-layout-classic .pj-posthead {
    text-align: left;
}
.pj-layout-classic .pj-posthead__inner {
    max-width: var(--pj-max);
    padding: 0;
}
.pj-layout-classic .pj-posthead--cover .pj-posthead__inner,
.pj-layout-classic .pj-posthead--stacked .pj-posthead__inner,
.pj-layout-classic .pj-posthead--minimal .pj-posthead__inner {
    max-width: calc(var(--pj-measure) + var(--pj-aside-w) + 76px);
}
.pj-layout-classic .pj-posthead__title {
    font-family: var(--pj-body);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.16;
    font-size: calc(clamp(30px, 4vw, 46px) * var(--pj-title-scale));
    max-width: 24ch;
    margin: 0;
}
.pj-layout-classic .pj-posthead__standfirst {
    font-family: var(--pj-body);
    font-style: normal;
    font-size: 17px;
    line-height: 1.8;
    max-width: 62ch;
    margin-left: 0;
}
.pj-layout-classic .pj-posthead__meta,
.pj-layout-classic .pj-crumbs {
    justify-content: flex-start;
}
.pj-layout-classic .pj-posthead--minimal .pj-posthead__inner::after {
    margin-left: 0;
}

.pj-layout-classic .pj-prose {
    font-size: 16px;
    line-height: 1.85;
}
.pj-layout-classic .pj-prose h2,
.pj-layout-classic .pj-prose h3,
.pj-layout-classic .pj-prose h4 {
    font-family: var(--pj-body);
    font-weight: 500;
    letter-spacing: -0.005em;
}
.pj-layout-classic .pj-prose blockquote {
    text-align: left;
    padding: 26px 30px;
    background: var(--pj-band);
    border-radius: var(--pj-radius);
    font-size: clamp(18px, 2vw, 22px);
}
.pj-layout-classic .pj-prose blockquote::before {
    margin-left: 0;
}

/* Panels rather than hairlines. */
.pj-layout-classic .pj-aside__block {
    background: var(--pj-aside-bg, var(--pj-band));
    padding: 26px 24px;
    border-radius: var(--pj-radius);
}
.pj-layout-classic .pj-aside__title {
    font-family: var(--pj-body);
    font-size: calc(13px * var(--pj-aside-title, 1));
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: none;
    color: var(--pj-ink);
}
.pj-layout-classic .pj-aside__post-title,
.pj-layout-classic .pj-aside__name {
    font-family: var(--pj-body);
    font-weight: 500;
}
.pj-layout-classic .pj-aside__list a {
    border-color: color-mix(in srgb, var(--pj-ink) 12%, transparent);
}
.pj-layout-classic .pj-aside__block--share {
    background: none;
    padding: 0;
}

/* =================================================== Layout: editorial ==== */

/* Type-led. The masthead is set flush left in large display caps, the measure
   is generous and the sidebar sits in tinted blocks beside it. */

.pj-layout-editorial .pj-posthead:not(.pj-posthead--immersive) {
    text-align: left;
}
.pj-layout-editorial .pj-posthead:not(.pj-posthead--immersive) .pj-posthead__inner {
    max-width: calc(var(--pj-measure) + var(--pj-aside-w) + 76px);
    margin-left: auto;
    margin-right: auto;
}
.pj-layout-editorial .pj-posthead:not(.pj-posthead--immersive) .pj-posthead__title {
    max-width: 22ch;
    margin-left: 0;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: calc(clamp(30px, 4.4vw, 52px) * var(--pj-title-scale));
    line-height: 1.12;
}
.pj-layout-editorial .pj-posthead:not(.pj-posthead--immersive) .pj-posthead__standfirst {
    margin-left: 0;
}
.pj-layout-editorial .pj-posthead:not(.pj-posthead--immersive) .pj-posthead__meta,
.pj-layout-editorial .pj-posthead:not(.pj-posthead--immersive) .pj-crumbs {
    justify-content: flex-start;
}
.pj-layout-editorial .pj-posthead--minimal .pj-posthead__inner::after {
    margin-left: 0;
}

/* The cover image is inset to the reading column rather than run full width,
   which is what gives this layout its quieter, printed feel. */
.pj-layout-editorial .pj-cover {
    max-width: calc(var(--pj-measure) + var(--pj-aside-w) + 76px);
}

.pj-layout-editorial .pj-prose {
    font-size: 17px;
    line-height: 1.9;
}
.pj-layout-editorial .pj-prose h2 {
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: calc(clamp(22px, 2.4vw, 28px) * var(--pj-title-scale));
}

.pj-layout-editorial .pj-aside__block {
    background: var(--pj-aside-bg, var(--pj-band));
    padding: 30px 26px;
    border-radius: var(--pj-radius);
    text-align: center;
}
.pj-layout-editorial .pj-aside__title {
    letter-spacing: 0.18em;
    color: var(--pj-ink);
}
.pj-layout-editorial .pj-aside__list a {
    justify-content: center;
}
.pj-layout-editorial .pj-aside__post-link {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
}
.pj-layout-editorial .pj-aside__post-img {
    aspect-ratio: 4 / 3;
}
.pj-layout-editorial .pj-aside__block--share,
.pj-layout-editorial .pj-aside__block--toc {
    background: none;
    padding: 0;
    text-align: left;
}
.pj-layout-editorial .pj-aside__block--share .pj-share {
    align-items: center;
}
.pj-layout-editorial .pj-aside__block--search {
    padding: 0;
    background: none;
}

/* ==================================================== Layout: centered ==== */

/* Nothing in the margins. One column, generous air, hairline rules doing the
   work that panels do elsewhere. */

.pj-layout-centered .pj-post__body {
    padding-top: clamp(40px, 5vw, 64px);
}
.pj-layout-centered .pj-post__column {
    max-width: min(var(--pj-measure), 720px);
}
.pj-layout-centered .pj-posthead__title {
    max-width: 18ch;
}
.pj-layout-centered .pj-cover {
    max-width: min(calc(var(--pj-measure) + 220px), 1000px);
}

.pj-layout-centered .pj-prose {
    font-size: 17.5px;
    line-height: 2;
}
.pj-layout-centered .pj-prose h2,
.pj-layout-centered .pj-prose h3 {
    text-align: center;
    margin-top: 2.4em;
}

/* A hairline above each heading, which is what carries the rhythm when there
   is no other furniture on the page. */
.pj-layout-centered .pj-prose h2::before {
    content: "";
    display: block;
    width: 48px;
    height: 1px;
    margin: 0 auto 26px;
    background: var(--pj-accent);
}

.pj-layout-centered .pj-postfoot {
    text-align: center;
}
.pj-layout-centered .pj-postfoot__row {
    justify-content: center;
}
.pj-layout-centered .pj-author {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
}

/* -------------------------------------------------------- Responsive ----- */

/* The sidebar has no room left beside the prose, so it folds underneath and
   stops sticking. Matches the breakpoint the contents rail already uses. */
@media (max-width: 1120px) {
    .pj-post__body--aside,
    .pj-post__body--aside-left {
        display: block;
    }
    .pj-post__body--aside .pj-post__column,
    .pj-post__body--aside-left .pj-post__column {
        max-width: var(--pj-measure);
        margin: 0 auto;
    }

    .pj-aside {
        max-width: var(--pj-measure);
        margin: 56px auto 0;
        padding-top: 40px;
        border-top: 1px solid var(--pj-line);
    }
    .pj-aside--sticky .pj-aside__inner {
        position: static;
        max-height: none;
        overflow: visible;
    }

    /* Two across while there is still width for it. */
    .pj-aside__inner {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 36px 40px;
        align-items: start;
    }
    .pj-layout-magazine .pj-aside__block + .pj-aside__block {
        border-top: 0;
        padding-top: 0;
    }

    .pj-layout-classic .pj-posthead__inner,
    .pj-layout-editorial .pj-posthead:not(.pj-posthead--immersive) .pj-posthead__inner,
    .pj-layout-editorial .pj-cover,
    .pj-layout-classic .pj-posthead--cover .pj-posthead__inner,
    .pj-layout-classic .pj-posthead--stacked .pj-posthead__inner,
    .pj-layout-classic .pj-posthead--minimal .pj-posthead__inner {
        max-width: var(--pj-measure);
    }
}

@media (max-width: 700px) {
    .pj-aside__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }
    .pj-layout-centered .pj-prose h2,
    .pj-layout-centered .pj-prose h3 {
        text-align: left;
    }
    .pj-layout-centered .pj-prose h2::before {
        margin-left: 0;
    }
}

/* ==========================================================================
   SIDEBAR BLOCKS — numbered post list and thumbnail grid
   Added alongside the layouts above; nothing earlier in the file is changed.
   ========================================================================== */

/* --------------------------------------------- Post list: numbered style --- */

/* A large numeral in the display face beside the title, no image. The number
   is decorative — it is hidden from screen readers in the markup. */
.pj-aside__posts--numbered .pj-aside__post-link {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}
.pj-aside__post-num {
    font-size: calc(26px * var(--pj-title-scale));
    line-height: 1.05;
    color: var(--pj-accent);
}
.pj-aside__posts--numbered .pj-aside__post-title {
    font-size: calc(15px * var(--pj-aside-item, 1));
    line-height: 1.45;
}
.pj-aside__posts--numbered,
.pj-aside__posts--plain {
    gap: 18px;
}

/* --------------------------------------------------- Thumbnail grid ------- */

.pj-aside__grid {
    display: grid;
    grid-template-columns: repeat(var(--pj-grid-cols, 3), minmax(0, 1fr));
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.pj-aside__tile a {
    display: block;
    overflow: hidden;
    background: var(--pj-chip);
    border-radius: var(--pj-radius);
}
.pj-aside__tile-img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition:
        transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
        opacity 0.35s ease;
}
.pj-aside__tile a:hover .pj-aside__tile-img {
    transform: scale(1.06);
    opacity: 0.85;
}

/* ============================================ Previous / next as buttons === */

.pj-adjacent--buttons {
    max-width: var(--pj-max);
    margin: 0 auto;
    padding: 0 var(--pj-gutter);
}
.pj-adjacent--buttons .pj-adjacent__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    max-width: var(--pj-measure);
    margin: 0 auto;
}
.pj-adjacent__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border: 1px solid var(--pj-line);
    border-radius: var(--pj-radius);
    background: var(--pj-surface);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--pj-ink);
    transition:
        border-color 0.3s ease,
        color 0.3s ease;
}
.pj-adjacent__btn:hover {
    border-color: var(--pj-ink);
    color: var(--pj-accent);
}
.pj-adjacent__btn svg {
    width: 20px;
    height: 8px;
    flex: 0 0 auto;
}
/* The arrow points back on the previous link and forward on the next one. */
.pj-adjacent__btn--prev svg {
    transform: scaleX(-1);
    order: -1;
}
.pj-adjacent__btn--next svg {
    order: 2;
}

/* Sitting on the tags hairline instead of in a block of its own. */
.pj-postfoot__row--nav {
    align-items: center;
}
.pj-adjacent--inline {
    max-width: none;
    padding: 0;
    margin: 0;
    margin-left: auto;
}
.pj-adjacent--inline .pj-adjacent__inner {
    max-width: none;
    margin: 0;
    justify-content: flex-end;
}
/* The simple style is two stacked text links; inline it has to be a row. */
.pj-adjacent--inline.pj-adjacent--simple .pj-adjacent__inner {
    display: flex;
    gap: 28px;
}
.pj-adjacent--inline.pj-adjacent--simple .pj-adjacent__title {
    display: none;
}

/* ======================================= Classic layout: reference skin ==== */

/* Matches the reference the design was drawn from: a bare search field, plain
   category rows without counts, a numbered top-posts panel and an untinted
   thumbnail grid. Colours all come from Settings → Design. */

.pj-layout-classic .pj-aside__block--search {
    background: none;
    padding: 0;
}
.pj-layout-classic .pj-aside__search {
    background: var(--pj-surface);
    border-color: var(--pj-line);
    padding: 4px;
}
.pj-layout-classic .pj-aside__search input {
    font-size: 14px;
}

.pj-layout-classic .pj-aside__block--grid {
    background: none;
    padding: 0;
}

.pj-layout-classic .pj-aside__list a {
    padding: 14px 0;
    font-size: calc(15px * var(--pj-aside-item, 1));
}
.pj-layout-classic .pj-aside__list li:last-child a {
    border-bottom: 0;
    padding-bottom: 0;
}

.pj-layout-classic .pj-aside__post-num {
    font-family: var(--pj-body);
    font-weight: 400;
    font-size: calc(24px * var(--pj-title-scale));
    color: var(--pj-ink);
}

/* Tag pills, as in the reference. */
.pj-layout-classic .pj-tags a {
    padding: 7px 15px;
    border: 1px solid var(--pj-line);
    border-radius: var(--pj-radius);
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
    transition:
        border-color 0.3s ease,
        color 0.3s ease;
}
.pj-layout-classic .pj-tags a:hover {
    border-color: var(--pj-ink);
    color: var(--pj-accent);
}

.pj-layout-classic .pj-postfoot__row {
    border-bottom: 0;
    padding-bottom: 0;
}

@media (max-width: 640px) {
    .pj-postfoot__row--nav {
        align-items: flex-start;
    }
    .pj-adjacent--inline {
        margin-left: 0;
        width: 100%;
    }
    .pj-adjacent--inline .pj-adjacent__inner {
        justify-content: flex-start;
    }
}

/* ==========================================================================
   SINGLE POST: WIDTH, SIDEBAR SKIN AND CONTENT IMAGES
   Settings → Single post. Appended, so nothing above is rewritten.
   ========================================================================== */

/* -------------------------------------------------------------- Width ---- */

/* The post page width comes from Settings → Single post → Single post width,
   printed inline as --pj-max on .pj-single. Everything on the page already
   measures itself against --pj-max, so the article, previous / next, comments
   and "Continue reading" all move together.

   With "Match the sections below to the article" on, the width collapses to
   exactly the article plus its sidebar plus the gap between them, so the
   related grid underneath lines up with the column above it instead of running
   wider. The gap value is the same clamp used by the reading grid. */
.pj-single.pj-match-width {
    --pj-max: calc(var(--pj-measure) + var(--pj-aside-w) + clamp(32px, 4.5vw, 76px));
}

/* No sidebar in these two, so there is nothing to add to the measure — just
   enough room either side for a three-card related grid to breathe. */
.pj-single.pj-match-width.pj-layout-journal,
.pj-single.pj-match-width.pj-layout-centered {
    --pj-max: calc(var(--pj-measure) + 300px);
}

/* -------------------------------------------------- Cover image shape ---- */

.pj-single .pj-cover__img {
    aspect-ratio: var(--pj-cover-ratio, 16 / 9);
}

/* ------------------------------------------------ Images in the article --- */

/* Fill: every inserted image stretches to the reading column. Aligned and
   already-wide blocks are excluded so their own behaviour still wins. */
.pj-img-fill .pj-prose img,
.pj-img-fill .pj-prose figure:not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull) img,
.pj-img-fill .pj-prose .wp-block-image:not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull) img {
    width: 100%;
    height: auto;
}
.pj-img-fill .pj-prose :is(img, figure).alignleft,
.pj-img-fill .pj-prose :is(img, figure).alignright,
.pj-img-fill .pj-prose .wp-block-image.alignleft img,
.pj-img-fill .pj-prose .wp-block-image.alignright img {
    width: auto;
}

/* Wide: the image breaks out past the text on both sides, up to the gutter.
   The negative margin mirrors the padding the block gains, so the centre line
   of the image stays on the centre line of the column. */
.pj-img-wide .pj-prose > figure:not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull),
.pj-img-wide .pj-prose > .wp-block-image:not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull),
.pj-img-wide .pj-prose > img {
    width: calc(100% + 2 * clamp(0px, 5vw, 110px));
    max-width: none;
    margin-left: calc(-1 * clamp(0px, 5vw, 110px));
}
.pj-img-wide .pj-prose > figure img,
.pj-img-wide .pj-prose > .wp-block-image img,
.pj-img-wide .pj-prose > img {
    width: 100%;
    height: auto;
}

/* Below the reading column there is no margin left to break out into. */
@media (max-width: 1120px) {
    .pj-img-wide .pj-prose > figure:not(.alignleft):not(.alignright),
    .pj-img-wide .pj-prose > .wp-block-image:not(.alignleft):not(.alignright),
    .pj-img-wide .pj-prose > img {
        width: 100%;
        margin-left: 0;
    }
}

/* ------------------------------------------------------ Sidebar colour ---- */

/* Set in Settings → Single post → Sidebar. Both fall back to the palette on the
   Design tab when left empty, so the sidebar stays on-brand by default. */
.pj-aside__block {
    color: var(--pj-aside-ink, inherit);
}
.pj-aside__block .pj-aside__title,
.pj-aside__block .pj-aside__post-meta,
.pj-aside__block .pj-aside__bio,
.pj-aside__block .pj-aside__list em {
    color: var(--pj-aside-ink, var(--pj-ink-soft));
}
.pj-layout-editorial .pj-aside__block--grid,
.pj-layout-editorial .pj-aside__block--widgets {
    background: var(--pj-aside-bg, var(--pj-band));
}
.pj-layout-magazine .pj-aside__block--cta {
    background: var(--pj-aside-bg, var(--pj-band));
}

/* --------------------------------------------------- Sidebar alignment ---- */

/* Only one of these classes is ever on the body, and only when the setting is
   something other than "Follow the layout". Two classes deep so it outranks the
   per-layout alignment set further up the file. */

.pj-single.pj-aside-left .pj-aside__block,
.pj-single.pj-aside-left .pj-aside__title {
    text-align: left;
}
.pj-single.pj-aside-left .pj-aside__list a {
    justify-content: space-between;
}
.pj-single.pj-aside-left .pj-aside__post-link {
    text-align: left;
}
.pj-single.pj-aside-left .pj-aside__posts--thumbnail .pj-aside__post-link:not(.pj-aside__post-link--plain) {
    grid-template-columns: 76px minmax(0, 1fr);
}
.pj-single.pj-aside-left .pj-aside__avatar,
.pj-single.pj-aside-left .pj-aside__cta-img {
    margin-left: 0;
}

.pj-single.pj-aside-center .pj-aside__block,
.pj-single.pj-aside-center .pj-aside__title {
    text-align: center;
}
.pj-single.pj-aside-center .pj-aside__list a {
    justify-content: center;
}
/* Stacked, or the image and the text fight over the centre line. */
.pj-single.pj-aside-center .pj-aside__post-link {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
}
.pj-single.pj-aside-center .pj-aside__post-media {
    max-width: 100%;
}
.pj-single.pj-aside-center .pj-aside__post-img {
    aspect-ratio: 4 / 3;
}
.pj-single.pj-aside-center .pj-share,
.pj-single.pj-aside-center .pj-aside__block--share .pj-share {
    align-items: center;
}
.pj-single.pj-aside-center .pj-aside__avatar,
.pj-single.pj-aside-center .pj-aside__cta-img {
    margin-left: auto;
    margin-right: auto;
}

.pj-single.pj-aside-right .pj-aside__block,
.pj-single.pj-aside-right .pj-aside__title {
    text-align: right;
}
.pj-single.pj-aside-right .pj-aside__list a {
    justify-content: flex-end;
}
.pj-single.pj-aside-right .pj-aside__post-link {
    grid-template-columns: minmax(0, 1fr);
    text-align: right;
}
.pj-single.pj-aside-right .pj-aside__post-img {
    aspect-ratio: 4 / 3;
}
.pj-single.pj-aside-right .pj-share,
.pj-single.pj-aside-right .pj-aside__block--share .pj-share {
    align-items: flex-end;
}
.pj-single.pj-aside-right .pj-aside__avatar,
.pj-single.pj-aside-right .pj-aside__cta-img {
    margin-left: auto;
    margin-right: 0;
}

/* The numbered list keeps its numeral column at every alignment; only the text
   inside it moves. */
.pj-single.pj-aside-center .pj-aside__posts--numbered .pj-aside__post-link,
.pj-single.pj-aside-right .pj-aside__posts--numbered .pj-aside__post-link {
    grid-template-columns: 30px minmax(0, 1fr);
}