/* ==========================================================================
   Rajasthan Ka Tour - Blog design system
   Loaded only by blog.php and blogs/*.php, after css/style.css.
   Everything is namespaced under .blog-shell so no site-wide rule is affected.
   ========================================================================== */

.blog-shell {
    /* The blog previously ran its own orange palette (#ff6b00), its own radii
       and its own spacing scale - which is exactly why it read as a different
       website. Every --bk-* token below is now an ALIAS onto the homepage
       tokens in css/style.css rather than a fresh hex value, so the blog
       inherits the site palette and follows any future change to it from one
       place. The ~44 rules further down this file that consume these tokens
       did not need to change. */
    --bk-orange: var(--rkt-maroon);          /* primary accent on light */
    --bk-orange-2: var(--rkt-gold);
    --bk-orange-dark: var(--rkt-maroon-dark);
    --bk-gold: var(--rkt-gold);              /* accent on dark / hero */
    --bk-gold-light: var(--rkt-gold-light);
    --bk-ink: var(--rkt-charcoal);
    --bk-heading: var(--rkt-charcoal);
    --bk-body: var(--rkt-ink);
    --bk-muted: var(--rkt-muted);
    --bk-cream: var(--rkt-cream);
    --bk-sand: #f4eadf;                      /* = .packages-section ground */
    --bk-line: var(--rkt-border);
    --bk-line-soft: #f6efe3;

    --bk-radius-sm: var(--rkt-radius-sm);    /* 10px */
    --bk-radius: var(--rkt-radius-md);       /* 16px */
    --bk-radius-lg: var(--rkt-radius-lg);    /* 22px */

    /* Matching .hp-card / .hp-card:hover on the homepage. */
    --bk-shadow: 0 3px 8px rgba(28, 21, 18, .06);
    --bk-shadow-hover: 0 14px 28px rgba(28, 21, 18, .12);

    /* The homepage runs compact sections (.packages-section 22-26px,
       .about-us 30px). The blog was on 48-88px, which is what made it feel
       loose and unrelated. */
    --bk-gap: clamp(20px, 2.4vw, 30px);
    --bk-section-y: clamp(28px, 3.2vw, 46px);

    color: var(--bk-body);
    background: #fff;
    overflow-x: clip; /* belt-and-braces against a stray wide child */
}

/* Anchors land clear of the top edge; the site header is not sticky, so a
   small offset is enough. */
.blog-shell [id] {
    scroll-margin-top: 24px;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* .blog-wrap was 1240px wide while the shared header and footer use
   Bootstrap's .container (1140px, 1320px from 1400px up). The blog content
   therefore sat wider than the nav above it and the footer below it - a
   small misalignment that reads as "different template" more than any
   colour does. These are Bootstrap's own container values, so the blog now
   lines up edge-for-edge with the header, the footer and index.php. */
.blog-wrap {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    padding-inline: 12px;
}

@media (min-width: 576px)  { .blog-wrap { max-width: 540px; } }
@media (min-width: 768px)  { .blog-wrap { max-width: 720px; } }
@media (min-width: 992px)  { .blog-wrap { max-width: 960px; } }
@media (min-width: 1200px) { .blog-wrap { max-width: 1140px; } }
@media (min-width: 1400px) { .blog-wrap { max-width: 1320px; } }

.blog-section {
    padding-block: var(--bk-section-y);
}

.blog-section--sand {
    background: var(--bk-cream);
}

/* --------------------------------------------------------------- typography */

/* Headings use the display face (Playfair Display) exactly as the homepage
   does for .content-bannners h1, .package-header h4 and .hp-card-title.
   Body copy, buttons, meta and eyebrows stay on the body face (Urbanist),
   inherited from body in css/style.css - no font is named here. */
.blog-shell h1,
.blog-shell h2,
.blog-shell h3,
.blog-shell h4 {
    font-family: var(--font-display);
    color: var(--bk-heading);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    margin: 0;
}

/* Same eyebrow the homepage uses above every section heading
   (.package-header h6 / .rkt-eyebrow): gold, 13px, .18em tracking, with the
   short gold rule to its left. */
.blog-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--bk-gold);
    margin-bottom: 10px;
}

.blog-eyebrow::before {
    content: "";
    display: inline-block;
    width: 26px;
    height: 2px;
    background: var(--bk-gold);
}

/* On dark this matches .hero-eyebrow, which drops the rule and uses the
   lighter gold for contrast against the photograph. */
.blog-eyebrow--ondark {
    color: var(--bk-gold-light);
    letter-spacing: .12em;
}

.blog-eyebrow--ondark::before {
    content: none;
}

/* Tracks .hp-packages .package-header h4 (clamp(26px, 2vw, 32px)). */
.blog-section-title {
    font-size: clamp(24px, 2vw, 32px);
    line-height: 1.16;
    margin-bottom: 10px;
}

.blog-section-intro {
    max-width: 62ch;
    font-size: clamp(14px, 1.1vw, 16px);
    line-height: 1.7;
    color: var(--bk-muted);
    margin: 0 0 clamp(18px, 2vw, 26px);
}

/* = .package-header-split on the homepage. */
.blog-section-head {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: clamp(16px, 1.8vw, 22px);
}

.blog-section-head > div {
    min-width: 0;
}

.blog-section-head .blog-section-intro {
    margin-bottom: 0;
}

/* ------------------------------------------------------------------ buttons */

.blog-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 22px;
    border-radius: 8px;
    border: 1px solid var(--bk-orange);
    background: var(--bk-orange);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .01em;
    text-decoration: none;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .2s ease;
}

.blog-button i,
.blog-button .blog-arrow {
    transition: transform .25s ease;
}

.blog-button:hover,
.blog-button:focus-visible {
    background: var(--bk-orange-dark);
    border-color: var(--bk-orange-dark);
    color: #fff;
    transform: translateY(-2px);
}

.blog-button:hover i,
.blog-button:focus-visible i {
    transform: translateX(4px);
}

/* Over a photograph the homepage switches the primary CTA to gold
   (.hero-btn-primary) and uses a translucent white ghost beside it
   (.hero-btn-ghost); the blog hero and CTA band do the same. */
.blog-hero .blog-button:not(.blog-button--ghost),
.blog-cta .blog-button:not(.blog-button--ghost),
.article-cta .blog-button:not(.blog-button--ghost) {
    background: var(--bk-gold);
    border-color: var(--bk-gold);
    color: #fff;
    box-shadow: 0 14px 30px rgba(199, 154, 63, .35);
}

.blog-hero .blog-button:not(.blog-button--ghost):hover,
.blog-cta .blog-button:not(.blog-button--ghost):hover,
.article-cta .blog-button:not(.blog-button--ghost):hover {
    background: var(--bk-gold);
    border-color: var(--bk-gold);
    box-shadow: 0 18px 34px rgba(199, 154, 63, .45);
}

.blog-button--ghost {
    background: rgba(255, 255, 255, .08);
    border: 1.5px solid rgba(255, 255, 255, .65);
    color: #fff;
    backdrop-filter: blur(6px);
    box-shadow: none;
}

.blog-button--ghost:hover,
.blog-button--ghost:focus-visible {
    background: #fff;
    border-color: #fff;
    color: var(--bk-heading);
    box-shadow: none;
}

.blog-button--light {
    background: #fff;
    border-color: #fff;
    color: var(--bk-heading);
}

.blog-button--light:hover,
.blog-button--light:focus-visible {
    background: var(--bk-orange);
    border-color: var(--bk-orange);
    color: #fff;
}

.blog-button--outline {
    background: transparent;
    color: var(--bk-orange);
}

.blog-button--outline:hover,
.blog-button--outline:focus-visible {
    background: var(--bk-orange);
    color: #fff;
}

/* = .hp-card-link ("Explore more") on the homepage. */
.blog-text-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--bk-orange);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: .01em;
}

.blog-text-link i {
    transition: transform .25s ease;
}

.blog-text-link:hover,
.blog-text-link:focus-visible {
    color: var(--bk-orange-dark);
}

.blog-text-link:hover i,
.blog-text-link:focus-visible i {
    transform: translateX(4px);
}

.blog-shell a:focus-visible,
.blog-shell button:focus-visible,
.blog-shell summary:focus-visible {
    outline: 2px solid var(--bk-orange);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------- meta */

.blog-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bk-muted);
}

.blog-meta > * + *::before {
    content: "\00b7";
    margin-right: 10px;
    color: var(--bk-gold);
}

.blog-meta--onmedia {
    color: rgba(255, 255, 255, .82);
}

.blog-meta--onmedia > * + *::before {
    color: var(--bk-gold-light);
}

/* --------------------------------------------------------------- blog hero */

/* Height and padding are the same expression .hp-hero uses on the homepage:
   a mostly-fixed floor with a hard ceiling, so the hero measures ~380px at
   1366x768 and caps at 440px on a 1920x1080 screen instead of growing with
   the viewport. `background-position: center 42%` matches .hp-hero's
   object-position so forts and skylines stay in frame in the shorter crop;
   `cover` is what keeps the photo from stretching. */
.blog-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: clamp(340px, 30vh + 150px, 440px);
    padding-block: clamp(34px, 3.6vh, 46px) clamp(38px, 4.2vh, 52px);
    background: var(--bk-ink) center 42%/cover no-repeat;
    color: #fff;
    overflow: hidden;
}

/* Identical to .hero-media::after on the homepage. */
.blog-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(15, 9, 7, .35) 0%, rgba(15, 9, 7, .2) 45%, rgba(15, 9, 7, .8) 100%),
                linear-gradient(90deg, rgba(15, 9, 7, .68) 0%, rgba(15, 9, 7, .22) 55%, rgba(15, 9, 7, .1) 100%);
}

/* The decorative arch motif that used to sit here has been removed: the
   homepage hero carries no overlay graphic, and with the shorter hero the
   arch was cropped hard enough that it read as two stray vertical lines
   over the photograph rather than as an arch. */

.blog-hero__inner {
    width: 100%;
}

/* Same type scale as .hp-hero .hp-hero-content h1, and the same 620px
   text column so the copy breaks in the same place. */
.blog-hero__inner .blog-wrap > * {
    max-width: 620px;
}

.blog-hero h1 {
    color: #fff;
    font-size: clamp(26px, 2.9vw, 40px);
    line-height: 1.06;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
    margin-bottom: 8px;
}

.blog-hero p {
    font-size: clamp(13.5px, 1.15vw, 16px);
    line-height: 1.6;
    color: rgba(255, 255, 255, .88);
    text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
    margin: 0 0 16px;
}

.blog-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.blog-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 32px;
    margin-top: clamp(16px, 2vw, 22px);
    padding-top: clamp(12px, 1.6vw, 18px);
    border-top: 1px solid rgba(255, 255, 255, .18);
}

.blog-hero__stat strong {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(18px, 1.6vw, 22px);
    color: var(--bk-gold-light);
    line-height: 1.2;
}

.blog-hero__stat span {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .66);
}

/* ---------------------------------------------------------- featured article */

.blog-feature {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    background: #fff;
    border: 1px solid var(--bk-line);
    border-radius: var(--bk-radius-lg);
    box-shadow: var(--bk-shadow);
    overflow: hidden;
}

.blog-feature__media {
    position: relative;
    display: block;
    min-height: 340px;
    overflow: hidden;
}

.blog-feature__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
}

.blog-feature:hover .blog-feature__media img {
    transform: scale(1.04);
}

.blog-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border-radius: 999px;
    background: var(--bk-orange);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.blog-feature__body {
    padding: clamp(26px, 3.4vw, 46px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
}

.blog-feature__body h2 {
    font-size: clamp(24px, 2.9vw, 36px);
    line-height: 1.18;
}

.blog-feature__body h2 a {
    color: inherit;
    text-decoration: none;
}

.blog-feature__body h2 a:hover {
    color: var(--bk-orange);
}

.blog-feature__body p {
    font-size: 16px;
    line-height: 1.75;
    color: var(--bk-muted);
    margin: 0;
    max-width: 52ch;
}

.blog-feature__cta {
    margin-top: 6px;
}

/* --------------------------------------------------------------- categories */

.blog-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.blog-chip {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 999px;
    border: 1px solid var(--bk-line);
    background: #fff;
    color: var(--bk-body);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .25s ease, background-color .25s ease, color .25s ease;
}

.blog-chip:hover,
.blog-chip:focus-visible {
    border-color: var(--bk-orange);
    color: var(--bk-orange);
}

.blog-chip.is-active {
    background: var(--bk-orange);
    border-color: var(--bk-orange);
    color: #fff;
}

/* --------------------------------------------------------------- card grid */

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: clamp(20px, 2.4vw, 30px);
    align-items: stretch;
}

.blog-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--bk-line);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--bk-shadow);
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

/* = .hp-card:hover */
.blog-card:hover {
    border-color: var(--bk-line);
    transform: translateY(-4px);
    box-shadow: var(--bk-shadow-hover);
}

/* Same 16:10 crop the homepage package cards use, so a blog card and a
   package card photographed side by side are the same shape. */
.blog-card__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--bk-sand);
}

.blog-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
}

.blog-card:hover .blog-card__media img {
    transform: scale(1.05);
}

/* Padding and type match .hp-card-body / .hp-card-title on the homepage. */
.blog-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px 14px;
    flex: 1 1 auto;
}

.blog-card__body h3 {
    font-size: clamp(15px, 1.05vw, 17px);
    line-height: 1.28;
}

.blog-card__body h3 a {
    color: inherit;
    text-decoration: none;
}

.blog-card__body h3 a:hover {
    color: var(--bk-orange);
}

.blog-card__body h3 a {
    /* two-line clamp keeps every card in a row the same height, exactly as
       .hp-card-title does on the homepage */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card__body p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--bk-muted);
}

.blog-card__foot {
    margin-top: auto;
    padding-top: 6px;
}

/* Four-up variant for the related row, so 4 cards fill a row instead of
   leaving an orphan on a second line. */
.blog-grid--four {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.blog-empty {
    grid-column: 1 / -1;
    padding: 44px 24px;
    text-align: center;
    border: 1px dashed var(--bk-line);
    border-radius: var(--bk-radius);
    background: var(--bk-cream);
    color: var(--bk-muted);
    font-size: 15px;
}

/* ------------------------------------------------------- travel inspiration */

.blog-destinations {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: clamp(16px, 2vw, 24px);
}

.blog-destination {
    position: relative;
    display: flex;
    align-items: flex-end;
    aspect-ratio: 3 / 4;
    padding: 22px;
    border-radius: var(--bk-radius);
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    background: var(--bk-ink);
}

.blog-destination img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.blog-destination::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 15, 15, .86) 8%, rgba(15, 15, 15, .12) 62%);
}

.blog-destination:hover img {
    transform: scale(1.06);
}

.blog-destination__label {
    position: relative;
    z-index: 1;
}

.blog-destination__label strong {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

.blog-destination__label span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bk-gold-light);
}

.blog-destination__label i {
    transition: transform .25s ease;
}

.blog-destination:hover .blog-destination__label i {
    transform: translateX(4px);
}

/* ------------------------------------------------------------------ big CTA */

.blog-cta {
    position: relative;
    isolation: isolate;
    padding-block: clamp(32px, 3.6vw, 50px);
    background: var(--bk-ink) center 42%/cover no-repeat;
    color: #fff;
    overflow: hidden;
}

.blog-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(15, 9, 7, .45) 0%, rgba(15, 9, 7, .3) 45%, rgba(15, 9, 7, .8) 100%),
                linear-gradient(90deg, rgba(15, 9, 7, .78) 0%, rgba(15, 9, 7, .34) 60%, rgba(15, 9, 7, .18) 100%);
}

.blog-cta__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: clamp(24px, 4vw, 48px);
}

.blog-cta__inner > div {
    max-width: 60ch;
}

.blog-cta h2 {
    color: #fff;
    font-size: clamp(24px, 2.2vw, 34px);
    line-height: 1.12;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
    margin-bottom: 8px;
}

.blog-cta p {
    margin: 0;
    font-size: clamp(13.5px, 1.1vw, 15.5px);
    line-height: 1.6;
    color: rgba(255, 255, 255, .86);
}

.blog-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ==========================================================================
   Article page
   ========================================================================== */

.reading-progress {
    position: fixed;
    inset: 0 0 auto 0;
    height: 3px;
    z-index: 1050;
    background: transparent;
    pointer-events: none;
}

.reading-progress__bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--bk-orange), var(--bk-gold));
    transform-origin: left center;
}

/* Same floor/ceiling as .blog-hero and .hp-hero. It is min-height, so a
   three-line article title still grows the band rather than being clipped. */
.article-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: clamp(340px, 30vh + 150px, 440px);
    padding-block: clamp(34px, 3.6vh, 46px) clamp(38px, 4.2vh, 52px);
    background: var(--bk-ink) center 42%/cover no-repeat;
    color: #fff;
    overflow: hidden;
}

.article-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(15, 9, 7, .35) 0%, rgba(15, 9, 7, .2) 40%, rgba(15, 9, 7, .85) 100%),
                linear-gradient(90deg, rgba(15, 9, 7, .68) 0%, rgba(15, 9, 7, .22) 55%, rgba(15, 9, 7, .1) 100%);
}

.article-hero__inner {
    width: 100%;
}

.article-hero h1 {
    color: #fff;
    font-size: clamp(26px, 2.9vw, 40px);
    line-height: 1.08;
    max-width: 22ch;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
    margin-bottom: 10px;
}

.article-hero__summary {
    max-width: 62ch;
    font-size: clamp(13.5px, 1.15vw, 16px);
    line-height: 1.6;
    color: rgba(255, 255, 255, .88);
    text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
    margin: 0 0 14px;
}

/* Breadcrumb-equivalent: same weight/tracking as the homepage's on-image
   labels (#heroSlideLabels) so it reads as part of the same hero system. */
.article-back {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    letter-spacing: .06em;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
}

.article-back i {
    transition: transform .25s ease;
}

.article-back:hover,
.article-back:focus-visible {
    color: #fff;
}

.article-back:hover i {
    transform: translateX(-4px);
}

.article-back--foot {
    color: var(--bk-orange);
    margin: 0;
}

.article-back--foot:hover,
.article-back--foot:focus-visible {
    color: var(--bk-orange-dark);
}

/* ------------------------------------------------------------------ layout */

.article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(24px, 2.8vw, 40px);
    padding-block: clamp(28px, 3.2vw, 46px);
}

@media (min-width: 992px) {
    .article-layout {
        grid-template-columns: minmax(0, 1fr) 320px;
        align-items: start;
    }

    .article-body {
        grid-column: 1;
        grid-row: 1;
    }

    .article-rail {
        grid-column: 2;
        grid-row: 1;
        position: sticky;
        top: 24px;
    }
}

@media (min-width: 1200px) {
    .article-layout {
        grid-template-columns: minmax(0, 1fr) 340px;
    }
}

/* ------------------------------------------------------ article typography */

.article-body {
    min-width: 0;
    max-width: 74ch;
    font-size: 17px;
    line-height: 1.8;
    color: var(--bk-body);
}

@media (min-width: 992px) {
    .article-body {
        font-size: 18px;
        line-height: 1.85;
    }
}

.article-body > p {
    margin: 0 0 22px;
}

/* Same ceiling as .blog-section-title and the homepage's section headings. */
.article-body h2 {
    font-size: clamp(23px, 2vw, 30px);
    line-height: 1.18;
    margin: clamp(28px, 3.2vw, 40px) 0 12px;
    padding-top: 4px;
}

.article-body h3 {
    font-size: clamp(18px, 1.5vw, 21px);
    line-height: 1.25;
    margin: 24px 0 10px;
}

.article-body a:not(.blog-button):not(.blog-text-link):not(.related-link) {
    color: var(--bk-orange-dark);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.article-body a:not(.blog-button):not(.blog-text-link):not(.related-link):hover {
    color: var(--bk-orange);
}

.article-body ul,
.article-body ol {
    margin: 0 0 22px;
    padding-left: 22px;
}

.article-body li {
    margin-bottom: 10px;
}

.article-body li::marker {
    color: var(--bk-orange);
}

.article-lead {
    font-size: clamp(17px, 1.5vw, 20px);
    line-height: 1.72;
    color: var(--bk-heading);
    font-weight: 500;
}

/* -------------------------------------------------------------- key points */

.article-keypoints {
    margin: 0 0 clamp(22px, 2.4vw, 32px);
    padding: clamp(18px, 2vw, 24px);
    border: 1px solid var(--bk-line);
    border-radius: var(--bk-radius);
    background: var(--bk-cream);
}

.article-keypoints__label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bk-orange);
    margin: 0 0 16px;
}

.article-keypoints ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px 26px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.article-keypoints li {
    display: flex;
    gap: 10px;
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
}

.article-keypoints i {
    color: var(--bk-orange);
    margin-top: 4px;
    flex: none;
}

/* ------------------------------------------------------------ place blocks */

.place {
    padding-top: clamp(26px, 3vw, 36px);
    margin-top: clamp(26px, 3vw, 36px);
    border-top: 1px solid var(--bk-line-soft);
}

.place:first-of-type {
    border-top: 0;
    margin-top: 0;
}

.place__head {
    display: flex;
    align-items: baseline;
    gap: 14px;
}

.place__num {
    flex: none;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--bk-orange);
    padding-top: 2px;
}

.place h3 {
    margin: 0;
}

.place__figure {
    margin: 18px 0 0;
}

.place__figure img {
    display: block;
    width: 100%;
    /* height:auto is required: the img width/height attributes are applied as
       presentational hints and would otherwise beat aspect-ratio. */
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--bk-radius);
    background: var(--bk-sand);
}

.place__figure figcaption {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--bk-muted);
}

.place p {
    margin: 16px 0 0;
}

.place__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    padding: 0;
    list-style: none;
}

.place__facts li {
    margin: 0;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--bk-sand);
    color: var(--bk-orange-dark);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

/* ---------------------------------------------------------------- callouts */

.callout {
    display: flex;
    gap: 16px;
    margin: clamp(20px, 2.4vw, 28px) 0;
    padding: clamp(16px, 1.8vw, 22px);
    border: 1px solid var(--bk-line);
    border-left: 4px solid var(--bk-orange);
    border-radius: var(--bk-radius-sm);
    background: var(--bk-cream);
}

.callout__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bk-orange);
    color: #fff;
    font-size: 18px;
}

.callout__label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bk-orange);
    margin-bottom: 6px;
}

.callout p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
}

/* These two variants were #1d2671 (navy) and #b4531c (rust) - two more
   palettes that appear nowhere else on the site. They now use the site's
   own maroon tint and gold. */
.callout--know {
    border-left-color: var(--bk-orange-dark);
    background: var(--rkt-maroon-tint);
}

.callout--know .callout__icon {
    background: var(--bk-orange-dark);
}

.callout--know .callout__label {
    color: var(--bk-orange-dark);
}

.callout--photo {
    border-left-color: var(--bk-gold);
    background: var(--bk-sand);
}

.callout--photo .callout__icon {
    background: var(--bk-gold);
}

.callout--photo .callout__label {
    color: #8a6a24;
}

/* -------------------------------------------------------------- itinerary */

.article-itinerary {
    margin: clamp(24px, 2.6vw, 34px) 0;
    padding: clamp(18px, 2.2vw, 26px);
    border: 1px solid var(--bk-line);
    border-radius: var(--bk-radius);
    background: #fff;
    box-shadow: var(--bk-shadow);
}

.article-itinerary h2 {
    margin-top: 0;
}

.article-itinerary h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    margin: 24px 0 8px;
}

.article-itinerary h3:first-of-type {
    margin-top: 14px;
}

.article-itinerary h3 span {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bk-sand);
    color: var(--bk-orange-dark);
    font-size: 13px;
    font-weight: 700;
}

.article-itinerary p {
    margin: 0;
    font-size: 15.5px;
}

/* -------------------------------------------------------------------- FAQ */

.article-faq details {
    border: 1px solid var(--bk-line);
    border-radius: var(--bk-radius-sm);
    background: #fff;
    margin-bottom: 10px;
    overflow: hidden;
}

.article-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 600;
    color: var(--bk-heading);
    cursor: pointer;
    list-style: none;
}

.article-faq summary::-webkit-details-marker {
    display: none;
}

.article-faq summary::after {
    content: "\002B";
    flex: none;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    color: var(--bk-orange);
}

.article-faq details[open] summary::after {
    content: "\2212";
}

.article-faq details[open] summary {
    background: var(--bk-cream);
}

.article-faq p {
    margin: 0;
    padding: 4px 20px 18px;
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--bk-muted);
}

/* --------------------------------------------------------- inline CTA card */

.article-cta {
    margin: clamp(26px, 3vw, 38px) 0 0;
    padding: clamp(22px, 2.6vw, 30px);
    border-radius: var(--bk-radius-lg);
    background: linear-gradient(155deg, var(--rkt-maroon-dark) 0%, var(--rkt-maroon) 55%, var(--rkt-maroon-dark) 100%);
    color: #fff;
}

.article-cta h2 {
    color: #fff;
    margin: 0 0 12px;
    font-size: clamp(22px, 2.4vw, 30px);
}

.article-cta p {
    margin: 0 0 22px;
    color: rgba(255, 255, 255, .82);
    font-size: 16px;
    line-height: 1.75;
}

.article-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.article-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: clamp(24px, 2.8vw, 34px);
    padding-top: 18px;
    border-top: 1px solid var(--bk-line);
}

.article-foot__updated {
    font-size: 13px;
    color: var(--bk-muted);
    margin: 0;
}

/* -------------------------------------------------------------- right rail */

.article-rail {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.article-toc {
    border: 1px solid var(--bk-line);
    border-radius: var(--bk-radius);
    background: var(--bk-cream);
    overflow: hidden;
}

.article-toc__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 16px 20px;
    border: 0;
    background: transparent;
    color: var(--bk-heading);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
}

.article-toc__head i {
    color: var(--bk-orange);
    transition: transform .25s ease;
}

.article-toc__head[aria-expanded="false"] i {
    transform: rotate(-90deg);
}

.article-toc__panel {
    padding: 0 12px 14px;
    max-height: min(58vh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Fades the last row so it reads as scrollable rather than cut off. */
    mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent 100%);
    scrollbar-width: thin;
}

.article-toc__panel[hidden] {
    display: none;
}

.article-toc__panel ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: toc;
}

.article-toc__panel li {
    margin: 0;
}

.article-toc__panel a {
    display: flex;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--bk-body);
    font-size: 14px;
    line-height: 1.45;
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.article-toc__panel a::before {
    counter-increment: toc;
    content: counter(toc, decimal-leading-zero);
    flex: none;
    font-size: 12px;
    font-weight: 700;
    color: var(--bk-orange);
    padding-top: 2px;
}

.article-toc__panel a:hover,
.article-toc__panel a:focus-visible {
    background: #fff;
    color: var(--bk-orange-dark);
}

.article-toc__panel a.is-current {
    background: #fff;
    border-left-color: var(--bk-orange);
    color: var(--bk-orange-dark);
    font-weight: 600;
}

.rail-card {
    padding: 24px 22px;
    border-radius: var(--bk-radius);
    background: linear-gradient(155deg, var(--rkt-maroon-dark) 0%, var(--rkt-maroon) 55%, var(--rkt-maroon-dark) 100%);
    color: #fff;
}

.rail-card h2 {
    color: #fff;
    font-size: 19px;
    margin: 0 0 10px;
}

.rail-card p {
    margin: 0 0 18px;
    font-size: 14.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .8);
}

.rail-card .blog-button {
    width: 100%;
    justify-content: center;
    padding-inline: 16px;
}

/* -------------------------------------------------------------- related row */

.related-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
    padding: 0;
    list-style: none;
}

.related-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

.related-link:hover,
.related-link:focus-visible {
    background: #fff;
    border-color: #fff;
    color: var(--bk-heading);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 991.98px) {
    .blog-feature {
        grid-template-columns: minmax(0, 1fr);
    }

    .blog-feature__media {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .article-rail {
        position: static;
    }

    /* The rail's booking card would otherwise sit between the table of
       contents and the article. The full-width CTA at the end of the article
       already covers it, so drop the duplicate on small screens. */
    .article-rail .rail-card {
        display: none;
    }

    .article-toc__panel {
        max-height: 46vh;
    }
}

@media (max-width: 767.98px) {
    .blog-hero {
        min-height: 0;
        text-align: left;
    }

    .blog-hero::after {
        display: none;
    }

    .blog-hero__actions .blog-button,
    .blog-cta__actions .blog-button,
    .article-cta__actions .blog-button {
        flex: 1 1 220px;
        justify-content: center;
    }

    .blog-hero__stats {
        gap: 14px 26px;
    }

    .article-hero {
        min-height: 0;
        align-items: flex-start;
    }

    .blog-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .blog-destinations {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .blog-destination {
        aspect-ratio: 4 / 5;
    }

    .article-body {
        font-size: 16.5px;
        line-height: 1.78;
    }

    .callout {
        flex-direction: column;
        gap: 12px;
    }

    .article-foot {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 419.98px) {
    .blog-destinations {
        grid-template-columns: minmax(0, 1fr);
    }

    .blog-destination {
        aspect-ratio: 16 / 10;
    }

    .blog-feature__body,
    .blog-card__body {
        padding-inline: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .blog-shell *,
    .blog-shell *::before,
    .blog-shell *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

@media print {
    .article-rail,
    .reading-progress,
    .blog-cta,
    .article-cta {
        display: none !important;
    }

    .article-layout {
        display: block;
    }
}

/* --------------------------------------------- TOC: sections sub-group */

.article-toc__group {
    margin: 14px 10px 6px;
    padding-top: 12px;
    border-top: 1px solid var(--bk-line);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bk-muted);
}

.article-toc__plain {
    margin: 0;
    padding: 0;
    list-style: none;
}

.article-toc__plain a::before {
    content: none;
}

.article-toc__plain a {
    padding-left: 12px;
}

/* ------------------------------------------- sparse listing companion panel */

.blog-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 26px 26px 28px;
    border: 1px solid var(--bk-line);
    border-radius: var(--bk-radius);
    background: var(--bk-cream);
}

.blog-panel h3 {
    font-size: 19px;
    margin: 0;
}

.blog-panel > p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--bk-muted);
}

.blog-panel ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 2px;
}

.blog-panel li + li {
    border-top: 1px solid var(--bk-line);
}

.blog-panel li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 2px;
    color: var(--bk-heading);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.blog-panel li a i {
    color: var(--bk-orange);
    transition: transform .25s ease;
}

.blog-panel li a:hover,
.blog-panel li a:focus-visible {
    color: var(--bk-orange-dark);
}

.blog-panel li a:hover i {
    transform: translateX(4px);
}

@media (min-width: 992px) {
    .blog-panel {
        grid-column: 3 / -1;
    }
}