/* Final responsive layer: predictable editorial scale on desktop and mobile. */
.article-page {
    --reading-width: 700px;
    --content-width: 760px;
    --layout-width: 1080px;
}

.article-page .article.article-shell {
    width: 100%;
    padding-inline: clamp(16px, 3vw, 34px);
    overflow-x: clip;
}

.article-page .article-document { max-width: 1180px; }

.article-page .article-header.cyber-hero {
    width: min(100%, 1080px);
    min-height: clamp(470px, 67vh, 620px);
    padding: clamp(82px, 9vw, 118px) 0 clamp(54px, 7vw, 76px);
    justify-content: center;
}

.article-page .glitch-title {
    max-width: 950px;
    font-size: clamp(2.65rem, 4.6vw, 4.75rem);
    line-height: .98;
    letter-spacing: -.05em;
    overflow-wrap: anywhere;
    hyphens: auto;
}

.article-page .glitch-title--long {
    max-width: 900px;
    font-size: clamp(2.4rem, 4vw, 4rem);
    line-height: 1.01;
    letter-spacing: -.045em;
}

.article-page .cyber-hero .lead {
    width: min(100%, 760px);
    margin-top: clamp(20px, 3vw, 30px);
    font-size: clamp(1rem, 1.3vw, 1.16rem);
    line-height: 1.65;
}

.article-page .article-grid {
    width: min(100%, var(--layout-width));
    grid-template-columns: 218px minmax(0, var(--content-width));
    gap: clamp(28px, 4vw, 46px);
}

.article-page .article-body,
.article-page .article-content { max-width: var(--content-width); }

.article-page .article-content {
    font-size: clamp(1rem, .97rem + .12vw, 1.06rem);
    line-height: 1.78;
}

.article-page .article-content p,
.article-page .article-content ul,
.article-page .article-content ol,
.article-page .article-content h2,
.article-page .article-content h3,
.article-page .article-content h4,
.article-page .article-content blockquote {
    width: min(100%, var(--reading-width));
    overflow-wrap: anywhere;
}

.article-page .article-content h2,
.article-page .article-section-title {
    margin-top: clamp(3.2rem, 7vw, 5.2rem);
    padding-left: 48px;
    font-size: clamp(1.55rem, 2.45vw, 2.15rem);
    line-height: 1.18;
    letter-spacing: -.025em;
}

.article-page .article-content h3 {
    margin-top: 2.2rem;
    font-size: clamp(1.2rem, 1.7vw, 1.48rem);
    line-height: 1.3;
}

.article-page .article-content table {
    display: block;
    width: min(100%, 720px);
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.article-page .article-content th,
.article-page .article-content td { min-width: 120px; }

.article-page figure.media-frame,
.article-page figure.article-photo,
.article-page figure.place-photo,
.article-page figure.article-photo--featured {
    max-width: 540px !important;
}

.article-page figure.media-frame img,
.article-page figure.article-photo img,
.article-page figure.place-photo img {
    width: 100% !important;
    height: auto !important;
    max-height: 360px !important;
    object-fit: contain !important;
}

.article-page .article-gallery { max-width: 720px !important; }
.article-page .article-gallery__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
}
.article-page .article-gallery figure.gallery-card img,
.article-page .article-gallery figure.gallery-card:nth-child(n) img {
    height: 150px !important;
    max-height: 150px !important;
    object-fit: cover !important;
}

.article-page .regional-map { height: clamp(280px, 42vw, 390px); }
.article-page .article-map-panel,
.article-page .regional-gastronomy,
.article-page .article-sources,
.article-page .article-cta,
.article-page .related-guides { max-width: 100%; }

.article-page img,
.article-page iframe,
.article-page video,
.article-page svg { max-width: 100%; }

@media (max-width: 1040px) {
    .article-page .article-grid { display: block; width: min(100%, var(--content-width)); }
    .article-page .article-rail { display: none !important; }
    .article-page .mobile-toc { display: block; }
}

@media (max-width: 780px) {
    .article-page .article-topbar__inner { min-height: 58px; }
    .article-page .article-header.cyber-hero {
        min-height: 0;
        padding-top: 82px;
        padding-bottom: 52px;
    }
    .article-page .glitch-title,
    .article-page .glitch-title--long {
        max-width: 680px;
        font-size: clamp(2.15rem, 8.2vw, 3.45rem);
        line-height: 1.02;
        letter-spacing: -.045em;
    }
    .article-page .article-meta { margin-top: 24px; }
    .article-page .article-content h2,
    .article-page .article-section-title {
        margin-top: 3.8rem;
        padding-left: 44px;
        font-size: clamp(1.45rem, 5.9vw, 1.95rem);
    }
    .article-page .magazine-spread,
    .article-page .magazine-spread--reverse {
        grid-template-columns: minmax(130px, 34%) minmax(0, 1fr);
        gap: 14px;
    }
    .article-page .article-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .article-page .article-gallery figure.gallery-card img,
    .article-page .article-gallery figure.gallery-card:nth-child(n) img { height: 135px !important; max-height: 135px !important; }
    .article-page .gastronomy-costs { grid-template-columns: 1fr !important; }
}

@media (max-width: 520px) {
    .article-page .article.article-shell { padding-inline: 14px; }
    .article-page .article-header.cyber-hero { padding-top: 70px; padding-bottom: 42px; }
    .article-page .breadcrumbs { margin-bottom: 18px; font-size: 8px; }
    .article-page .glitch-title,
    .article-page .glitch-title--long {
        font-size: clamp(1.9rem, 9.4vw, 2.65rem);
        line-height: 1.06;
        letter-spacing: -.038em;
    }
    .article-page .cyber-hero .lead { font-size: .98rem; line-height: 1.58; }
    .article-page .article-meta { gap: 5px; }
    .article-page .meta-chip { min-height: 28px; padding-inline: 8px; font-size: 7.5px; }
    .article-page .language-switcher,
    .article-page .share-tools { gap: 6px; }
    .article-page .language-switcher a,
    .article-page .share-tools a,
    .article-page .share-tools button { margin: 0; }
    .article-page .article-content { font-size: .98rem; line-height: 1.72; }
    .article-page .article-content h2,
    .article-page .article-section-title { padding-left: 40px; font-size: clamp(1.35rem, 6.7vw, 1.75rem); }
    .article-page .magazine-spread,
    .article-page .magazine-spread--reverse { display: flex; flex-direction: column; }
    .article-page .magazine-spread figure.media-frame,
    .article-page .magazine-spread figure.article-photo,
    .article-page .magazine-spread figure.place-photo { width: 100% !important; max-width: 300px !important; margin-inline: auto !important; }
    .article-page figure.media-frame,
    .article-page figure.article-photo,
    .article-page figure.place-photo,
    .article-page figure.article-photo--featured { width: 100% !important; max-width: 100% !important; border-radius: 10px !important; }
    .article-page figure.media-frame img,
    .article-page figure.article-photo img,
    .article-page figure.place-photo img { max-height: 280px !important; }
    .article-page .article-gallery__grid { gap: 7px !important; }
    .article-page .article-gallery figure.gallery-card img,
    .article-page .article-gallery figure.gallery-card:nth-child(n) img { height: 108px !important; max-height: 108px !important; }
    .article-page .article-gallery figure.gallery-card figcaption { font-size: 6.5px !important; padding: 6px !important; }
    .article-page .regional-map { height: 290px; }
    .article-page .article-map-panel { padding: 12px; }
    .article-page .related-guides > div { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .article-page *, .article-page *::before, .article-page *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

@media print {
    .article-page .glitch-title,
    .article-page .glitch-title--long { color: #111; font-size: 28pt; line-height: 1.1; }
}