/* ============================================================================
   ABOUT PAGE — SECTION NAVIGATION "Explore This Page" (EDITORIAL WHITE DESIGN)
   File: assets/css/about/about-section-navigation.css   (REPLACE THE WHOLE FILE)

   Same design as the homepage navigation: white surface, logo green (#30AA28),
   thin gold rules, Fraunces serif numerals, asymmetric rounded corners.

   Companion to assets/js/about-section-navigation.js (kept, unchanged) and
   assets/js/about-section-navigation-plus.js.

   Every original hook is preserved:
     nav:    .is-visible  .is-hero  .is-footer
     items:  .is-active   .is-hidden
     jump:   .is-open  (+ aria-expanded on the toggle)
     layout: .about-page gutter + full-bleed .about-hero / .gsc-cta

   Themes: default (white + logo green) · midnight · royal · charcoal ·
   deepforest. Attribute on <html>: data-pub-theme   Key: gsctempc.pub.theme
   ============================================================================ */

/* ---------- Design tokens ------------------------------------------------- */
:root {
    --gsc-about-nav-width: 264px;
    --gsc-about-nav-left: 24px;
    --gsc-about-nav-gutter: calc(var(--gsc-about-nav-left) + var(--gsc-about-nav-width) + 36px);

    --gsn-acc: 217, 169, 61;                 /* gold, r,g,b for rgba() */
    --gsn-accent: #d9a93d;
    --gsn-accent-ink: #2c1f00;
    --gsn-brand: #30AA28;                    /* logo green */
    --gsn-brand-rgb: 48, 170, 40;
    --gsn-brand-deep: #228a1c;
    --gsn-on-brand: #ffffff;
    --gsn-gold-text: #b8892a;

    --gsn-bg1: #ffffff;
    --gsn-bg2: #ffffff;
    --gsn-text: #1d3a22;
    --gsn-muted: #6b776e;
    --gsn-line: rgba(48, 170, 40, .16);
    --gsn-card: transparent;
    --gsn-card-hover: rgba(48, 170, 40, .06);
    --gsn-field: #f5faf4;

    --gsn-r-lg: 10px 26px 10px 10px;
    --gsn-r: 9px;
    --gsn-shadow: 0 26px 55px rgba(48, 170, 40, .14), 0 5px 16px rgba(48, 170, 40, .08);
    --gsn-ease: cubic-bezier(.22, 1, .36, 1);
    --gsn-dur: .4s;
    --gsn-font: Arial, Helvetica, system-ui, -apple-system, "Segoe UI", sans-serif;
    --gsn-serif: var(--hp-display-font, 'Fraunces', Georgia, 'Times New Roman', serif);
}

/* Dark themes (optional) — only tokens change */
html[data-pub-theme="midnight"],
html[data-pub-theme="royal"],
html[data-pub-theme="charcoal"],
html[data-pub-theme="deepforest"] {
    --gsn-brand: rgb(var(--gsn-acc));
    --gsn-brand-rgb: var(--gsn-acc);
    --gsn-brand-deep: rgb(var(--gsn-acc));
    --gsn-on-brand: var(--gsn-accent-ink);
    --gsn-gold-text: rgb(var(--gsn-acc));
    --gsn-accent: rgb(var(--gsn-acc));
    --gsn-line: rgba(255, 255, 255, .09);
    --gsn-card: rgba(255, 255, 255, .045);
    --gsn-card-hover: rgba(255, 255, 255, .095);
    --gsn-field: rgba(0, 0, 0, .24);
    --gsn-shadow: 0 22px 50px rgba(3, 14, 8, .38), 0 6px 16px rgba(3, 14, 8, .22);
}
html[data-pub-theme="deepforest"] {
    --gsn-acc: 230, 185, 77; --gsn-accent-ink: #2c1f00;
    --gsn-bg1: #0f3d26; --gsn-bg2: #0a2b1a; --gsn-text: #eef7ef; --gsn-muted: rgba(238, 247, 239, .66);
}
html[data-pub-theme="midnight"] {
    --gsn-acc: 230, 185, 77; --gsn-accent-ink: #2c1f00;
    --gsn-bg1: #10214a; --gsn-bg2: #0a1533; --gsn-text: #eaf0ff; --gsn-muted: rgba(234, 240, 255, .66);
}
html[data-pub-theme="royal"] {
    --gsn-acc: 45, 212, 191; --gsn-accent-ink: #032b26;
    --gsn-bg1: #35196a; --gsn-bg2: #1f0f42; --gsn-text: #f3edff; --gsn-muted: rgba(243, 237, 255, .68);
}
html[data-pub-theme="charcoal"] {
    --gsn-acc: 52, 211, 153; --gsn-accent-ink: #032a1c;
    --gsn-bg1: #262c2a; --gsn-bg2: #151918; --gsn-text: #eef1ef; --gsn-muted: rgba(238, 241, 239, .66);
}

.gsc-about-section-nav,
.gsc-about-section-jump,
.gsn-toast,
.gsn-dlg-back { box-sizing: border-box; font-family: var(--gsn-font); }
.gsc-about-section-nav *,
.gsc-about-section-jump *,
.gsn-toast *,
.gsn-dlg-back * { box-sizing: border-box; }

.gsn-sr {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.gsn-hidden { display: none !important; }

/* ----------------------------------------------------------------
   Desktop layout gutter — reserved permanently at this breakpoint so
   nothing reflows while the rail fades in/out. Compact mode narrows it.
   ---------------------------------------------------------------- */
@media (min-width: 1280px) {
    body.gsc-nav-compact {
        --gsc-about-nav-gutter: calc(var(--gsc-about-nav-left) + 72px + 36px);
    }
    .about-page {
        padding-left: var(--gsc-about-nav-gutter);
        transition: padding-left .5s var(--gsn-ease);
    }
    .about-page .about-hero,
    .about-page .gsc-cta {
        margin-left: calc(var(--gsc-about-nav-gutter) * -1);
        width: calc(100% + var(--gsc-about-nav-gutter));
        transition: margin-left .5s var(--gsn-ease), width .5s var(--gsn-ease);
    }
}

/* ================================================================
   DESKTOP RAIL — white editorial card
   Sits below the real site header (JS keeps --gsn-top in sync).
   ================================================================ */
.gsc-about-section-nav {
    position: fixed;
    z-index: 420;
    left: var(--gsc-about-nav-left);
    top: var(--gsn-top, 92px);
    width: var(--gsc-about-nav-width);
    max-height: calc(100vh - var(--gsn-top, 92px) - 18px);
    max-height: calc(100dvh - var(--gsn-top, 92px) - 18px);
    display: none;
    flex-direction: column;
    padding: 18px 12px 10px 14px;
    color: var(--gsn-text);
    background: linear-gradient(180deg, var(--gsn-bg1), var(--gsn-bg2));
    border: 1px solid var(--gsn-line);
    border-radius: var(--gsn-r-lg);
    box-shadow: var(--gsn-shadow);
    opacity: 0;
    pointer-events: none;
    transform: translateX(-18px);
    transition: opacity .5s var(--gsn-ease), transform .5s var(--gsn-ease),
                width .45s var(--gsn-ease), top .3s var(--gsn-ease);
}
@media (min-width: 1280px) {
    .gsc-about-section-nav { display: flex; }
}
.gsc-about-section-nav.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}
/* Hidden over the hero and near the closing CTA / footer. */
.gsc-about-section-nav.is-hero,
.gsc-about-section-nav.is-footer {
    opacity: 0 !important;
    pointer-events: none !important;
}
/* Gold corner accent — echoes the gold offset frames on the photos */
.gsc-about-section-nav::before {
    content: '';
    position: absolute;
    top: -6px; left: -6px;
    width: 46px; height: 46px;
    border-top: 2px solid var(--gsn-accent);
    border-left: 2px solid var(--gsn-accent);
    border-top-left-radius: 8px;
    pointer-events: none;
}

.gsc-about-section-nav__header {
    display: flex; align-items: center; gap: 10px;
    padding: 0 4px 14px; flex-shrink: 0; margin: 0;
}
.gsc-about-section-nav__header-line {
    width: 28px; height: 2px; border-radius: 2px;
    background: var(--gsn-accent); flex-shrink: 0;
}
.gsc-about-section-nav__header-text {
    font-size: .64rem; font-weight: 800; letter-spacing: .24em; text-transform: uppercase;
    color: var(--gsn-brand); opacity: 1; white-space: nowrap;
}

/* Toolbar: search + theme + compact + shortcuts (built by JS) */
.gsn-toolbar { display: flex; align-items: center; gap: 6px; padding: 0 2px 12px; flex-shrink: 0; }
.gsn-search { position: relative; flex: 1 1 auto; min-width: 0; }
.gsn-search > i {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    font-size: .74rem; color: var(--gsn-brand); pointer-events: none;
}
.gsn-search input {
    width: 100%; height: 36px; padding: 0 30px 0 31px;
    font: inherit; font-size: .8rem; color: var(--gsn-text);
    background: var(--gsn-field); border: 1px solid var(--gsn-line); border-radius: 9px;
    transition: border-color .25s var(--gsn-ease), box-shadow .25s var(--gsn-ease);
    -webkit-appearance: none; appearance: none;
}
.gsn-search input::placeholder { color: var(--gsn-muted); }
.gsn-search input::-webkit-search-cancel-button { display: none; }
.gsn-search input:focus {
    outline: none; border-color: var(--gsn-brand);
    box-shadow: 0 0 0 3px rgba(var(--gsn-brand-rgb), .16);
}
.gsn-kbd {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 5px;
    font: 700 .64rem/1 var(--gsn-font); color: var(--gsn-muted);
    background: var(--gsn-bg1);
    border: 1px solid var(--gsn-line); border-bottom-width: 2px; border-radius: 6px;
}
.gsn-search .gsn-kbd { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.gsn-search input:focus ~ .gsn-kbd,
.gsn-search input:not(:placeholder-shown) ~ .gsn-kbd { opacity: 0; }

.gsn-toolwrap { position: relative; flex-shrink: 0; }
.gsn-tool {
    position: relative; width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center; padding: 0;
    color: var(--gsn-brand); font-size: .82rem;
    background: var(--gsn-bg1); border: 1px solid var(--gsn-line); border-radius: 9px; cursor: pointer;
    transition: background .25s var(--gsn-ease), border-color .25s var(--gsn-ease), transform .25s var(--gsn-ease), color .25s;
}
.gsn-tool i { transition: transform .3s var(--gsn-ease); }
.gsn-tool:hover { background: var(--gsn-card-hover); border-color: rgba(var(--gsn-brand-rgb), .45); }
.gsn-tool:hover i { transform: scale(1.12); }
.gsn-tool:active { transform: scale(.96); }
.gsn-tool[aria-pressed="true"], .gsn-tool[aria-expanded="true"] {
    background: rgba(var(--gsn-brand-rgb), .1); border-color: rgba(var(--gsn-brand-rgb), .5);
}
.gsn-tool[data-tip]::after {
    content: attr(data-tip);
    position: absolute; top: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px);
    padding: 5px 9px; font: 600 .68rem/1.2 var(--gsn-font); white-space: nowrap;
    color: #fff; background: #1d3a22;
    border-radius: 7px; box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
    opacity: 0; pointer-events: none; z-index: 9;
    transition: opacity .2s ease, transform .25s var(--gsn-ease);
}
.gsn-tool[data-tip]:hover::after,
.gsn-tool[data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

.gsn-pop {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 8; width: 176px; padding: 8px;
    background: var(--gsn-bg1);
    border: 1px solid var(--gsn-line); border-radius: 12px; box-shadow: var(--gsn-shadow);
    opacity: 0; transform: translateY(-6px) scale(.97); transform-origin: top right;
    pointer-events: none; visibility: hidden;
    transition: opacity .22s ease, transform .3s var(--gsn-ease), visibility .22s;
}
.gsn-pop.is-open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
.gsn-pop__title {
    padding: 4px 8px 6px; font-size: .62rem; font-weight: 800; letter-spacing: .16em;
    text-transform: uppercase; color: var(--gsn-muted);
}
.gsn-pop__opt {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 6px 8px;
    font: 600 .8rem var(--gsn-font); color: var(--gsn-text); text-align: left;
    background: transparent; border: 1px solid transparent; border-radius: 9px; cursor: pointer;
    transition: background .2s ease, border-color .2s ease, transform .2s var(--gsn-ease);
}
.gsn-pop__opt:hover { background: var(--gsn-card-hover); transform: translateX(2px); }
.gsn-pop__opt[aria-checked="true"] { background: rgba(var(--gsn-brand-rgb), .1); border-color: rgba(var(--gsn-brand-rgb), .4); }
.gsn-pop__opt:active { transform: scale(.97); }
.gsn-swatch {
    width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .8); box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.gsn-pop__opt i { margin-left: auto; font-size: .7rem; color: var(--gsn-brand); opacity: 0; }
.gsn-pop__opt[aria-checked="true"] i { opacity: 1; }

.gsn-progress { padding: 0 4px 12px; flex-shrink: 0; }
.gsn-progress__row {
    display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px;
    font-size: .6rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--gsn-muted);
}
.gsn-progress__count { color: var(--gsn-gold-text); font-variant-numeric: tabular-nums; }
.gsn-progress__bar { height: 3px; border-radius: 3px; background: rgba(var(--gsn-brand-rgb), .14); overflow: hidden; }
.gsn-progress__bar > span {
    display: block; height: 100%; width: 0; border-radius: 3px;
    background: linear-gradient(90deg, var(--gsn-brand), var(--gsn-accent));
    transition: width .6s var(--gsn-ease);
}

/* List — clean editorial index with hairline dividers */
.gsc-about-section-nav__list {
    list-style: none; margin: 0; padding: 2px 4px 22px 0;
    display: flex; flex-direction: column; gap: 2px;
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: rgba(var(--gsn-brand-rgb), .35) transparent;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
}
.gsc-about-section-nav__list::-webkit-scrollbar { width: 5px; }
.gsc-about-section-nav__list::-webkit-scrollbar-thumb { background: rgba(var(--gsn-brand-rgb), .3); border-radius: 4px; }
.gsc-about-section-nav__list li { margin: 0; padding: 0; border-bottom: 1px solid var(--gsn-line); }
.gsc-about-section-nav__list li:last-child { border-bottom: 0; }

.gsn-empty { padding: 22px 10px 18px; text-align: center; font-size: .8rem; line-height: 1.5; color: var(--gsn-muted); }
.gsn-empty i { display: block; margin-bottom: 8px; font-size: 1.2rem; color: var(--gsn-brand); opacity: .8; }
.gsn-empty[hidden] { display: none; }

/* Items */
.gsc-about-section-nav__item {
    position: relative; display: flex; flex-direction: column; gap: 3px;
    width: 100%; min-height: 58px; padding: 10px 10px 10px 16px;
    color: var(--gsn-text); text-decoration: none;
    background: var(--gsn-card); border: 1px solid transparent;
    border-radius: var(--gsn-r); cursor: pointer; overflow: hidden;
    transition: background var(--gsn-dur) var(--gsn-ease), border-color var(--gsn-dur) var(--gsn-ease),
                box-shadow var(--gsn-dur) var(--gsn-ease), transform var(--gsn-dur) var(--gsn-ease);
}
.gsc-about-section-nav__item::before {
    content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--gsn-brand);
    opacity: 0; transform: scaleY(.4);
    transition: opacity var(--gsn-dur) var(--gsn-ease), transform var(--gsn-dur) var(--gsn-ease);
}
.gsc-about-section-nav__item.is-hidden { display: none !important; }
.gsc-about-section-nav__item:hover,
.gsc-about-section-nav__item.is-kbd {
    background: var(--gsn-card-hover); transform: translateX(2px);
}
.gsc-about-section-nav__item:hover::before,
.gsc-about-section-nav__item.is-kbd::before { opacity: .55; transform: scaleY(.7); }
.gsc-about-section-nav__item.is-kbd { box-shadow: 0 0 0 2px rgba(var(--gsn-brand-rgb), .4) inset; }
.gsc-about-section-nav__item:active { transform: translateX(2px) scale(.985); }
.gsc-about-section-nav__item:focus-visible { outline: 3px solid var(--gsn-accent); outline-offset: 2px; }

/* Gold serif numerals */
.gsc-about-section-nav__number {
    font-family: var(--gsn-serif); font-size: .74rem; font-weight: 600; letter-spacing: .08em;
    line-height: 1; color: var(--gsn-gold-text); font-variant-numeric: tabular-nums;
}
.gsc-about-section-nav__title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gsc-about-section-nav__title {
    display: flex; align-items: center; gap: 10px; min-width: 0;
    font-family: var(--gsn-font); font-size: .88rem; font-weight: 700; line-height: 1.25; color: var(--gsn-text);
    transition: color var(--gsn-dur) var(--gsn-ease);
}
.gsc-about-section-nav__title i {
    flex-shrink: 0; width: 18px; text-align: center; font-size: .86rem; color: var(--gsn-brand);
    transition: transform var(--gsn-dur) var(--gsn-ease);
}
.gsc-about-section-nav__item:hover .gsc-about-section-nav__title i { transform: scale(1.15); }
.gsc-about-section-nav__description {
    padding-left: 28px; font-family: var(--gsn-font); font-size: .71rem; font-weight: 400;
    line-height: 1.4; color: var(--gsn-muted); opacity: 1;
}
.gsc-about-section-nav__arrow {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; font-size: .6rem; color: var(--gsn-brand);
    background: rgba(var(--gsn-brand-rgb), .1); border-radius: 50%;
    opacity: 1; transform: none;
    transition: background var(--gsn-dur) var(--gsn-ease), color var(--gsn-dur) var(--gsn-ease), transform var(--gsn-dur) var(--gsn-ease);
}
.gsc-about-section-nav__item:hover .gsc-about-section-nav__arrow { transform: translateX(3px); }

.gsc-about-section-nav mark {
    padding: 0 2px; color: inherit; background: rgba(var(--gsn-acc), .4); border-radius: 3px;
}

/* Active section — soft green tint, green bar/title, filled green arrow */
.gsc-about-section-nav__item.is-active {
    background: rgba(var(--gsn-brand-rgb), .09);
    border-color: rgba(var(--gsn-brand-rgb), .28);
    box-shadow: 0 8px 20px rgba(var(--gsn-brand-rgb), .12);
    transform: translateX(3px);
}
.gsc-about-section-nav__item.is-active::before { opacity: 1; transform: scaleY(1); }
.gsc-about-section-nav__item.is-active .gsc-about-section-nav__title { color: var(--gsn-brand-deep); }
.gsc-about-section-nav__item.is-active .gsc-about-section-nav__description { color: var(--gsn-text); opacity: 1; }
.gsc-about-section-nav__item.is-active .gsc-about-section-nav__arrow { background: var(--gsn-brand); color: var(--gsn-on-brand); }

/* Compact (rail) mode */
.gsc-about-section-nav.is-compact { width: 72px; padding: 14px 10px 8px; }
.gsc-about-section-nav.is-compact .gsc-about-section-nav__header { justify-content: center; padding-bottom: 10px; }
.gsc-about-section-nav.is-compact .gsc-about-section-nav__header-text,
.gsc-about-section-nav.is-compact .gsn-search,
.gsc-about-section-nav.is-compact .gsn-progress,
.gsc-about-section-nav.is-compact .gsc-about-section-nav__number,
.gsc-about-section-nav.is-compact .gsc-about-section-nav__description,
.gsc-about-section-nav.is-compact .gsc-about-section-nav__arrow,
.gsc-about-section-nav.is-compact .gsn-t { display: none; }
.gsc-about-section-nav.is-compact .gsn-toolbar { flex-direction: column; padding-bottom: 10px; }
.gsc-about-section-nav.is-compact .gsc-about-section-nav__list { padding-right: 0; }
.gsc-about-section-nav.is-compact .gsc-about-section-nav__item { min-height: 46px; padding: 10px; align-items: center; justify-content: center; }
.gsc-about-section-nav.is-compact .gsc-about-section-nav__title-row { justify-content: center; }
.gsc-about-section-nav.is-compact .gsc-about-section-nav__title { gap: 0; }
.gsc-about-section-nav.is-compact .gsc-about-section-nav__title i { font-size: 1.05rem; width: auto; }
.gsc-about-section-nav.is-compact .gsn-tool[data-tip]::after { top: 50%; left: calc(100% + 10px); transform: translate(4px, -50%); }
.gsc-about-section-nav.is-compact .gsn-tool[data-tip]:hover::after,
.gsc-about-section-nav.is-compact .gsn-tool[data-tip]:focus-visible::after { transform: translate(0, -50%); }
.gsc-about-section-nav.is-compact .gsn-pop { top: 0; right: auto; left: calc(100% + 12px); transform-origin: top left; }

@media (pointer: coarse) {
    .gsn-tool { width: 44px; height: 44px; }
    .gsn-search input { height: 44px; }
    .gsn-pop__opt { min-height: 44px; }
}

/* ================================================================
   MOBILE / TABLET — "Jump to a Section" bar
   Sticky under the site header (JS keeps --gsn-hdr in sync).
   ================================================================ */
.gsc-about-section-jump {
    position: sticky; z-index: 60;
    top: var(--gsn-hdr, 0px);
    display: none; margin: 0 0 -1px;
    color: var(--gsn-text); font-family: var(--gsn-font);
    background: var(--gsn-bg1);
    border-bottom: 2px solid var(--gsn-accent);
    box-shadow: 0 10px 26px rgba(48, 170, 40, .12);
}
@media (max-width: 1279.98px) {
    .gsc-about-section-jump { display: block; }
    .gsc-about-section-jump.is-open::before {
        content: ''; position: fixed; inset: 0; z-index: -1;
        background: rgba(10, 30, 14, .35);
        -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
        pointer-events: none; animation: gsnFade .3s ease both;
    }
}
.gsc-about-section-jump__toggle {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    min-height: 52px; padding: 0 20px; border: 0; background: transparent; cursor: pointer;
    color: var(--gsn-text); font-family: var(--gsn-font);
    transition: background .25s ease;
}
.gsc-about-section-jump__toggle:active { background: var(--gsn-card-hover); }
.gsc-about-section-jump__toggle:focus-visible { outline: 3px solid var(--gsn-accent); outline-offset: -3px; }
.gsc-about-section-jump__toggle-label {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gsn-brand-deep);
}
.gsc-about-section-jump__toggle-label i { color: var(--gsn-brand); font-size: .9rem; }
.gsc-about-section-jump__chevron { color: var(--gsn-brand); font-size: .74rem; opacity: 1; transition: transform var(--gsn-dur) var(--gsn-ease); }
.gsc-about-section-jump.is-open .gsc-about-section-jump__chevron { transform: rotate(180deg); }

.gsc-about-section-jump__menu {
    display: grid; grid-template-rows: 0fr; opacity: 0; overflow: hidden; background: transparent;
    transition: grid-template-rows .4s var(--gsn-ease), opacity .3s ease;
}
.gsc-about-section-jump__menu > * { min-height: 0; }
.gsc-about-section-jump.is-open .gsc-about-section-jump__menu { grid-template-rows: 1fr; opacity: 1; }
.gsc-about-section-jump__menu-inner {
    overflow: hidden; display: flex; flex-direction: column; padding: 4px 8px 12px;
    max-height: min(68vh, 560px); max-height: min(68dvh, 560px);
}
.gsc-about-section-jump.is-open .gsc-about-section-jump__menu-inner { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.gsc-about-section-jump__option {
    display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 10px 12px;
    border: 0; border-radius: 10px; background: transparent; color: var(--gsn-text);
    text-align: left; cursor: pointer; font-family: var(--gsn-font);
    transition: background .25s ease;
}
.gsc-about-section-jump__option:hover,
.gsc-about-section-jump__option:focus-visible { background: var(--gsn-card-hover); outline: none; }
.gsc-about-section-jump__option:focus-visible { box-shadow: 0 0 0 3px var(--gsn-accent) inset; }
.gsc-about-section-jump__option:active { background: rgba(var(--gsn-brand-rgb), .12); }
.gsc-about-section-jump__option.is-hidden { display: none !important; }
.gsc-about-section-jump__option.is-active { background: rgba(var(--gsn-brand-rgb), .09); }
.gsc-about-section-jump__option-num {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--gsn-serif); font-size: .74rem; font-weight: 600;
    color: var(--gsn-gold-text); background: rgba(var(--gsn-acc), .14);
}
.gsc-about-section-jump__option.is-active .gsc-about-section-jump__option-num {
    color: var(--gsn-on-brand); background: var(--gsn-brand);
}
.gsc-about-section-jump__option-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gsc-about-section-jump__option-copy strong { font-family: var(--gsn-font); font-size: .88rem; font-weight: 700; color: var(--gsn-text); }
.gsc-about-section-jump__option-copy small { font-family: var(--gsn-font); font-size: .72rem; color: var(--gsn-muted); opacity: 1; }

/* ================================================================
   TOAST + SHORTCUTS DIALOG
   ================================================================ */
.gsn-toast {
    position: fixed; left: 50%; bottom: 26px; z-index: 9996; max-width: min(92vw, 420px);
    padding: 11px 18px; font-size: .84rem; font-weight: 600; color: var(--gsn-text);
    background: var(--gsn-bg1);
    border: 1px solid var(--gsn-line); border-left: 3px solid var(--gsn-accent);
    border-radius: 999px; box-shadow: var(--gsn-shadow);
    opacity: 0; transform: translate(-50%, 18px); pointer-events: none;
    transition: opacity .3s ease, transform .4s var(--gsn-ease);
}
.gsn-toast.is-show { opacity: 1; transform: translate(-50%, 0); }

.gsn-dlg-back {
    position: fixed; inset: 0; z-index: 9995; display: flex; align-items: center; justify-content: center; padding: 18px;
    background: rgba(10, 30, 14, .45); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
    opacity: 0; transition: opacity .25s ease;
}
.gsn-dlg-back.is-open { opacity: 1; }
.gsn-dlg {
    width: min(440px, 100%); max-height: 88vh; max-height: 88dvh; overflow-y: auto;
    padding: 24px 24px 18px; color: var(--gsn-text);
    background: var(--gsn-bg1);
    border: 1px solid var(--gsn-line); border-radius: var(--gsn-r-lg); box-shadow: 0 30px 70px rgba(0, 0, 0, .25);
    transform: translateY(16px) scale(.96); transition: transform .4s var(--gsn-ease);
}
.gsn-dlg-back.is-open .gsn-dlg { transform: none; }
.gsn-dlg h2 { margin: 0 0 4px; font-family: var(--gsn-serif); font-size: 1.3rem; font-weight: 600; color: var(--gsn-brand-deep); }
.gsn-dlg > p { margin: 0 0 14px; font-size: .8rem; color: var(--gsn-muted); }
.gsn-keys { list-style: none; margin: 0; padding: 0; }
.gsn-keys li {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 9px 0; font-size: .85rem; border-top: 1px solid var(--gsn-line);
}
.gsn-keys li:first-child { border-top: 0; }
.gsn-keys .gsn-combo { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.gsn-dlg__close {
    display: block; width: 100%; min-height: 44px; margin-top: 14px;
    font: 800 .8rem var(--gsn-font); letter-spacing: .08em; text-transform: uppercase;
    color: var(--gsn-on-brand); background: var(--gsn-brand);
    border: 0; border-radius: 6px; cursor: pointer;
    transition: transform .2s var(--gsn-ease), filter .2s;
}
.gsn-dlg__close:hover { filter: brightness(.94); }
.gsn-dlg__close:active { transform: scale(.97); }
.gsn-dlg__close:focus-visible,
.gsn-tool:focus-visible,
.gsn-pop__opt:focus-visible { outline: 3px solid var(--gsn-accent); outline-offset: 2px; }

@keyframes gsnFade { from { opacity: 0; } to { opacity: 1; } }

/* ================================================================
   PREFERENCES
   ================================================================ */
@media (prefers-contrast: more) {
    :root { --gsn-line: rgba(0, 0, 0, .45); --gsn-muted: #3d4a40; }
    .gsc-about-section-nav__item.is-active { border-width: 2px; }
}
@media (prefers-reduced-motion: reduce) {
    .gsc-about-section-nav,
    .gsc-about-section-nav *,
    .gsc-about-section-nav *::before,
    .gsc-about-section-jump,
    .gsc-about-section-jump *,
    .gsc-about-section-jump::before,
    .gsn-toast, .gsn-dlg-back, .gsn-dlg,
    .about-page, .about-page .about-hero, .about-page .gsc-cta {
        animation: none !important;
        transition: none !important;
    }
}
@media print {
    .gsc-about-section-nav, .gsc-about-section-jump, .gsn-toast, .gsn-dlg-back { display: none !important; }
    .about-page { padding-left: 0 !important; }
    .about-page .about-hero, .about-page .gsc-cta { margin-left: 0 !important; width: 100% !important; }
}