/* ============================================================
   Static CMS page (#/page/:slug) — article layout, prefix "pg-"
   ============================================================ */

/* ---- reading progress bar (fixed just under the sticky header) ----
   The sticky header is the 64px .header__row PLUS the 46px .cat-nav strip on
   desktop (base.css), so the bar must clear both — anchored at --header-h
   alone it sits underneath the translucent cat-nav (z-index 89 < header 90)
   and is invisible. The strip is display:none at <=760px, where the extra
   offset drops back to zero. */
.pg-progress {
    --pg-catnav-h: 46px; /* keep in sync with .cat-nav height in base.css */
    position: fixed;
    top: calc(var(--header-h) + var(--pg-catnav-h));
    left: 0;
    right: 0;
    height: 3px;
    z-index: 89; /* below header (90) and every overlay */
    pointer-events: none;
}

@media (max-width: 760px) {
    .pg-progress { --pg-catnav-h: 0px; } /* .cat-nav hidden at this width */
}

.pg-progress__bar {
    height: 100%;
    width: 100%;
    background: var(--gold-grad);
    transform: scaleX(0);
    transform-origin: left center;
    border-radius: 0 var(--r-pill) var(--r-pill) 0;
    box-shadow: 0 1px 6px rgba(241, 164, 36, 0.35);
    transition: transform 0.1s linear;
}

/* ---- article shell ---- */
.pg-article {
    max-width: 760px;
    margin-inline: auto;
    padding: 8px 0 88px;
}

.pg-article__title {
    margin-block: 34px 0;
    letter-spacing: 0.01em;
    text-wrap: balance;
}

.pg-article__rule {
    width: 58px;
    height: 2px;
    margin: 18px 0 36px;
    border-radius: var(--r-pill);
    background: var(--gold-grad);
}

/* ---- TinyMCE body typography (scoped) ---- */
.pg-article__body {
    color: var(--text-2);
    font-size: 16.5px;
    line-height: 1.8;
    overflow-wrap: break-word;
}

.pg-article__body h1,
.pg-article__body h2,
.pg-article__body h3,
.pg-article__body h4 {
    font-family: var(--font-display);
    color: var(--text);
    line-height: 1.3;
    margin: 2em 0 0.6em;
}

.pg-article__body h1 { font-size: 28px; }
.pg-article__body h2 { font-size: 24px; }
.pg-article__body h3 { font-size: 20px; }
.pg-article__body h4 { font-size: 17px; }

.pg-article__body p { margin: 0 0 1.15em; }
.pg-article__body strong,
.pg-article__body b { color: var(--text); font-weight: 700; }

.pg-article__body ul,
.pg-article__body ol {
    margin: 0 0 1.3em;
    padding-inline-start: 1.5em;
}

.pg-article__body li { margin-block: 0.4em; }
.pg-article__body li::marker { color: var(--gold); font-weight: 700; }

.pg-article__body a {
    color: var(--gold-deep);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid var(--gold-soft);
    transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}

.pg-article__body a:hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}

.pg-article__body img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.6em auto;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
}

.pg-article__body blockquote {
    margin: 1.6em 0;
    padding: 0.6em 1.3em;
    border-left: 3px solid var(--gold);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    background: var(--surface-2);
    color: var(--text-2);
    font-style: italic;
}

.pg-article__body hr {
    border: 0;
    border-top: 1px solid var(--hairline);
    margin: 2.2em 0;
}

/* tables scroll inside their own wrapper (added by the page module) */
.pg-article__scroll {
    overflow-x: auto;
    margin: 1.5em 0;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    -webkit-overflow-scrolling: touch;
}

.pg-article__scroll > table { margin: 0; }

.pg-article__body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
}

.pg-article__body th,
.pg-article__body td {
    padding: 11px 15px;
    border: 1px solid var(--hairline);
    text-align: left;
    min-width: 120px;
}

.pg-article__body th {
    background: var(--surface-2);
    color: var(--text);
    font-weight: 700;
    white-space: nowrap;
}

/* ---- skeleton / states ---- */
.pg-skel__title {
    height: 34px;
    width: 58%;
    border-radius: 10px;
    margin-bottom: 30px;
}

.pg-skel__line { height: 13px; margin-block: 11px; }
.pg-skel__gap { height: 26px; }

.pg-state { padding-block: 48px 88px; }

@media (max-width: 640px) {
    .pg-article { padding-bottom: 64px; }
    .pg-article__title { margin-top: 22px; }
    .pg-article__rule { margin-bottom: 26px; }
    .pg-article__body { font-size: 15.5px; }
}