/* Travel Guides: hub (gh-), guide pages (gp-) and destination guides on region pages (gd-).
   Values follow docs/plans/travel-resources-design (HubA, StageOpt5, Pillar, Cluster,
   Destination): Roboto / Roboto Serif, the brand colours, 8 px cards with the
   0 2px 8px shadow, 25 px pill buttons. */

:root {
    --gh-text: #3D3D3D;
    --gh-muted: #757575;
    --gh-soft: #555555;
    --gh-line: #E0E0E0;
    --gh-line-soft: #EEEEEE;
    --gh-bg: #F7F7F7;
    --gh-blue: #15559A;
    --gh-pink: #D20158;
    --gh-serif: 'Roboto Serif', Georgia, serif;
}

/* ---------- shared ---------- */

.gh-wrap {
    max-width: 1296px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.gh-kicker {
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
}

.gh-serif {
    font-family: var(--gh-serif);
}

.gh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 25px;
    padding: 12px 24px;
    font-weight: 500;
    font-size: 15px;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.2;
}

.gh-btn-primary {
    background: var(--gh-pink);
    color: #fff;
}

.gh-btn-primary:hover {
    background: #a80147;
    color: #fff;
}

.gh-btn-white {
    border-color: rgba(255, 255, 255, .7);
    color: #fff;
}

.gh-btn-white:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

/* Quiet secondary button on a light ground (the place hero's second action) */
.gh-btn-line {
    border-color: #C7C7C7;
    color: var(--gh-text);
    background: #fff;
}

.gh-btn-line:hover {
    border-color: var(--gh-text);
    color: var(--gh-text);
}

.gh-btn-outline {
    border-color: var(--gh-pink);
    color: var(--gh-pink);
    background: #fff;
}

.gh-btn-outline:hover {
    background: #FBE9F0;
    color: var(--gh-pink);
}

.gh-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
    overflow: hidden;
}

.gh-h2 {
    font-family: var(--gh-serif);
    font-size: 30px;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
    color: var(--gh-text);
}

.gh-sub {
    margin: 0;
    font-size: 15px;
    color: var(--gh-soft);
    line-height: 1.5;
}

.gh-section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 24px;
}

.gh-section-head-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gh-more {
    font-size: 15px;
    font-weight: 500;
    color: var(--gh-blue);
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.gh-more:hover {
    color: #0f3f73;
}

.gh-dot {
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex: none;
}

/* A character in the dot (the blog's 记), in the brush face the seals and the home tiles use.
   A bigger dot than the stage number, and a character that fills it: small, it reads as a scribble. */
.gh-dot-hanzi,
.gp-stage-kicker .gh-dot-hanzi {
    width: 38px;
    height: 38px;
    font-family: 'Ma Shan Zheng', 'KaiTi', 'STKaiti', 'Noto Serif SC', serif;
    font-weight: 400;
    font-size: 26px;
    line-height: 1;
}

.gb-hero-kicker .gh-dot-hanzi {
    width: 32px;
    height: 32px;
    font-size: 22px;
}

/* ---------- hub hero ---------- */

.gh-hero {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    color: #fff;
    background: #121c30;
}

.gh-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 60%;
}

.gh-hero-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(18, 28, 48, .86) 0%, rgba(18, 28, 48, .62) 48%, rgba(18, 28, 48, .18) 100%);
}

.gh-hero-inner {
    position: relative;
    width: 100%;
    padding-top: 56px;
    padding-bottom: 56px;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 72px;
    align-items: center;
}

.gh-hero-copy {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.gh-hero-copy .gh-kicker {
    color: #F7C6DA;
}

.gh-hero h1 {
    margin: 0;
    font-family: var(--gh-serif);
    font-size: 46px;
    line-height: 1.1;
    font-weight: 600;
    color: #fff;
    text-wrap: balance;
}

.gh-hero-lede {
    margin: 0;
    font-size: 18px;
    line-height: 1.55;
    opacity: .95;
    max-width: 540px;
}

.gh-hero-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 6px;
    flex-wrap: wrap;
}

.gh-stepper {
    padding: 24px 28px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--gh-text);
}

.gh-stepper .gh-kicker {
    color: var(--gh-muted);
    margin-bottom: 8px;
}

.gh-step {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid var(--gh-line-soft);
    color: var(--gh-text);
    text-decoration: none;
}

.gh-step:last-child {
    border-bottom: 0;
}

.gh-step:hover strong {
    color: var(--gh-blue);
}

.gh-step .gh-dot {
    width: 32px;
    height: 32px;
    font-size: 14px;
}

.gh-step-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.gh-step-text strong {
    font-size: 16px;
    font-weight: 600;
}

.gh-step-text span {
    font-size: 13.5px;
    color: var(--gh-muted);
}

.gh-step-min {
    font-size: 12.5px;
    color: var(--gh-muted);
    white-space: nowrap;
}

/* ---------- stage rows ---------- */

.gh-stages-section {
    scroll-margin-top: 124px;
    padding-top: 56px;
    padding-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.gh-stage {
    scroll-margin-top: 124px;
}

/* Option 28 (docs/plans/guides-content-map-v2.html, canvas board "Hub link A"): the stage as a
   photo rail on the left with the button to its hub; on the right every guide of the stage as a
   two-column list of rows. */
.gh-stage-row {
    display: grid;
    grid-template-columns: 320px 1fr;
}

.gh-stage-rail {
    position: relative;
    background: #121c30;
    color: #fff;
}

.gh-stage-rail-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gh-stage-rail-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(18, 28, 48, .3) 0%, rgba(18, 28, 48, .72) 55%, rgba(18, 28, 48, .92) 100%);
}

.gh-stage-rail-in {
    position: relative;
    height: 100%;
    box-sizing: border-box;
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gh-stage-rail .gh-dot {
    width: 44px;
    height: 44px;
    font-size: 18px;
}

.gh-stage-rail h3 {
    font-family: var(--gh-serif);
    font-size: 34px;
    font-weight: 600;
    margin: 4px 0 0;
    line-height: 1.1;
    color: #fff;
}

.gh-stage-rail-desc {
    font-size: 14.5px;
    color: rgba(255, 255, 255, .88);
    line-height: 1.5;
}

.gh-stage-hub-btn {
    align-self: flex-start;
    margin-top: 6px;
    padding: 11px 22px;
    font-size: 14.5px;
}

.gh-stage-rail-note {
    font-size: 14px;
    color: rgba(255, 255, 255, .85);
    line-height: 1.5;
}

.gh-stage-rail-count {
    font-size: 13px;
    color: rgba(255, 255, 255, .75);
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .18);
}

.gh-stage-content {
    padding: 14px 26px 16px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.gh-stage-deeper {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gh-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px;
    align-content: start;
}

.gh-glink {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: start;
    padding: 9px 0;
    border-bottom: 1px solid var(--gh-line-soft);
    color: var(--gh-text);
    font-size: 14.5px;
    line-height: 1.4;
    text-decoration: none;
}

.gh-glink:hover {
    color: var(--gh-blue);
}

.gh-glink .gh-glink-meta {
    font-size: 12.5px;
    color: var(--gh-muted);
    white-space: nowrap;
    padding-top: 2px;
}

/* Stage rows on the hub: the same list with a thumbnail column and no order. */
.gh-stage-links {
    gap: 0 24px;
}

.gh-glink-thumb {
    grid-template-columns: 84px 1fr auto;
    align-items: center;
    padding: 8px 0;
    font-weight: 500;
}

.gh-glink-thumb .gh-glink-meta {
    padding-top: 0;
}

.gh-glink-img {
    width: 84px;
    height: 58px;
    border-radius: 6px;
    object-fit: cover;
    display: block;
    background: var(--gh-bg);
}

.gh-toggle {
    display: none;
}

.gh-toggle-label {
    display: none;
}

.gh-empty-note {
    padding: 18px 26px 22px;
    font-size: 14.5px;
    color: var(--gh-soft);
}

.gh-other-section {
    padding-top: 8px;
    padding-bottom: 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ---------- destinations ---------- */

.gh-dest-band {
    background: var(--gh-bg);
    margin-top: 32px;
}

.gh-dest-inner {
    padding-top: 52px;
    padding-bottom: 52px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.gh-dest-inner .gh-h2 {
    font-size: 28px;
}


/* ---------- FAQ + latest ---------- */

.gh-faq-latest {
    padding-top: 56px;
    padding-bottom: 48px;
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 64px;
}

.gh-faq-col,
.gh-latest-col {
    scroll-margin-top: 124px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.gh-faq-latest .gh-h2 {
    font-size: 28px;
}

.gh-faq-latest .gh-sub {
    margin-bottom: 8px;
}

.gh-faq-item {
    border-bottom: 1px solid var(--gh-line);
    padding: 4px 0;
}

.gh-faq-item:first-of-type {
    border-top: 1px solid var(--gh-line);
}

.gh-faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-weight: 600;
    font-size: 16.5px;
    color: var(--gh-text);
    padding: 12px 0;
}

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

.gh-faq-item summary svg {
    flex: none;
    transition: transform .15s ease;
}

.gh-faq-item[open] summary svg {
    transform: rotate(180deg);
}

.gh-faq-a {
    font-size: 15px;
    line-height: 1.6;
    color: var(--gh-soft);
    padding: 0 0 14px;
    white-space: pre-line;
}

.gh-faq-a a {
    font-weight: 500;
    color: var(--gh-blue);
    text-decoration: none;
}

.gh-faq-a a:hover {
    text-decoration: underline;
}

.gh-faq-more {
    margin-top: 12px;
}

.gh-latest-item {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--gh-line-soft);
    color: var(--gh-text);
    align-items: start;
    text-decoration: none;
}

.gh-latest-item:first-of-type {
    border-top: 1px solid var(--gh-line);
}

.gh-latest-item:hover strong {
    color: var(--gh-blue);
}

.gh-latest-item strong {
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.35;
    display: block;
}

.gh-latest-item .gh-latest-meta {
    font-size: 12.5px;
    color: var(--gh-muted);
}

.gh-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.gh-avatar-blank {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--gh-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}

/* ---------- newsletter + expert ---------- */

.gh-cta-band {
    background: var(--gh-bg);
}

.gh-cta-inner {
    padding-top: 48px;
    padding-bottom: 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.gh-cta-card {
    padding: 30px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gh-cta-card .gh-kicker {
    color: var(--gh-muted);
}

.gh-cta-title {
    font-family: var(--gh-serif);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
}

.gh-cta-text {
    font-size: 14.5px;
    color: var(--gh-soft);
    line-height: 1.5;
}

.gh-cta-card.gh-expert {
    background: var(--gh-blue);
    color: #fff;
}

.gh-expert .gh-kicker {
    color: #fff;
    opacity: .85;
}

.gh-expert .gh-cta-text {
    color: #fff;
    opacity: .92;
}

.gh-expert-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.gh-faces {
    display: flex;
    align-items: center;
}

.gh-faces img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, .6);
}

.gh-faces img + img {
    margin-left: -12px;
}

.gh-newsletter-wrap {
    padding-top: 8px;
    padding-bottom: 8px;
}

/* ---------- hub responsive ---------- */

@media (max-width: 1100px) {
    .gh-hero-inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .gh-stage-row {
        grid-template-columns: 240px 1fr;
    }

    .gh-stage-rail h3 {
        font-size: 30px;
    }

    .gh-faq-latest {
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .gh-wrap {
        padding: 0 16px;
    }

    .gh-hero {
        min-height: 400px;
        align-items: flex-end;
    }

    .gh-hero-img {
        object-position: 35% 60%;
    }

    .gh-hero-shade {
        background: linear-gradient(180deg, rgba(18, 28, 48, .15) 0%, rgba(18, 28, 48, .85) 70%);
    }

    .gh-hero-inner {
        padding-top: 24px;
        padding-bottom: 22px;
        gap: 20px;
    }

    .gh-hero h1 {
        font-size: 29px;
    }

    .gh-hero-lede {
        font-size: 15.5px;
    }

    .gh-stepper {
        padding: 16px 16px 12px;
    }

    .gh-stages-section {
        padding-top: 22px;
        gap: 12px;
    }

    .gh-h2 {
        font-size: 21px;
    }

    .gh-section-head {
        gap: 12px;
    }

    .gh-stage-row {
        grid-template-columns: 1fr;
    }

    /* The rail becomes a compact strip: dot, stage name and the hub button. No photo. */
    .gh-stage-rail {
        background: #fff;
        color: var(--gh-text);
        border-bottom: 1px solid var(--gh-line-soft);
    }

    .gh-stage-rail-img,
    .gh-stage-rail-shade,
    .gh-stage-rail-note,
    .gh-stage-rail-desc,
    .gh-stage-rail-count {
        display: none;
    }

    .gh-stage-rail-in {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        height: auto;
    }

    .gh-stage-rail .gh-dot {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

    .gh-stage-rail h3 {
        font-size: 20px;
        margin: 0;
        color: var(--gh-text);
    }

    .gh-stage-hub-btn {
        margin: 0 0 0 auto;
        padding: 8px 14px;
        font-size: 13px;
        white-space: nowrap;
    }

    .gh-stage-hub-btn svg {
        display: none;
    }

    .gh-stage-content {
        padding: 4px 16px 12px;
        gap: 4px;
    }

    .gh-toggle-label {
        display: flex;
        grid-column: 1 / -1;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0 4px;
        border-top: 0;
        color: var(--gh-blue);
        font-size: 14px;
        font-weight: 500;
        min-height: 44px;
        box-sizing: border-box;
        cursor: pointer;
    }

    .gh-toggle-label svg {
        transition: transform .15s ease;
    }

    .gh-toggle:checked ~ .gh-toggle-label svg {
        transform: rotate(180deg);
    }

    .gh-toggle:not(:checked) ~ .gh-stage-deeper {
        display: none;
    }

    .gh-links {
        grid-template-columns: 1fr;
    }

    .gh-glink {
        padding: 11px 0;
        min-height: 44px;
        box-sizing: border-box;
        align-items: center;
    }

    .gh-glink-img {
        width: 72px;
        height: 50px;
    }

    .gh-glink-thumb {
        grid-template-columns: 72px 1fr auto;
    }

    .gh-dest-band {
        margin-top: 12px;
    }

    .gh-dest-inner {
        padding-top: 24px;
        padding-bottom: 24px;
        gap: 14px;
    }

    .gh-dest-inner .gh-h2 {
        font-size: 21px;
    }

    .gh-faq-latest {
        grid-template-columns: 1fr;
        gap: 28px;
        padding-top: 24px;
        padding-bottom: 8px;
    }

    .gh-faq-latest .gh-h2 {
        font-size: 21px;
    }

    .gh-cta-inner {
        grid-template-columns: 1fr;
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .gh-cta-card {
        padding: 22px 18px;
    }
}

/* ---------- guide pages: stage hub ---------- */

/* The grey band carries the site's dragon (the home page watermark), in its own grey-blue,
   head towards the title. Anchored to the centred wrap, not the viewport edge, so it stays
   behind the copy on wide screens; hidden on phones where the band is short. */
.gp-head,
.gd-hero {
    background-color: var(--gh-bg);
    background-image: url(/_content/Chinanar.ComponentLib/images/dragon-background.webp);
    background-repeat: no-repeat;
    background-size: 1020px auto; /* the file has transparent padding: this shows the dragon itself about 900px wide */
    background-position: calc(50% - 392px) -24px;
}

@media (max-width: 768px) {
    .gp-head,
    .gd-hero {
        background-image: none;
    }
}

.gp-head {
    border-bottom: 1px solid var(--gh-line-soft);
}

.gp-head-inner {
    padding-top: 28px;
    padding-bottom: 44px;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 56px;
    align-items: start;
}

.gp-head-copy {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.gp-crumb {
    font-size: 13.5px;
    color: var(--gh-muted);
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.gp-crumb a {
    color: var(--gh-blue);
    text-decoration: none;
}

.gp-crumb a:hover {
    text-decoration: underline;
}

.gp-stage-tag {
    font-weight: 500;
}

.gp-title {
    font-family: var(--gh-serif);
    margin: 0;
    font-size: 42px;
    line-height: 1.12;
    font-weight: 600;
    color: var(--gh-text);
    text-wrap: balance;
}

.gp-lede {
    margin: 0;
    font-size: 18px;
    line-height: 1.55;
    color: var(--gh-soft);
}

.gp-byline {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14px;
    color: var(--gh-soft);
    margin-top: 4px;
}

.gp-byline img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.gp-byline strong {
    color: var(--gh-text);
}

.gp-head-img {
    width: 100%;
    height: 340px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    /* Top edge on the title's top edge: skip the kicker row above the title (row + 16px gap). */
    margin-top: var(--gp-head-img-top, 0);
}

.gp-head-inner.is-stage-hub {
    --gp-head-img-top: 36px; /* .gp-crumb, one 13.5px line */
}

.gp-head-inner.is-article {
    --gp-head-img-top: 44px; /* .gp-stage-kicker, 28px dot */
}

.gp-head-inner.is-story {
    --gp-head-img-top: 54px; /* .gp-stage-kicker with the 38px 记 dot */
}

/* Two columns: the sticky table of contents and the article. The deeper guides follow the
   article (.gp-deeper); the next stage is in the journey band. */
.gp-stage-hub-body {
    padding-top: 48px;
    padding-bottom: 40px;
    display: grid;
    grid-template-columns: 260px minmax(0, 760px);
    gap: 64px;
}

/* Where "#heading" links land: under the site header (--site-header-h, measured by
   js/guides-toc.js; about 114px on desktop) and, up to 1100px, under the contents bar too. */
:root {
    --gp-anchor-offset: calc(var(--site-header-h, 114px) + 10px);
}

@media (max-width: 1100px) {
    :root {
        --gp-anchor-offset: calc(var(--site-header-h, 64px) + 64px);
    }
}

/* Sticks under the site header (top row plus menu, about 114px on desktop), like the destination rail. */
.gp-sticky {
    display: flex;
    flex-direction: column;
    gap: 22px;
    position: sticky;
    top: 132px;
    align-self: start;
}

.gp-toc {
    display: flex;
    flex-direction: column;
}

.gp-toc .gh-kicker {
    color: var(--gh-muted);
    margin-bottom: 8px;
}

.gp-toc a {
    display: block;
    padding: 7px 0 7px 14px;
    border-left: 2px solid var(--gh-line);
    font-size: 14px;
    color: var(--gh-soft);
    line-height: 1.35;
    text-decoration: none;
}

.gp-toc a:hover,
.gp-toc a.is-active {
    border-left-color: var(--gh-pink);
    color: var(--gh-text);
    font-weight: 500;
}

/* The narrow-screen bar (GuideContents): hidden here, shown up to 1100px below. The list opens
   over the text rather than pushing it down, and scrolls inside when a guide has many parts. */
.gp-toc-bar {
    display: none;
    position: relative;
    background: #fff;
    border: 1px solid var(--gh-line);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

.gp-toc-bar summary {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 14px;
    cursor: pointer;
    list-style: none;
    font-size: 14px;
    color: var(--gh-text);
}

.gp-toc-bar summary::-webkit-details-marker {
    display: none;
}

.gp-toc-bar-kicker {
    flex: none;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gh-muted);
}

.gp-toc-bar-current {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.gp-toc-bar-chevron {
    flex: none;
    transition: transform .2s ease;
}

.gp-toc-bar[open] .gp-toc-bar-chevron {
    transform: rotate(180deg);
}

.gp-toc-bar .gp-toc-links {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 60vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px 0;
    background: #fff;
    border: 1px solid var(--gh-line);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.gp-toc-bar .gp-toc-links a {
    padding: 11px 16px 11px 14px;
    font-size: 15px;
}

@media print {
    .gp-toc-bar {
        display: none !important;
    }
}

.gp-side-card {
    border: 1px solid var(--gh-line);
    border-radius: 8px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #fff;
}

.gp-side-card.is-soft {
    background: var(--gh-bg);
    border-color: var(--gh-bg);
}

.gp-side-card .gh-kicker {
    color: var(--gh-muted);
}

.gp-side-card a {
    font-size: 14px;
    line-height: 1.35;
    color: var(--gh-blue);
    text-decoration: none;
}

.gp-side-card a:hover {
    text-decoration: underline;
}

.gp-article {
    min-width: 0;
}

.gp-article .post-content-text p {
    font-size: 17px;
    line-height: 1.75;
    margin: 0 0 22px;
}

.gp-article .post-content-text h2 {
    font-family: var(--gh-serif);
    font-size: 28px;
    font-weight: 600;
    margin: 48px 0 16px;
    line-height: 1.25;
    scroll-margin-top: var(--gp-anchor-offset);
}

.gp-article .post-content-text h2:first-child {
    margin-top: 0;
}

.gp-article .post-content-text h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 30px 0 10px;
}

.gp-article .post-content-text table {
    border-collapse: collapse;
    width: 100%;
    font-size: 15px;
    margin: 8px 0 28px;
}

/* Every body table sits in this box (PostMarkdownRenderer): a table wider than the text column
   scrolls sideways inside it instead of widening the page. The two local gradients cover the
   two scroll shadows at each end, so a shadow shows only on a side with more table to see. */
.post-content-text .md-table-scroll {
    overflow-x: auto;
    margin: 8px 0 28px;
    background:
        linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left center / 40px 100% no-repeat local,
        linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right center / 40px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0)) left center / 12px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0)) right center / 12px 100% no-repeat scroll;
}

.post-content-text .md-table-scroll > table {
    margin: 0;
}

.gp-article .post-content-text th {
    text-align: left;
    padding: 12px 14px;
    background: var(--gh-bg);
    border-bottom: 2px solid var(--gh-line);
    font-weight: 600;
}

.gp-article .post-content-text td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--gh-line-soft);
    vertical-align: top;
    line-height: 1.45;
}

.gp-article .post-content-text img {
    max-width: 100%;
    border-radius: 8px;
    margin: 8px auto 12px;
}

/* Safety net: whatever the Markdown does to the markup (an unclosed block once ended the text
   column early and left the photos below it unstyled), a picture never runs out of the article. */
.gp-article img,
.gd-article img {
    max-width: 100%;
}

.gp-article .post-content-text ul,
.gp-article .post-content-text ol {
    font-size: 16.5px;
    line-height: 1.65;
    margin: 0 0 22px;
}

.gp-deeper {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid var(--gh-line);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.gp-deeper .gh-kicker {
    color: var(--gh-muted);
}

/* The stage's guides on the hub: one row each, thumbnail, title, one line, minutes. No order. */
.gp-deeper-list {
    display: flex;
    flex-direction: column;
}

.gp-deeper-row {
    display: grid;
    grid-template-columns: 96px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--gh-line-soft);
    color: inherit;
    text-decoration: none;
}

.gp-deeper-row img,
.gp-deeper-noimg {
    width: 96px;
    height: 66px;
    border-radius: 6px;
    object-fit: cover;
    display: block;
    background: var(--gh-bg);
}

.gp-deeper-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.gp-deeper-text strong {
    font-size: 16px;
    line-height: 1.3;
    font-weight: 500;
    color: var(--gh-text);
}

.gp-deeper-sub {
    font-size: 13.5px;
    color: var(--gh-soft);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gp-deeper-min {
    font-size: 12.5px;
    color: var(--gh-muted);
    white-space: nowrap;
}

.gp-deeper-row:hover strong {
    color: var(--gh-blue);
}

.gp-article .gp-author-foot.gp-in-article {
    max-width: none;
    margin: 28px 0 0;
    padding: 24px 0 0;
}

/* Article head: the stage kicker in place of the "part of" ribbon */
.gp-stage-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    text-decoration: none;
}

.gp-stage-kicker .gh-dot {
    width: 28px;
    height: 28px;
    font-size: 12px;
}

.gp-stage-kicker:hover .gh-kicker {
    text-decoration: underline;
}

/* Article rail: the full stage guide, ruled in the stage colour */
.gp-note-stage-hub-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.gp-note-stage-hub-head .gh-dot {
    width: 26px;
    height: 26px;
    font-size: 12px;
}

.gp-note-stage-hub-head .gh-kicker {
    color: var(--gh-muted);
}

.gp-note-stage-hub-body {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gp-note-stage-hub-body > span {
    min-width: 0;
}

.gp-note-stage-hub-body img {
    flex: 0 0 auto;
    width: 84px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 6px;
}

.gp-note-stage-hub strong {
    display: block;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--gh-text);
}

.gp-note-stage-hub .gp-note-src {
    margin-top: 4px;
}

.gp-note-stage-hub:hover strong {
    color: var(--gh-blue);
}

.gp-journey-band {
    background: var(--gh-bg);
    border-top: 1px solid var(--gh-line-soft);
}

.gp-journey-inner {
    padding-top: 40px;
    padding-bottom: 44px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.gp-journey {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gp-journey .gh-kicker {
    color: var(--gh-muted);
}

.gp-journey-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.gp-journey-card {
    padding: 14px;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-decoration: none;
}

.gp-journey-card.is-current {
    outline: 2px solid var(--gh-pink);
}

.gp-journey-card .gh-kicker {
    font-size: 10.5px;
}

.gp-journey-card strong {
    font-size: 14px;
    line-height: 1.3;
    color: var(--gh-text);
}

.gp-journey-card:hover strong {
    color: var(--gh-blue);
}

.gp-call {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-left: 24px;
    border-left: 1px solid var(--gh-line);
}

.gp-call-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gp-call-title {
    font-family: var(--gh-serif);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
}

.gp-call-sub {
    font-size: 14.5px;
    color: var(--gh-soft);
}

/* ---------- guide pages: article ---------- */

.gp-article-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 32px 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.gp-article-page .gp-title {
    font-size: 40px;
    margin-top: 8px;
}

.gp-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    font-size: 14px;
    color: var(--gh-soft);
    padding-bottom: 20px;
    border-bottom: 1px solid var(--gh-line);
    flex-wrap: wrap;
}

.gp-meta-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gp-meta-author img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.gp-meta-author strong {
    color: var(--gh-text);
}

.gp-share {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    color: var(--gh-blue);
    text-decoration: none;
}

.gp-figure {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 16px;
}

.gp-figure img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.gp-article-body {
    max-width: 760px;
    margin: 0 auto;
    padding: 32px 16px 8px;
}

.gp-article-body .post-content-text p {
    font-size: 17px;
    line-height: 1.75;
    margin: 0 0 22px;
}

.gp-article-body .post-content-text h2 {
    font-family: var(--gh-serif);
    font-size: 26px;
    font-weight: 600;
    margin: 44px 0 14px;
    line-height: 1.25;
}

.gp-article-body .post-content-text h2:first-child {
    margin-top: 0;
}

.gp-article-body .post-content-text img {
    max-width: 100%;
    border-radius: 8px;
}

.gp-convert {
    max-width: 760px;
    margin: 0 auto;
    padding: 24px 16px 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.gp-back-stage-hub {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 20px 22px;
    background: var(--gh-bg);
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
}

.gp-back-stage-hub strong {
    font-family: var(--gh-serif);
    font-size: 18px;
    line-height: 1.3;
    color: var(--gh-text);
}

.gp-back-stage-hub:hover strong {
    color: var(--gh-blue);
}

.gp-back-stage-hub span {
    font-size: 14px;
    color: var(--gh-soft);
}

.gp-author-foot {
    max-width: 760px;
    margin: 24px auto 0;
    padding: 24px 16px 40px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-top: 1px solid var(--gh-line-soft);
}

.gp-author-foot img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}

.gp-author-foot-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--gh-soft);
}

.gp-author-foot-text .gh-kicker {
    color: var(--gh-muted);
    font-size: 11px;
}

.gp-author-foot-text strong {
    color: var(--gh-text);
    font-size: 15.5px;
}

.gp-support-band {
    padding: 22px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: var(--gh-blue);
    color: #fff;
    margin-top: 8px;
    flex-wrap: wrap;
}

.gp-support-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gp-support-title {
    font-family: var(--gh-serif);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
}

.gp-support-sub {
    font-size: 14px;
    opacity: .9;
}

/* ---------- guide pages responsive ---------- */

@media (max-width: 1100px) {
    .gp-stage-hub-body {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    /* The contents become a bar that sticks under the site header for the whole body (the
       aside is a grid item, so it sticks within the grid). z-index stays under the site
       header's 1000, so the site menu still opens over it. */
    .gp-sticky {
        top: var(--site-header-h, 64px);
        z-index: 900;
    }

    .gp-toc-wide {
        display: none;
    }

    .gp-toc-bar {
        display: block;
    }

    .gp-journey-inner {
        grid-template-columns: 1fr;
    }

    .gp-call {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid var(--gh-line);
        padding-top: 20px;
    }
}

@media (max-width: 768px) {
    .gp-head-inner {
        grid-template-columns: 1fr;
        gap: 20px;
        padding-top: 20px;
        padding-bottom: 24px;
    }

    .gp-title {
        font-size: 30px;
    }

    .gp-article-page .gp-title {
        font-size: 28px;
    }

    .gp-lede {
        font-size: 16px;
    }

    .gp-head-img {
        height: 220px;
        margin-top: 0;
    }

    .gp-stage-hub-body {
        padding-top: 24px;
    }

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

    .gp-figure img {
        height: 220px;
    }

    .gp-convert {
        grid-template-columns: 1fr;
    }

    .gp-deeper-row {
        grid-template-columns: 72px 1fr auto;
        gap: 12px;
    }

    .gp-deeper-row img,
    .gp-deeper-noimg {
        width: 72px;
        height: 50px;
    }

}

/* ---------- destination guide on region pages ---------- */

/* Place hero, "Top B": grey band, text left, one contained photo right. The photos follow in
   the gallery strip (.gd-gallery) under the fact strip. */
.gd-hero {
    border-bottom: 1px solid var(--gh-line-soft);
    color: var(--gh-text);
}

.gd-hero-inner {
    padding-top: 40px;
    padding-bottom: 44px;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 56px;
    align-items: start;
}

.gd-hero-copy {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.gd-kicker {
    margin: 0;
    color: var(--gh-pink);
}

.gd-hero h1 {
    margin: 0;
    font-family: var(--gh-serif);
    font-size: 46px;
    line-height: 1.1;
    font-weight: 600;
    color: var(--gh-text);
    text-wrap: balance;
}

.gd-lede {
    margin: 0;
    font-size: 18px;
    line-height: 1.55;
    color: var(--gh-soft);
    max-width: 600px;
}

.gd-hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 6px;
}

/* The down arrow on "See the trips": the button scrolls the page, it does not leave it. */
.gd-hero-scroll-icon {
    flex: none;
    margin-right: -4px;
    transition: transform .2s ease;
}

.gh-btn:hover .gd-hero-scroll-icon {
    transform: translateY(2px);
}

/* The photo fills a box that stretches to the height of the text column (top aligned with the
   kicker, like the guide header), never taller than the text: the image is positioned inside. */
.gd-hero-media {
    position: relative;
    align-self: stretch;
    display: block;
    width: 100%;
    min-height: 320px;
    padding: 0;
    border: 0;
    background: #E0E0E0;
    border-radius: 8px;
    overflow: hidden;
}

.gd-hero-photo {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The characters painted on the band photo, top right, in the face the experience tiles use
   (Florian, 22 October 2026: the brush, not the small seal). */
.gd-hero-brush {
    position: absolute;
    right: 22px;
    top: 16px;
    writing-mode: vertical-rl;
    font-family: 'Ma Shan Zheng', 'KaiTi', 'STKaiti', 'Noto Serif SC', serif;
    font-size: 88px;
    line-height: 1;
    color: #fff;
    text-shadow: 0 6px 24px rgba(0, 0, 0, .5);
    pointer-events: none;
}

/* The hero photo as a button that opens the gallery, with a "See all N photos" chip */
.gd-hero-photo-btn {
    cursor: pointer;
}

.gd-hero-photo-btn .gd-hero-photo {
    transition: transform .4s ease;
}

.gd-hero-photo-btn:hover .gd-hero-photo {
    transform: scale(1.03);
}

.gd-hero-photo-btn:focus-visible {
    outline: 3px solid #E7AE4B;
    outline-offset: 2px;
}

.gd-hero-photo-chip {
    position: absolute;
    right: 14px;
    bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    color: var(--gh-text);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

/* The gallery strip right under the hero (TripImagesGallery, layout "strip"); the fact band follows it */
.gd-gallery {
    padding-top: 22px;
    padding-bottom: 26px;
}

.gd-body {
    padding-top: 44px;
    padding-bottom: 40px;
    display: grid;
    grid-template-columns: minmax(0, 760px) 1fr;
    gap: 72px;
}

.gd-article {
    min-width: 0;
}

/* With the contents column (an experience whose post keeps ShowContents on): the contents at
   the width articles give it (.gp-story-body), the text, the rail. The column's own rules are
   .gp-sticky and .gp-toc above, the narrow-screen bar included. */
.gd-body--contents {
    grid-template-columns: 200px minmax(0, 1fr) 320px;
    gap: 40px;
}

.gd-contents {
    min-width: 0;
}

.gd-article .post-content-text p {
    font-size: 17px;
    line-height: 1.75;
    margin: 0 0 20px;
}

.gd-article .post-content-text h2 {
    font-family: var(--gh-serif);
    font-size: 28px;
    font-weight: 600;
    margin: 40px 0 14px;
    line-height: 1.25;
    /* The contents links land under the sticky site header without this, as on .gp-article */
    scroll-margin-top: var(--gp-anchor-offset);
}

.gd-article .post-content-text h2:first-child {
    margin-top: 0;
}

.gd-article .post-content-text img {
    max-width: 100%;
    border-radius: 8px;
}

.gd-byline {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--gh-soft);
    margin: 0 0 28px;
}

.gd-byline img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.gd-byline strong {
    color: var(--gh-text);
}

.gd-rail {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 132px;
    align-self: start;
}

.gd-links {
    padding: 22px 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gd-links .gh-kicker {
    color: var(--gh-muted);
    padding-bottom: 8px;
}

/* "Good for": a place's highlights as a rail card (RailGoodFor), one per line with its icon in
   the brand gold (the icon file is a mask, so it takes the colour whatever the file has). */
.gd-tags-card {
    padding: 22px 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gd-tags-card .gh-kicker {
    color: var(--gh-muted);
}

.gd-tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gd-tag {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--gh-text);
}

.gd-tag-icon {
    width: 18px;
    height: 18px;
    flex: none;
    background: var(--dragonroads-quaternary, #E7AE4B);
    -webkit-mask: var(--gd-tag-icon) center / contain no-repeat;
    mask: var(--gd-tag-icon) center / contain no-repeat;
}

.gd-link-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--gh-line-soft);
    color: var(--gh-text);
    font-size: 15px;
    text-decoration: none;
}

.gd-link-row:last-child {
    border-bottom: 0;
}

.gd-link-row:hover {
    color: var(--gh-blue);
}

.gd-link-row span:last-child {
    color: var(--gh-muted);
    font-size: 12.5px;
    white-space: nowrap;
}

/* ---------- the travel page rail (region, road, destination, experience) ----------
   One rule for the four: Good for (above), Where it sits, Driving in China (its own component
   styles), Get a quote. docs/plans/travel-page-rail.md. */

/* "Where it sits": photo, name and one fact per row */
.gd-sits {
    padding: 22px 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gd-sits .gh-kicker {
    color: var(--gh-muted);
    padding-bottom: 4px;
}

.gd-sits-rows {
    display: flex;
    flex-direction: column;
}

.gd-sits-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--gh-line-soft);
    color: var(--gh-text);
    text-decoration: none;
}

.gd-sits-row:last-child {
    border-bottom: 0;
}

.gd-sits-row:hover .gd-sits-name {
    color: var(--gh-blue);
}

.gd-sits-thumb {
    width: 60px;
    height: 42px;
    flex: none;
    border-radius: 4px;
    background: #F3EEE4;
    object-fit: cover;
    display: block;
}

.gd-sits-name {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
}

.gd-sits-fact {
    font-size: 12.5px;
    color: var(--gh-muted);
    white-space: nowrap;
}

.gd-sits-foot {
    margin: 8px 0 0;
    font-size: 13.5px;
    color: var(--gh-muted);
    line-height: 1.5;
}

.gd-sits-foot a {
    color: var(--gh-blue);
}

/* "Get a quote": the postcard paper, ink text, a faint 龙 behind (the .ds-hero-mark treatment) */
.gd-quote {
    position: relative;
    padding: 24px 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #F3EEE4;
    color: #191919;
    box-shadow: none;
}

.gd-quote > * {
    position: relative;
}

.gd-quote-mark {
    position: absolute;
    right: -18px;
    bottom: -58px;
    font-family: 'Ma Shan Zheng', 'KaiTi', 'STKaiti', 'Noto Serif SC', serif;
    font-size: 220px;
    line-height: 1;
    color: rgba(25, 25, 25, 0.08);
    pointer-events: none;
    user-select: none;
}

.gd-quote-kicker {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gh-pink);
}

.gd-quote-title {
    margin: 0;
    font-family: var(--gh-serif);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
    text-wrap: balance;
}

.gd-quote-text {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--gh-text);
}

.gd-quote-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
}

.gd-quote-actions .gh-btn {
    align-self: flex-start;
}

.gd-quote-alt {
    font-size: 13.5px;
    color: var(--gh-muted);
}

.gd-quote-alt a {
    color: #191919;
    text-decoration: underline;
}

@media (max-width: 1100px) {
    .gd-body,
    .gd-body--contents,
    .gd-body--solo-contents {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .gd-rail {
        position: static;
    }
}

@media (max-width: 900px) {
    .gd-hero-inner {
        grid-template-columns: 1fr;
        gap: 22px;
        padding-top: 20px;
        padding-bottom: 28px;
    }

    .gd-hero-media {
        min-height: 240px;
        height: 240px;
    }
}

@media (max-width: 768px) {
    .gd-hero h1 {
        font-size: 30px;
    }

    .gd-lede {
        font-size: 16px;
    }

    .gd-body {
        padding-top: 24px;
    }
}

/* ---------- content blocks inside guide bodies ----------
   The writer's vocabulary (docs/plans/guides-content-phase.md, A.4). Rendered inside
   .post-content-text on stage hub, article, blog and destination pages. */

/* "Questions we get asked": the h2 + h3 pairs become this accordion (PostFaqExtractor). */
.post-content-text .gp-faq {
    display: flex;
    flex-direction: column;
    margin: 4px 0 32px;
}

.post-content-text .gp-faq .gh-faq-a {
    white-space: normal;
    color: var(--gh-text);
}

.post-content-text .gp-faq .gh-faq-a p {
    font-size: 15.5px;
    line-height: 1.6;
    margin: 0 0 10px;
}

.post-content-text .gp-faq .gh-faq-a p:last-child {
    margin-bottom: 0;
}

.post-content-text .gp-faq .gh-faq-a ul,
.post-content-text .gp-faq .gh-faq-a ol {
    font-size: 15.5px;
    margin: 0 0 10px;
}

/* "The short version" (top of a stage hub) and "Key takeaways" (top of an article): grey box,
   pink kicker, a short list. */
.post-content-text .gp-short,
.post-content-text .gp-takeaways {
    background: var(--gh-bg);
    border-radius: 8px;
    padding: 22px 26px;
    margin: 0 0 36px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.post-content-text .gp-takeaways {
    padding: 18px 22px;
    margin-bottom: 30px;
    gap: 8px;
}

.post-content-text .gp-short .gh-kicker,
.post-content-text .gp-takeaways .gh-kicker {
    color: var(--gh-pink);
    margin: 0;
}

.post-content-text .gp-short ul,
.post-content-text .gp-short ol,
.post-content-text .gp-takeaways ul,
.post-content-text .gp-takeaways ol {
    margin: 0;
    padding-left: 20px;
    font-size: 16px;
    line-height: 1.65;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.post-content-text .gp-takeaways ul,
.post-content-text .gp-takeaways ol {
    font-size: 15.5px;
    line-height: 1.6;
    gap: 4px;
}

.post-content-text .gp-short p,
.post-content-text .gp-takeaways p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
}

/* Callout: the pink-left box for the one thing people get wrong. */
.post-content-text .gp-callout {
    background: #FBE9F0;
    border-left: 4px solid var(--gh-pink);
    border-radius: 0 8px 8px 0;
    padding: 18px 22px;
    font-size: 15.5px;
    line-height: 1.55;
    margin: 8px 0 26px;
}

.post-content-text .gp-callout p {
    font-size: 15.5px;
    line-height: 1.55;
    margin: 0 0 10px;
}

.post-content-text .gp-callout p:last-child {
    margin-bottom: 0;
}

/* Figures. A single photo is the Markdown image + italic caption (.md-image-block); inside
   an HTML block the writer uses <figure><img><figcaption>. Two-up figures sit in .gp-figures. */
.post-content-text figure {
    margin: 8px 0 28px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.post-content-text figure img {
    width: 100%;
    border-radius: 8px;
    margin: 0;
    display: block;
}

/* A Markdown photo keeps its own shape, but a portrait one must not grow taller than the
   screen: on a phone a full-width 3:4 or 9:16 photo filled the whole view. With width and
   height auto the browser scales both down, so the photo narrows and centres instead. */
.post-content-text p > img {
    max-height: min(60vh, 560px);
    width: auto;
    height: auto;
}

.post-content-text figcaption {
    font-size: 13.5px;
    color: var(--gh-muted);
    line-height: 1.4;
}

.post-content-text .gp-figures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 8px 0 28px;
}

.post-content-text .gp-figures figure {
    margin: 0;
}

.post-content-text .gp-figures img {
    height: 220px;
    object-fit: cover;
}

/* Three cards in a row (permit offices, city clusters). Each card is a .gp-side-card link. */
.post-content-text .gp-cards-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 8px 0 28px;
}

.post-content-text .gp-cards-3 .gp-side-card {
    gap: 6px;
    color: var(--gh-text);
    text-decoration: none;
    font-weight: 400;
    font-size: 14.5px;
    line-height: 1.5;
}

.post-content-text .gp-cards-3 .gp-side-card strong {
    font-size: 16.5px;
    line-height: 1.3;
}

.post-content-text .gp-cards-3 .gp-side-card span {
    color: var(--gh-soft);
}

.post-content-text .gp-cards-3 .gp-side-card:hover strong {
    color: var(--gh-pink);
}

/* Destination guide: the fact strip under the hero (the guide's leading table) and the month
   bar (Destination.html). */
/* The fact band: the same grey as the hero band, a teal tick in front of each label, so it reads
   as reassurance rather than a data row (treatment 4 on the destination page canvas). */
.gd-facts-band {
    border-top: 1px solid var(--gh-line);
    border-bottom: 1px solid var(--gh-line);
    background: var(--gh-bg);
}

.gd-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    padding-top: 6px;
    padding-bottom: 6px;
}

.gd-fact {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    border-left: 1px solid var(--gh-line);
    min-width: 0;
}

.gd-fact:first-child {
    border-left: 0;
    padding-left: 0;
}

.gd-fact-k {
    font-size: 12px;
    color: var(--gh-muted);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 600;
}

.gd-fact-k::before {
    content: '\2713';
    margin-right: 6px;
    color: #0a8f8d;
    font-weight: 700;
}

.gd-fact-v {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--gh-text);
}

.gd-fact-v a {
    color: var(--gh-blue);
    text-decoration: none;
}

.gd-fact-v a:hover {
    text-decoration: underline;
}

.post-content-text .gd-months {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 4px 0 16px;
}

.post-content-text .gd-month-row {
    display: flex;
    gap: 4px;
}

.post-content-text .gd-month {
    flex: 1;
    height: 10px;
    border-radius: 3px;
    background: var(--gh-line);
}

.post-content-text .gd-month.is-good {
    background: #00C9C7;
}

.post-content-text .gd-month.is-ok {
    background: #E7AE4B;
}

.post-content-text .gd-month-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--gh-muted);
}

@media (max-width: 768px) {
    .gd-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 0;
    }

    .gd-fact {
        padding: 12px 14px;
        border-left: 0;
        border-bottom: 1px solid var(--gh-line-soft);
    }

    .gd-fact:nth-child(odd) {
        padding-left: 0;
    }

    .gd-fact:nth-child(even) {
        border-left: 1px solid var(--gh-line);
    }
}

/* Placeholders the writer leaves for review; visible on purpose until replaced. */
.post-content-text .gp-placeholder {
    display: block;
    background: #FFF6D6;
    border: 1px dashed #E7AE4B;
    border-radius: 8px;
    padding: 14px 16px;
    margin: 8px 0 24px;
    font-size: 14px;
    color: #9a6b10;
}

@media (max-width: 720px) {
    .post-content-text .gp-figures,
    .post-content-text .gp-cards-3 {
        grid-template-columns: 1fr;
    }

    .post-content-text .gp-figures img {
        height: 200px;
    }

    .post-content-text .gp-short,
    .post-content-text .gp-takeaways {
        padding: 18px 18px;
    }

    .post-content-text .gp-callout {
        padding: 14px 16px;
    }
}


/* ---------- articles and blog stories: the head (.gp-head), then three columns:
   the contents (sticky, .gp-sticky), the article, a widget rail that scrolls with it
   (docs/plans/blog-article-drafts.html, draft 6, with the contents moved to the left) ---------- */

.gp-story-body {
    padding-top: 40px;
    padding-bottom: 40px;
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr) 250px;
    gap: 40px;
    align-items: start;
}

.gp-story-article {
    min-width: 0;
}

.gp-story-article .gp-convert {
    margin-top: 32px;
}

/* The rail: for an article the full guide, the next guide, more guides, a pull quote; for a
   story a pull quote, read next, more from the road. Ruled widgets get air
   under the rule so they do not crowd. */
.gp-story-rail {
    display: flex;
    flex-direction: column;
    gap: 32px;
    min-width: 0;
}

.gp-note {
    display: block;
    margin: 0;
    padding-top: 18px;
    border-top: 2px solid var(--gh-text);
    font-size: 14px;
    line-height: 1.5;
    color: var(--gh-soft);
    text-decoration: none;
}

.gp-note-quote {
    border-top-color: var(--gh-pink);
}

.gp-note-quote p {
    margin: 0;
    font-family: var(--gh-serif);
    font-size: 21px;
    line-height: 1.3;
    color: var(--gh-text);
}

.gp-note-quote p::before {
    content: '\201C';
    color: var(--gh-pink);
}

.gp-note-quote p::after {
    content: '\201D';
    color: var(--gh-pink);
}

.gp-note-next img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 10px;
}

.gp-note-next .gh-kicker {
    display: block;
    margin-bottom: 6px;
    color: var(--gh-muted);
}

.gp-note-next strong {
    display: block;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--gh-text);
}

.gp-note-next:hover strong {
    color: var(--gh-blue);
}

.gp-note-src {
    display: block;
    margin-top: 8px;
    font-size: 12.5px;
    color: var(--gh-muted);
}

.gp-mini {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.gp-mini a {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 12px;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.gp-mini a:hover {
    text-decoration: none;
}

.gp-mini img {
    display: block;
    width: 64px;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
}

.gp-mini strong {
    display: block;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--gh-text);
}

.gp-mini a:hover strong {
    color: var(--gh-blue);
}

.gp-mini a > span > span {
    font-size: 12.5px;
    color: var(--gh-muted);
}

/* One column at the same width the stage hub drops its contents. The contents become a sticky
   bar (.gp-sticky, .gp-toc-bar rules above), the rail follows the article. */
@media (max-width: 1100px) {
    .gp-story-body {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .gp-story-rail {
        order: 2;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 28px;
    }

    .gp-story-rail > * {
        flex: 1 1 260px;
    }
}

@media (max-width: 768px) {
    .gp-story-body {
        padding-top: 24px;
    }

    .gp-story-rail {
        flex-direction: column;
        gap: 28px;
    }
}

/* ---------- full-bleed header (FullBleedHero, Post.FullBleedHeader) ----------
   The photo fills the width under a shade that is darkest behind the copy; the site's dragon
   is ghosted in white on the light side (option D on the post header canvas, 9 September 2026). */
.gb-hero {
    position: relative;
    overflow: hidden;
    min-height: 400px;
    display: flex;
    align-items: flex-end;
    background: #1F2328;
    color: #fff;
}

.gb-hero-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gb-hero-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(20, 24, 32, .82) 0%, rgba(20, 24, 32, .55) 55%, rgba(20, 24, 32, .15) 100%);
}

/* The blue dragon file turned white: brightness(0) makes it black, invert(1) white; the alpha stays. */
.gb-hero-dragon {
    position: absolute;
    top: 20px;
    left: calc(50% + 90px);
    width: 700px;
    height: auto;
    filter: brightness(0) invert(1);
    pointer-events: none;
}

.gb-hero-inner {
    position: relative;
    width: 100%;
    padding-top: 56px;
    padding-bottom: 40px;
}

.gb-hero-copy {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 720px;
}

.gb-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    padding: 6px 16px 6px 6px;
    border-radius: 25px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
    text-decoration: none;
    backdrop-filter: blur(6px);
}

a.gb-hero-kicker:hover {
    background: rgba(255, 255, 255, .22);
    text-decoration: none;
}

.gb-hero-kicker .gh-dot {
    width: 26px;
    height: 26px;
    font-size: 12px;
}

/* A text-only chip (the place pages) keeps the same left padding as one with a dot. */
.gb-hero-kicker > .gh-kicker:first-child {
    padding-left: 10px;
}

.gb-hero-title {
    margin: 0;
    font-family: var(--gh-serif);
    font-size: 46px;
    line-height: 1.1;
    font-weight: 600;
    color: #fff;
    text-wrap: balance;
}

.gb-hero-lede {
    margin: 0;
    font-size: 18px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .9);
}

.gb-hero .gp-byline,
.gb-hero .gp-byline strong {
    color: rgba(255, 255, 255, .9);
}

.gb-hero .gd-hero-actions {
    margin-top: 6px;
}

.gb-hero .gh-btn-line {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .7);
}

.gb-hero .gh-btn-line:hover {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    border-color: #fff;
}

.gb-hero-chip {
    right: 24px;
    bottom: 24px;
    border: 0;
    cursor: pointer;
    font-family: inherit;
}

@media (max-width: 768px) {
    .gb-hero {
        min-height: 340px;
    }

    .gb-hero-shade {
        background: linear-gradient(180deg, rgba(20, 24, 32, .25) 0%, rgba(20, 24, 32, .85) 70%);
    }

    .gb-hero-dragon {
        display: none;
    }

    .gb-hero-inner {
        padding-top: 64px;
        padding-bottom: 24px;
    }

    .gb-hero-title {
        font-size: 30px;
    }

    .gb-hero-lede {
        font-size: 16px;
    }

    .gb-hero-chip {
        display: none;
    }
}

/* ---------- the cinematic header (PlaceHero, Post.HeaderStyle = Cinematic) ----------
   The photo fills the width, the title low in white, the brush characters painted large top
   right, the facts in a dark bar on the photo (the home hero's facts bar), then the lede on
   paper. "J1" on the journey page header canvas (11 September 2026). */
.gc-hero {
    position: relative;
    overflow: hidden;
    min-height: 460px;
    display: flex;
    align-items: flex-end;
    background: #1F2328;
    color: #fff;
}

.gc-hero-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gc-hero-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 14, 22, .35) 0%, rgba(10, 14, 22, .05) 30%, rgba(10, 14, 22, .15) 55%, rgba(10, 14, 22, .85) 100%);
}

/* The characters in the face the experience tiles use, read top to bottom */
.gc-hero-brush,
.gs-hero-brush {
    position: absolute;
    writing-mode: vertical-rl;
    font-family: 'Ma Shan Zheng', 'KaiTi', 'STKaiti', 'Noto Serif SC', serif;
    line-height: 1;
    color: #fff;
    text-shadow: 0 6px 24px rgba(0, 0, 0, .5);
    pointer-events: none;
}

.gc-hero-brush {
    right: 60px;
    top: 36px;
    font-size: 150px;
}

.gc-hero-inner {
    position: relative;
    width: 100%;
    padding-top: 64px;
    padding-bottom: 26px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.gc-hero-copy {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 760px;
}

.gc-hero-kicker {
    margin: 0;
    color: #fff;
}

.gc-hero-title {
    margin: 0;
    font-family: var(--gh-serif);
    font-size: 54px;
    line-height: 1.06;
    font-weight: 600;
    color: #fff;
    text-wrap: balance;
    text-shadow: 0 4px 18px rgba(0, 0, 0, .45);
}

.gc-hero .gh-btn-line {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .7);
}

.gc-hero .gh-btn-line:hover {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    border-color: #fff;
}

/* The facts as one translucent bar, thin dividers, the photo chip at its right end */
.gc-hero-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 8px 14px 0;
    border-radius: 12px;
    background: rgba(12, 18, 32, .72);
}

.gc-hero-facts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 12px;
    min-width: 0;
}

.gc-hero-fact {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 0 26px;
    border-left: 1px solid rgba(255, 255, 255, .3);
}

.gc-hero-fact:first-child {
    border-left: 0;
}

.gc-hero-fact-k {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(255, 255, 255, .7);
}

.gc-hero-fact-v {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
}

.gc-hero-fact-v a {
    color: #fff;
}

.gc-hero-bar .gx-hero-chip {
    position: static;
    flex: none;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .4);
    color: #fff;
    box-shadow: none;
}

.gc-hero-bar .gx-hero-chip:hover {
    background: rgba(255, 255, 255, .24);
}

.gc-hero-lede-band {
    background: #F3EEE4;
}

.gc-hero-lede {
    margin: 0 auto;
    padding-top: 30px;
    padding-bottom: 30px;
    font-size: 19px;
    line-height: 1.6;
    color: #191919;
}

.gc-hero-lede-band + .gd-gallery {
    background: #F3EEE4;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.gc-hero-lede-band + .gd-gallery > * {
    max-width: 1296px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

@media (max-width: 900px) {
    .gc-hero {
        min-height: 320px;
    }

    .gc-hero-brush {
        right: 24px;
        top: 20px;
        font-size: 84px;
    }

    .gc-hero-title {
        font-size: 34px;
    }

    .gc-hero-bar {
        flex-direction: column;
        align-items: stretch;
        padding: 4px 16px 12px;
    }

    .gc-hero-facts {
        flex-direction: column;
        align-items: stretch;
        row-gap: 0;
    }

    .gc-hero-fact {
        padding: 10px 0;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .22);
    }

    .gc-hero-fact:first-child {
        border-top: 0;
    }

    .gc-hero-bar .gx-hero-chip {
        display: none;
    }

    .gc-hero-lede {
        font-size: 17px;
    }
}

/* ---------- the seam header (PlaceHero, Post.HeaderStyle = Seam) ----------
   A paper band; inside the page's usual width, the title, the buttons and the facts as a small
   table on the left, the photo in a box on the right with the characters on its left edge.
   "J5" on the same canvas, brought back to the wrap's width (11 September 2026). */
.gs-hero {
    background: #F3EEE4;
    color: #191919;
}

.gs-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 40px;
    align-items: stretch;
    padding-top: 32px;
    padding-bottom: 36px;
}

.gs-hero-copy {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.gs-hero-title {
    margin: 0;
    font-family: var(--gh-serif);
    font-size: 40px;
    line-height: 1.08;
    font-weight: 600;
    color: #191919;
    text-wrap: balance;
}

.gs-hero-lede {
    margin: 0;
    font-size: 17px;
    line-height: 1.55;
    color: #191919;
}

.gs-hero-facts {
    margin: 16px 0 0;
    display: flex;
    flex-direction: column;
}

.gs-hero-fact {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 10px 0;
    border-top: 1px solid #D9CFBC;
    font-size: 15px;
}

.gs-hero-fact dt {
    color: #191919;
    opacity: .7;
    font-weight: 400;
}

.gs-hero-fact dd {
    margin: 0;
    font-weight: 600;
    color: #191919;
    text-align: right;
}

.gs-hero-fact dd a {
    color: var(--gh-blue);
    text-decoration: none;
}

.gs-hero-media {
    position: relative;
    overflow: hidden;
    background: #E0E0E0;
    min-height: 320px;
    border-radius: 8px;
}

.gs-hero-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gs-hero-brush {
    left: 18px;
    top: 20px;
    font-size: 96px;
}

.gs-hero-media .gx-hero-chip {
    right: 14px;
    bottom: 14px;
}

@media (max-width: 900px) {
    .gs-hero-inner {
        grid-template-columns: 1fr;
        gap: 22px;
        padding-top: 20px;
        padding-bottom: 28px;
    }

    .gs-hero-title {
        font-size: 32px;
    }

    .gs-hero-media {
        min-height: 240px;
        order: -1;
    }

    .gs-hero-brush {
        left: 16px;
        top: 16px;
        font-size: 72px;
    }
}

/* ---------- the seal on the header photo (HeaderSeal, Post.HeaderSeal) ----------
   A tilted pink chop overhanging the photo's bottom left corner, with the white dragon or one
   or two characters read top to bottom in the face the experience tiles use (option G on the
   post header canvas, 9 September 2026). */
.gp-head-media {
    position: relative;
    margin-top: var(--gp-head-img-top, 0);
}

.gp-head-media .gp-head-img {
    margin-top: 0;
}

/* The place hero's photo box clips its photo; with a seal it must not, so the photo keeps its own corners. */
.gd-hero-media.has-seal {
    overflow: visible;
}

.gd-hero-media.has-seal .gd-hero-photo {
    border-radius: 8px;
}

.gd-hero-photo-btn.has-seal:hover .gd-hero-photo {
    transform: none;
}

.gp-seal {
    position: absolute;
    right: -28px;
    top: -22px;
    width: 124px;
    height: 124px;
    border-radius: 10px;
    background: var(--gh-pink);
    transform: rotate(-7deg);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
}

.gp-seal::before {
    content: "";
    position: absolute;
    inset: 7px;
    border: 2px solid rgba(255, 255, 255, .7);
    border-radius: 5px;
}

.gp-seal-dragon {
    width: 92px;
    height: auto;
    display: block;
}

.gp-seal-text {
    font-family: 'Ma Shan Zheng', 'KaiTi', 'STKaiti', 'Noto Serif SC', serif;
    color: #fff;
    line-height: 1;
    font-size: 72px;
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: .04em;
}

.gp-seal-text.is-two {
    font-size: 46px;
}

@media (max-width: 768px) {
    .gp-seal {
        right: -10px;
        top: -12px;
        width: 88px;
        height: 88px;
    }

    .gp-seal::before {
        inset: 5px;
    }

    .gp-seal-dragon {
        width: 64px;
    }

    .gp-seal-text {
        font-size: 50px;
    }

    .gp-seal-text.is-two {
        font-size: 32px;
    }
}

/* ---------- Experience and region pages on the gallery hero ----------
   docs/plans/experience-page-redesign.md (21 October 2026): the shared hero and facts bar
   (css/gallery-hero.css) in a .th-gallery wrapper, the body in one column without a rail, the
   trip cards with a "None of these?" tile, the two rail cards side by side, the Make it yours
   band. */

.gx-head {
    padding-top: 16px;
}

/* The lightbox-only mount of the gallery strip takes no room. */
.gd-gallery-popup {
    display: contents;
}

/* The body sits exactly where a guide article's does (.gp-story-body): the contents column at
   the left edge of the wrap, 200 px wide, then the text at the width the guides give it (1248 px
   minus the 200 px contents, the 250 px rail and two 40 px gaps = 718 px). Without the contents
   column the text keeps its place and the first column stays empty, so the text starts at the
   same left position on every theme, region and guide page (Florian, 26 October 2026). */
.gd-body--solo {
    grid-template-columns: 200px minmax(0, 718px);
    gap: 40px;
    justify-content: start;
}

.gd-body--solo > .gd-article {
    grid-column: 2;
}

/* On narrow screens the contents column becomes the sticky bar (.gp-sticky rules above) and the
   body one column. These rules come after the 1100px rule above, so the collapse is repeated here. */
@media (max-width: 1100px) {
    .gd-body--solo,
    .gd-body--solo-contents {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .gd-body--solo > .gd-article {
        grid-column: auto;
    }
}

.gd-rail-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding-top: 48px;
    align-items: stretch;
}

.gd-rail-pair > * {
    height: 100%;
    box-sizing: border-box;
}

/* The sixth cell of the trip grid. */
.gd-none-tile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    height: 100%;
    min-height: 220px;
    box-sizing: border-box;
    padding: 28px 30px;
    background: #F3EEE4;
    border-radius: 14px;
    color: #3D3D3D;
    text-decoration: none;
}

.gd-none-tile:hover {
    color: #3D3D3D;
    background: #EEE7D9;
}

.gd-none-kicker {
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #D20158;
    font-weight: 600;
}

.gd-none-title {
    font-family: 'Roboto Serif', Georgia, serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
}

.gd-none-link {
    font-weight: 600;
    font-size: 14px;
    color: #D20158;
}

/* Make it yours */
.gd-yours {
    padding-top: 56px;
}

.gd-yours-inner {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 40px;
    align-items: center;
    padding: 44px 48px 40px;
    background: #1B1B1F;
    color: #fff;
    border-radius: 16px;
}

.gd-yours-kicker {
    margin: 0 0 12px;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #E7AE4B;
    font-weight: 600;
}

.gd-yours-title {
    margin: 0 0 14px;
    font-family: 'Roboto Serif', Georgia, serif;
    font-size: 36px;
    font-weight: 500;
    line-height: 1.08;
    color: #fff;
}

.gd-yours-lead {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    color: #D9D9DE;
    max-width: 600px;
}

.gd-yours-chips {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gd-chip {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
}

.gd-chip:hover {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.gd-yours-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.gd-yours-ghost {
    color: #fff;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .6);
}

.gd-yours-ghost:hover {
    color: #fff;
    background: rgba(255, 255, 255, .12);
}

@media (max-width: 900px) {
    .gd-rail-pair {
        grid-template-columns: minmax(0, 1fr);
    }

    .gd-yours-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        padding: 28px 22px;
    }

    .gd-yours-title {
        font-size: 28px;
    }
}

/* Captioned images in a place page body: the photo as a block, the caption right under it
   (the generic p rule above gave both the body text's size and 20px margins). */
.gd-article .post-content-text .md-image-block {
    margin: 0 0 8px;
    line-height: 0;
}

/* Photos in the text: one width for all, narrower than the column, centred, never cropped
   (Florian, 22 October 2026: full width was too big, a crop is out, mixed widths were disliked).
   A portrait photo is the one exception: the height cap keeps it from towering, so it ends up
   narrower. A per-photo size choice in the Markdown is a later addition. */
.gd-article .post-content-text .md-image-block {
    text-align: center;
}

.gd-article .post-content-text .md-image-block img {
    display: inline-block;
    width: 100%;
    max-width: 640px;
    max-height: 480px;
    height: auto;
    object-fit: contain;
    margin: 0;
}

.gd-article .post-content-text .md-image-caption {
    margin: 0 0 28px;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    color: #6b7280;
}

/* ---- Full-bleed with photos (HeaderStyle.FullBleedCorner and FullBleedRail, 22 October 2026) ----
   The photo across the page, no ghosted dragon, no photo strip under the header: the first four
   gallery photos sit inside the header, bottom right (corner) or as a column on the right (rail).
   Board "Headers 2" on the experience page redesign canvas, variants 4 and 2. */
.gf-hero {
    position: relative;
    overflow: hidden;
    min-height: 400px;
    display: flex;
    align-items: flex-end;
    background: #1F2328;
    color: #fff;
}

.gf-hero-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gf-hero-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(20, 24, 32, .78) 0%, rgba(20, 24, 32, .42) 55%, rgba(20, 24, 32, .1) 100%);
}

.gf-hero-shade::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60%;
    background: linear-gradient(180deg, rgba(20, 24, 32, 0) 0%, rgba(20, 24, 32, .55) 100%);
}

.gf-hero--rail .gf-hero-shade {
    background: linear-gradient(90deg, rgba(20, 24, 32, .8) 0%, rgba(20, 24, 32, .45) 50%, rgba(20, 24, 32, .25) 100%);
}

.gf-hero-brush {
    position: absolute;
    right: 64px;
    top: 28px;
    writing-mode: vertical-rl;
    font-family: 'Ma Shan Zheng', 'KaiTi', 'STKaiti', 'Noto Serif SC', serif;
    font-size: 108px;
    line-height: .95;
    color: #fff;
    opacity: .92;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .4);
    pointer-events: none;
}

.gf-hero-brush--inline {
    position: static;
    writing-mode: horizontal-tb;
    font-size: 64px;
    line-height: 1;
    margin-bottom: 4px;
}

.gf-hero-inner {
    position: relative;
    width: 100%;
    padding-top: 40px;
    padding-bottom: 32px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
}

.gf-hero--rail .gf-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 140px;
    align-items: end;
}

.gf-hero-copy {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 640px;
}

.gf-hero--rail .gf-hero-copy {
    max-width: 720px;
}

.gf-hero-kicker {
    color: rgba(255, 255, 255, .85);
}

.gf-hero-title {
    margin: 0;
    font-family: var(--gh-serif);
    font-size: 48px;
    line-height: 1.04;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
    text-wrap: balance;
}

.gf-hero-lede {
    margin: 0;
    font-size: 17px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .92);
}

.gf-hero .gd-hero-actions {
    margin-top: 6px;
}

.gf-hero .gh-btn-line {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .7);
}

.gf-hero .gh-btn-line:hover {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    border-color: #fff;
}

.gf-hero-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 108px);
    gap: 8px;
    flex: none;
}

.gf-hero--rail .gf-hero-thumbs {
    grid-template-columns: 140px;
    grid-auto-rows: 80px;
}

.gf-hero-thumb {
    position: relative;
    display: block;
    overflow: hidden;
    height: 72px;
    border-radius: 8px;
    background: #1B1B1F;
    color: #fff;
    text-decoration: none;
}

.gf-hero--rail .gf-hero-thumb {
    height: auto;
}

.gf-hero-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s ease;
}

.gf-hero-thumb:hover img {
    transform: scale(1.05);
}

.gf-hero-thumb-more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
    background: rgba(18, 18, 22, .46);
}

@media (max-width: 768px) {
    .gf-hero {
        min-height: 320px;
    }

    .gf-hero-shade {
        background: linear-gradient(180deg, rgba(20, 24, 32, .25) 0%, rgba(20, 24, 32, .85) 70%);
    }

    .gf-hero--rail .gf-hero-shade {
        background: linear-gradient(180deg, rgba(20, 24, 32, .25) 0%, rgba(20, 24, 32, .85) 70%);
    }

    .gf-hero-shade::after {
        display: none;
    }

    /* The corner brush would sit on the title once the copy is taller than the photo:
       on a phone it moves above the title, horizontal, like the rail style's. */
    .gf-hero--corner {
        flex-direction: column;
        justify-content: flex-end;
        align-items: stretch;
    }

    .gf-hero--corner .gf-hero-brush {
        position: relative;
        right: auto;
        top: auto;
        align-self: flex-start;
        writing-mode: horizontal-tb;
        font-size: 48px;
        line-height: 1;
        margin: 72px 0 0 16px;
    }

    .gf-hero--corner .gf-hero-inner {
        padding-top: 16px;
    }

    .gf-hero-brush--inline {
        font-size: 48px;
        margin-bottom: 0;
    }

    .gf-hero-inner,
    .gf-hero--rail .gf-hero-inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        padding-top: 72px;
        padding-bottom: 24px;
    }

    .gf-hero-title {
        font-size: 32px;
    }

    .gf-hero-lede {
        font-size: 16px;
    }

    .gf-hero-thumbs,
    .gf-hero--rail .gf-hero-thumbs {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-rows: auto;
    }

    .gf-hero-thumb,
    .gf-hero--rail .gf-hero-thumb {
        height: 64px;
    }

    .gf-hero .gb-hero-chip {
        display: none;
    }
}

/* ---- Full-bleed, split (HeaderStyle.FullBleedSplit, 22 October 2026): the big photo to the left
   edge, three gallery photos stacked to the right edge, the title on the big one. ---- */
.gf-split {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    gap: 6px;
    height: 420px;
    background: #fff;
}

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

.gf-split-main {
    position: relative;
    overflow: hidden;
    background: #1F2328;
    color: #fff;
    display: flex;
    align-items: flex-end;
}

.gf-split-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 24, 32, .04) 0%, rgba(20, 24, 32, .18) 45%, rgba(20, 24, 32, .72) 100%);
}

.gf-split .gf-hero-brush {
    right: 40px;
}

.gf-split-copy {
    position: relative;
    padding: 0 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 760px;
}

.gf-split-main .gh-btn-line {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .7);
}

.gf-split-side {
    display: grid;
    grid-auto-rows: minmax(0, 1fr);
    gap: 6px;
}

.gf-split-side .gf-hero-thumb {
    height: auto;
    min-height: 0;
    border-radius: 0;
}

/* The photo fills its cell whatever its own size, so the column keeps the hero's height. */
.gf-split-side .gf-hero-thumb img,
.gf-strip-photos .gf-hero-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.gf-split-side .gf-hero-thumb-more {
    font-size: 15px;
    gap: 8px;
}

/* ---- Film strip (HeaderStyle.FilmStrip, header canvas 20 October 2026, built 22 October): five
   gallery photos in a row, then a paper band with the title, the red stamp and the facts. ---- */
.gf-strip-photos {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    height: 240px;
    background: #1B1B1F;
}

.gf-strip-photos--one {
    grid-template-columns: minmax(0, 1fr);
}

.gf-strip-photos .gf-hero-thumb {
    height: auto;
    border-radius: 0;
}

.gf-strip-more {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 8px;
    background: rgba(18, 18, 22, .78);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

.gf-strip-band {
    background: #F3EEE4;
}

.gf-strip-inner {
    padding-top: 32px;
    padding-bottom: 36px;
    display: grid;
    grid-template-columns: minmax(0, 7fr) 110px minmax(0, 4fr);
    gap: 32px;
    align-items: start;
}

.gf-strip-inner--nofacts {
    grid-template-columns: minmax(0, 1fr) 110px;
}

.gf-strip-copy {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 680px;
}

.gf-strip-title {
    margin: 0;
    font-family: var(--gh-serif);
    font-size: 48px;
    line-height: 1.02;
    font-weight: 600;
    color: var(--gh-text);
    text-wrap: balance;
}

.gf-strip-lede {
    margin: 0;
    font-size: 17px;
    line-height: 1.55;
    color: #3D3D3D;
}

.gf-strip-seal {
    display: flex;
    justify-content: center;
    padding-top: 8px;
}

.gf-strip-stamp {
    width: 84px;
    height: 84px;
    background: #D20158;
    transform: rotate(-6deg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(210, 1, 88, .25);
}

.gf-strip-stamp span {
    font-family: 'Ma Shan Zheng', 'KaiTi', 'STKaiti', 'Noto Serif SC', serif;
    color: #fff;
    font-size: 40px;
    line-height: 1;
    writing-mode: vertical-rl;
    transform: rotate(6deg);
}

.gf-strip-facts {
    margin: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px 18px;
    font-size: 14px;
    border-top: 1px solid #D9D0C0;
    padding-top: 14px;
}

.gf-strip-fact {
    display: contents;
}

.gf-strip-facts dt {
    color: #6B6B6B;
}

.gf-strip-facts dd {
    margin: 0;
    font-weight: 600;
}

@media (max-width: 768px) {
    .gf-split {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
        gap: 4px;
    }

    .gf-split-main {
        min-height: 320px;
        flex-direction: column;
        justify-content: flex-end;
        align-items: stretch;
    }

    .gf-split-shade {
        background: linear-gradient(180deg, rgba(20, 24, 32, .25) 0%, rgba(20, 24, 32, .85) 70%);
    }

    .gf-split .gf-hero-brush {
        position: relative;
        right: auto;
        top: auto;
        align-self: flex-start;
        writing-mode: horizontal-tb;
        font-size: 48px;
        line-height: 1;
        margin: 72px 0 0 16px;
    }

    .gf-split-copy {
        padding: 12px 16px 20px;
    }

    .gf-split-side {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: 96px;
        gap: 4px;
    }

    .gf-split-side .gf-hero-thumb-more {
        font-size: 12px;
        gap: 5px;
        text-align: center;
        padding: 0 6px;
    }

    .gf-strip-photos {
        height: 110px;
    }

    .gf-strip-more {
        right: 6px;
        bottom: 6px;
        padding: 5px 7px;
        font-size: 11px;
    }

    .gf-strip-inner,
    .gf-strip-inner--nofacts {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        padding-top: 24px;
        padding-bottom: 28px;
    }

    .gf-strip-seal {
        order: -1;
        justify-content: flex-start;
        padding-top: 0;
    }

    .gf-strip-stamp {
        width: 60px;
        height: 60px;
    }

    .gf-strip-stamp span {
        font-size: 28px;
    }

    .gf-strip-title {
        font-size: 32px;
    }

    .gf-strip-lede {
        font-size: 16px;
    }
}

/* ---- Grey band with photos (HeaderStyle.BandPhotos, 22 October 2026): the text column stretches
   to the photo's height and the first four gallery photos sit at its bottom, level with the
   photo's bottom edge. No strip follows. ---- */
.gd-hero-copy-text {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.gd-hero--photos .gd-hero-copy {
    align-self: stretch;
    justify-content: space-between;
}

/* The tiles take the whole width of the text column (Florian, 23 October 2026: much bigger),
   four across, 3:2 each, level with the photo's bottom edge. Same in the seam. */
.gx-hero-tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 24px;
}

.gx-hero-tiles .gf-hero-thumb {
    height: auto;
    aspect-ratio: 3 / 2;
}

.gx-hero-tiles .gf-hero-thumb-more {
    font-size: 15px;
    gap: 8px;
}

.gs-hero-copy-text {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.gs-hero--photos .gs-hero-copy {
    justify-content: space-between;
}

@media (max-width: 900px) {
    /* One column: the text, then the big photo, then the four tiles under it. */
    .gd-hero--photos .gd-hero-copy {
        display: contents;
    }

    .gd-hero--photos .gd-hero-copy-text {
        order: 1;
    }

    .gd-hero--photos .gd-hero-media {
        order: 2;
    }

    .gd-hero--photos .gd-hero-thumbs {
        order: 3;
        margin-top: 0;
    }

    .gx-hero-tiles {
        gap: 6px;
    }

    /* The seam on a phone, the same order: the text, the big photo, the tiles. */
    .gs-hero--photos .gs-hero-copy {
        display: contents;
    }

    .gs-hero--photos .gs-hero-copy-text {
        order: 1;
    }

    .gs-hero--photos .gs-hero-media {
        order: 2;
    }

    .gs-hero--photos .gs-hero-thumbs {
        order: 3;
        margin-top: 0;
    }
}

/* ---- Film strip without the stamp (FilmStripWatermark, FilmStripStandfirst, 23 October 2026):
   the first photo twice as wide; the band with the characters as a faint watermark on the right,
   or with the title left and the lede in the right column, the characters on the big photo. ---- */
.gf-strip--big .gf-strip-photos {
    grid-template-columns: 2fr repeat(4, minmax(0, 1fr));
    height: 260px;
}

.gf-strip-brush {
    left: 18px;
    right: auto;
    top: 16px;
    font-size: 84px;
    line-height: 1;
}

.gf-strip-band {
    position: relative;
    overflow: hidden;
}

.gf-strip-mark {
    position: absolute;
    right: 40px;
    top: -36px;
    font-family: 'Ma Shan Zheng', 'KaiTi', 'STKaiti', 'Noto Serif SC', serif;
    font-size: 300px;
    line-height: .9;
    color: rgba(61, 61, 61, .07);
    white-space: nowrap;
    pointer-events: none;
}

.gf-strip-inner {
    position: relative;
}

.gf-strip-inner--mark {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
}

.gf-strip-inner--mark.gf-strip-inner--nofacts {
    grid-template-columns: minmax(0, 1fr);
}

.gf-strip-inner--standfirst {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 48px;
}

.gf-strip--standfirst .gf-strip-title {
    font-size: 52px;
}

.gf-strip-aside .gf-strip-lede {
    max-width: none;
    padding-top: 8px;
}

.gf-strip-aside .gf-strip-facts {
    margin-top: 6px;
}

@media (max-width: 768px) {
    .gf-strip--big .gf-strip-photos {
        height: 120px;
    }

    .gf-strip-brush {
        left: 10px;
        top: 8px;
        font-size: 44px;
    }

    .gf-strip-mark {
        right: 8px;
        top: -8px;
        font-size: 150px;
    }

    .gf-strip-inner--mark,
    .gf-strip-inner--standfirst {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .gf-strip--standfirst .gf-strip-title {
        font-size: 32px;
    }

    .gf-strip-aside .gf-strip-lede {
        padding-top: 0;
    }
}