@font-face {
    font-family: 'GT Alpina';
    src: url('assets/fonts/GT-Alpina-Extended-Medium-Trial.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'GT Alpina Standard Regular';
    src: url('assets/fonts/GT-Alpina-Standard-Regular-Trial.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GT Alpina Extended Medium';
    src: url('assets/fonts/GT-Alpina-Extended-Medium-Trial.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'GT Alpina Standard Light';
    src: url('assets/fonts/GT-Alpina-Standard-Light-Trial.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

:root {
    --site-bg: #FFFFFF; /* site background (light theme) */
    --content-top-offset: 24vh; /* increased vertical offset for main content */
    --text-color: #000;
    --link-color: #000;
    --secondary-bg: #FFFFFF;
    --accent-color: #000;
}
body.dark {
    --site-bg: #000000;
    --text-color: #FFFFFF;
    --link-color: #FFFFFF;
    --secondary-bg: #000000;
    --accent-color: #FFFFFF;
}

/* When About is open, the entire site adopts the blue theme */
body.about-open {
    --site-bg: #BED5DF;   /* site background */
    --text-color: #000000;/* text color */
    --link-color: #000000;/* link color */
    --secondary-bg: #BED5DF;
    --accent-color: #000000;
}
@font-face {
    font-family: 'GT Alpina';
    src: url('assets/fonts/GT-Alpina-Extended-Medium-Trial.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'GT Alpina Standard Regular';
    src: url('assets/fonts/GT-Alpina-Standard-Regular-Trial.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GT Alpina Extended Medium';
    src: url('assets/fonts/GT-Alpina-Extended-Medium-Trial.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'GT Alpina Standard Light';
    src: url('assets/fonts/GT-Alpina-Standard-Light-Trial.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

:root {
    --site-bg: #FFFFFF; /* reverted from #FBFAF7 */
    --content-top-offset: 24vh; /* increased vertical offset for main content */
    --text-color: #000;
    --link-color: #000;
    --secondary-bg: #FFFFFF;
    --accent-color: #000;
}
body.dark {
    --site-bg: #000000;
    --text-color: #FFFFFF;
    --link-color: #FFFFFF;
    --secondary-bg: #000000;
    --accent-color: #FFFFFF;
}

/* Hide scrollbars (Chrome/Safari/Edge/Firefox) but keep scrolling */
html, body {
    -ms-overflow-style: none; /* IE/Edge legacy */
    scrollbar-width: none;    /* Firefox */
}
body::-webkit-scrollbar { display: none; } /* WebKit */

/* Also hide inside about panel if it scrolls */
.about-section { scrollbar-width: none; }
.about-section::-webkit-scrollbar { display: none; }

/* Global scrollbar hide */
* {
    scrollbar-width: none !important; /* Firefox */
}
*::-webkit-scrollbar {
    display: none !important; /* Chrome/Safari/Edge */
}

body {
    margin: 0;
    font-family: 'GT Alpina', serif;
    font-size: 18px; /* increased from 12px */
    font-weight: bold;
    background: var(--site-bg);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #000; /* ensure base text color */
    transition: background-color 0.6s cubic-bezier(.01,.15,.21,.95);
    display: flex;            /* enable sticky footer layout */
    flex-direction: column;   /* vertical stacking */
    min-height: 100vh;        /* fill viewport height */
}
body,
body * { color: var(--text-color); }

/* About expands below sticky navbar (height animation pushes content) */
.about-section {
    max-width: 380px; /* widened for desktop */
    margin-left: calc(24px + 40%);
    padding: 0; /* padding handled by inner wrapper now */
    font-family: inherit;
    font-size: inherit;
    color: #000;
    background: var(--site-bg);
    text-align: left;
    overflow: hidden;
    height: 0;
    opacity: 0;
    pointer-events: none;
    transition: height 1.4s cubic-bezier(.01,.15,.21,.95), opacity 0.7s ease, background-color 0.6s cubic-bezier(.01,.15,.21,.95);
    will-change: height, opacity;
}
body.about-open .about-section {
    height: var(--about-open-height, calc(100vh - 80px)); /* fill viewport below navbar */
    opacity: 1;
    pointer-events: auto;
}

/* Inner wrapper handles spacing & fade to avoid layout jump */
.about-section .about-inner {
    padding: 2rem 0 2rem 0;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.9s ease 0.2s, transform 1.2s cubic-bezier(.01,.15,.21,.95) 0.2s;
}
body.about-open .about-section .about-inner {
    opacity: 1;
    transform: translateY(0);
}

/* Remove earlier height animation definitions (superseded) */

body.preload .page-content,
body.preload .navbar { opacity: 0; }
body.content-visible .page-content,
body.content-visible .navbar { opacity: 1; transition: opacity 0.7s cubic-bezier(.01,.15,.21,.95); }

.logo,
.filter-btn,
.nav-items button,
.view-btn,
.view-btns {
    font-size: inherit;
    font-family: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
}

.page-content {
    /* Remove horizontal padding so grid can span full width with its own gutter */
    padding: 24px 0 24px 0;
    box-sizing: border-box;
    max-width: 100%;
    margin: 0 auto;
    margin-top: var(--content-top-offset);
    transition: transform 0.9s cubic-bezier(.01,.15,.21,.95); /* align with about-section */
    transform: translateY(0);
    opacity: 1;
    will-change: transform;
}

/* page-content no longer translated; real push handled by expanding about-section height */

.logo {
    text-align: left;
    font-weight: 400 !important;
    letter-spacing: 0;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    height: auto;
    cursor: pointer;
    transition: font-size 1s cubic-bezier(0,.59,.46,.98);
    background: none;
    border: none;
    font-family: 'GT Alpina Extended Regular', 'GT Alpina Extended Medium', 'GT Alpina', serif !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    z-index: 102;
    position: relative;
    color: var(--text-color) !important;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}
.logo:hover {
    text-decoration: underline;
    transition: text-decoration 0.2s cubic-bezier(0,0,0.58,1);
}

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* fixed four columns on all non-mobile widths */
    gap: 6rem 6rem;
    width: 100vw; /* span full viewport width */
    padding-top: 5%;
    margin: 0;
    box-sizing: border-box;
    padding-left: 24px;
    padding-right: 24px;
}
@media (min-width: 1600px) {
    .grid { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 1920px) {
    .grid { grid-template-columns: repeat(6, 1fr); }
}

.asset {
    display: block;
    background: transparent;
    text-align: left;
    font-weight: normal;
    margin: 0;
    text-decoration: none;
    color: var(--text-color);
    cursor: pointer;
    transition: opacity 0.2s cubic-bezier(0,0,0.58,1);
}

.grid:not(.list) .asset {
    width: 100%;
    max-width: none;
}

.navbar {
    position: sticky;
    top: 0;
    width: 100%;
    background: var(--site-bg);
    z-index: 3000;
    display: flex;
    align-items: flex-start;
    transition: background-color 0.6s cubic-bezier(.01,.15,.21,.95);
}

/* Navbar inherits site background (blue when About is open) */

/* Instantly make navbar transparent when About is open (no easing) */
body.about-open .navbar {
    background: transparent !important;
    transition: none !important;
}
/* Maintain navbar transparency while About panel is closing */
body.about-closing .navbar {
    background: transparent !important;
    transition: none !important;
}
/* Disable scroll during About open/close transition */
body.about-transition-lock {
    overflow: hidden !important;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    overscroll-behavior: none;
    touch-action: none;
}

.navbar-content {
    width: 100%;
    max-width: 100vw;
    padding: 24px 24px 24px 24px;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.nav-items {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}

.filter-menu {
    position: absolute;
    top: 24px;
    left: calc(24px + 40%);
    display: flex;
    flex-direction: row;
    gap: 6px;
    margin: 0;
    height: auto;
    align-items: center;
    justify-content: flex-start;
}

.filter-btn,
.nav-items button {
    font-family: inherit;
    font-weight: normal;
    cursor: pointer;
    margin: 0;
    background: none;
    border: none;
    outline: none;
    box-shadow: none;
    padding: 0;
    color: var(--accent-color);
    font-style: normal;
}
.filter-btn.active {
    font-style: normal;
    text-decoration: underline;
}

.filter-btn:not(:last-child)::after {
    content: ",";
    margin-right: 4px;
}

/* Hide 'Selected' as a visible nav item but keep it as default active state */
.filter-menu .filter-btn[data-category="Selected"],
.filter-options .filter-option[data-category="Selected"] {
    display: none !important;
}

.view-btns {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    margin: 0;
}

.view-btn {
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.2s cubic-bezier(0,0,0.58,1);
}
.view-btn.active {
    font-style: italic;
    font-weight: normal;
    color: var(--accent-color);
}

/* About trigger replaces view toggle on desktop */
.about-trigger {
    cursor: pointer;
    font-weight: normal;
    font-style: normal;
}
.about-trigger:hover { text-decoration: underline; }
.about-open .about-trigger { text-decoration: underline; font-style: normal; }

/* Index footer button */
.footer-index-toggle { margin-top: 0; }
.index-btn { cursor: pointer; font-weight: normal; }
.index-btn:hover { text-decoration: underline; }
.index-btn.active { text-decoration: underline; font-style: normal; }

.asset-title {
    font-size: 18px;
    font-weight: 300;
    font-style: normal;
    margin-bottom: 10px;
    font-family: 'GT Alpina Standard Light', 'GT Alpina Standard Regular', 'GT Alpina', serif;
    text-transform: none; /* sentence case */
    letter-spacing: 0; /* tight */
}

.asset-meta {
    font-family: inherit;
    color: #000 !important;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
    flex-wrap: nowrap;
}

.asset-meta span {
    color: var(--text-color);
    display: inline-block;
    flex: 0 0 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: inherit;
}

/* Metadata styling: uppercase regular font */
.asset-meta,
.asset-meta span {
    font-family: 'GT Alpina Extended Medium', 'GT Alpina', serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-weight: 500 !important;
    font-size: 10px;
}

.asset-link {
    color: #000;
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
}

@media (max-width: 100%) {
    .grid {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        gap: 1rem;
        padding: 0;
    }
    .asset {
        min-width: 160px;
        flex: 0 0 auto;
    }
}

/* List view */
.grid.list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 2rem;
}

.grid.list .asset {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.5rem 0;
    background: transparent;
    border: none;
    gap: 1rem;
}

.grid.list .asset-title {
    max-width: 600px;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    font-family: inherit;
    flex: 1 1 auto;
    margin-bottom: 0;
}

/* List view metadata: horizontal left-to-right */
.grid.list .asset-meta { margin-top: 4px; line-height: 1.1; }

.grid.list .asset-category,
.grid.list .asset-wordcount,
.grid.list .asset-publisher {
    width: auto;
    text-align: left;
    overflow: visible;
    text-overflow: initial;
    justify-self: flex-start;
}

/* About */
.about-fade {
    position: fixed;
    top: 72px;
    left: 0;
    width: 100vw;
    display: flex;
    justify-content: flex-start;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s cubic-bezier(.01,.15,.21,.95);
    z-index: 2000;
}

.about-fade.active {
    opacity: 1;
    pointer-events: all;
}

.about-fade-content {
    margin-left: 24px;
    margin-top: 0;
    font-family: inherit;
    color: #000;
    background: var(--site-bg);
    padding: 2rem 0 0 0;
    max-width: 600px;
    transition: color 1s cubic-bezier(.01,.15,.21,.95);
}


.about-contact {
    font-size: inherit;
    color: #000;
    margin-top: 0; /* unified spacing: heading already has 10px bottom margin */
}

.about-contact a {
    color: var(--link-color);
    text-decoration: none;
    font-weight: bold;
}

/* Smooth color transition for asset elements */
.grid .asset,
.grid .asset * { transition: color 0.2s cubic-bezier(0,0,0.58,1); }

/* Hover: title underlined (no italic); metadata unchanged */
.grid .asset:hover { color: var(--text-color) !important; }
.grid .asset:hover .asset-title { font-style: normal; text-decoration: underline !important; }
.grid .asset:hover .asset-meta,
.grid .asset:hover .asset-meta span { text-decoration: none !important; }

/* Ensure metadata never gets underlined by other rules */
.asset-meta, .asset-meta span { text-decoration: none !important; }

.logo:hover,
.filter-btn:hover,
.view-btn:hover {
    text-decoration: underline;
    transition: text-decoration 0.2s cubic-bezier(0,0,0.58,1);
}

/* Removed .logo.about-open styling (no longer needed) */

/* Override old publishers title style: unified spacing handled later */
.about-publishers-title { font-size: inherit; margin-bottom: 10px; }

.about-publishers {
    margin-top: 0 !important; /* normalized; spacing handled by previous block's margin-bottom */
}

.about-publishers ul {
    list-style: none;
    padding: 0;
    margin: .5rem 0 0 0;
}

.about-publishers li {
    font-size: inherit;
    margin-bottom: 0.2rem;
}

/* Dropdown hidden on desktop */
.filter-dropdown-menu {
    display: none;
    position: relative;
}

/* Mobile */
@media (max-width: 600px) {
    .filter-menu {
        display: none !important;
    }
    /* Fix navbar jitter: avoid vh-based layout shifts and keep bar stable */
    .navbar { position: fixed; top: 0; left: 0; }
    /* Provide top space for content below fixed nav & potential about block */
    .page-content { margin-top: 160px !important; }
    /* About section spacing below fixed nav */
    .about-section { margin-top: 80px; }
    .grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 5rem 0; /* increased vertical asset gap */
        padding-top: 2rem;
    }
    .grid:not(.list) .asset {
        max-width: 300px !important; /* increased from 260px */
    }
    .view-btns {
        display: none !important;
    }
    .about-section { margin-left: 0 !important; max-width: 100vw !important; width: 100% !important; }
    .about-section .about-inner { padding-left: 24px !important; padding-right: 24px !important; width: 100%; box-sizing: border-box; }
    .logo:hover,
    .filter-btn:hover,
    .view-btn:hover,
    .grid .asset:hover,
    .grid .asset:hover * {
        text-decoration: none !important;
    }

    .filter-dropdown-menu {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        position: absolute;
        top: 24px;
        right: 24px;
        z-index: 3100;
        gap: 0.5rem;
    }

    .filter-toggle {
        background: none;
        border: none;
        font: inherit;
        color: var(--accent-color);
        text-transform: uppercase;
        letter-spacing: inherit;
        cursor: pointer;
        padding: 0;
    }

    .filter-options {
        display: none;
        flex-direction: column;
        gap: 0.4rem;
    background: var(--site-bg);
        padding: 0;
        margin: 0;
    transition: background-color 0.6s cubic-bezier(.01,.15,.21,.95);
    }

    .filter-options.open {
        display: flex;
    }

    .filter-option {
        background: none;
        border: none;
        font: inherit;
        color: var(--text-color);
        text-transform: uppercase;
        letter-spacing: inherit;
        cursor: pointer;
        padding: 0;
        text-align: right;
    }

    .filter-option.active {
        font-style: italic;
    }
    .about-trigger { display: none !important; }
    .footer-index-toggle { display: none !important; }
}

/* Fallback symbol */
.fallback-symbol {
    font-family: Times, 'Times New Roman', serif !important;
    font-weight: normal !important;
}

/* Loader (kept simple) */
#loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
        height: 100vh;
    background: var(--site-bg);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s cubic-bezier(.01,.15,.21,.95), visibility 0.6s;
    opacity: 1;
    visibility: visible;
}

@media (max-width: 600px) {
    #loader-overlay { height: 100dvh; }
    body.preload {
        overflow: hidden !important;
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100dvh;
        overscroll-behavior: none;
        touch-action: none;
    }
    html { overscroll-behavior: none; }
}

#loader-overlay.fade-out {
    opacity: 0;
    visibility: hidden;
}

.loader-logo {
    font-family: 'GT Alpina Extended Regular', 'GT Alpina Extended Medium', 'GT Alpina', serif !important;
    font-size: 12px !important;
    line-height: 1;
    color: var(--text-color);
    font-weight: 400 !important; /* regular weight */
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 1;
    transition: opacity 0.45s ease;
}

/* Footer */
.footer {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto;
    align-items: start;
    padding: 4rem 24px 24px 24px;
    margin-top: auto; /* push footer to bottom when content is short */
    gap: 4rem 6rem;
}
.footer-col { display:flex; flex-direction:column; gap:1.2rem; }
.footer-col-contact { max-width:420px; }
.footer-col-theme { align-items:flex-start; gap:1.2rem; }
.footer-col-image { align-items:flex-end; justify-content:flex-end; }
.footer-image { display:flex; flex-direction:column; justify-content:flex-end; }
.footer-contact a { color: var(--link-color); text-decoration: none; font-weight: bold; }
.footer-contact a:hover { text-decoration: underline; }
.footer-copy { font-weight: normal; }
.footer-theme-toggle { display: none !important; }
.theme-btn { cursor: pointer; font-weight: normal; }
.theme-btn.active { font-style: italic; }
.footer-image img { display: block; width: 84px; height: auto; object-fit: cover; cursor: pointer; }
.footer-image .footer-copy { display:none; }
.footer-copy { margin-top: 0; font-weight: normal; }
.footer-contact-heading { font-weight: normal; margin-bottom: 0.4rem; }
.footer-contact-email a { font-weight: bold; text-decoration: none; }
.footer-contact-email a:hover { text-decoration: underline; }
.footer-copy { display:none !important; }
.footer-theme-toggle { margin-left: 0; }

@media (max-width: 600px) {
    .footer { display:flex; flex-direction: column; align-items: flex-start; gap: 2rem; padding: 4rem 24px 24px 24px; }
    .footer-col-image { order:3; }
    .footer-col-theme { order:2; }
    .footer-col-contact { order:1; }
    /* Mobile: underline logo when About panel is open (logo acts as trigger) */
    .about-open .logo { text-decoration: underline !important; }
}

#loader-overlay.logo-out .loader-logo { opacity: 0; }

/* --- Nav & Footer typography override to match asset titles --- */
/* Nav & Footer: Extended uppercase, regular weight */
.navbar, .navbar *:not(.logo):not(.asset-meta):not(.asset-meta span),
.footer, .footer * {
    font-family: 'GT Alpina Extended Regular', 'GT Alpina Extended Medium', 'GT Alpina', serif !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
    font-size: 12px !important;
}

/* Footer now matches asset title style */
.footer .footer-col, .footer .footer-col *:not(a):not(img) {
    font-family: 'GT Alpina Standard Light', 'GT Alpina Standard Regular', 'GT Alpina', serif !important;
    font-weight: 300 !important;
    font-size: 18px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.footer a {
    font-family: 'GT Alpina Standard Light', 'GT Alpina Standard Regular', 'GT Alpina', serif !important;
    font-weight: 300 !important;
    font-size: 18px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Preserve intended italics on active states after override */
.filter-btn.active, .index-btn.active, .about-open .about-trigger, .theme-btn.active {
    font-style: normal;
    text-decoration: underline;
}

/* (logo styling defined earlier; duplicate override removed) */
/* About section typography adjustments */
.about-biography-title,
.about-publishers-title,
.about-contact-title {
    font-family: 'GT Alpina Extended Medium', 'GT Alpina', serif !important;
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 10px; /* heading to content gap */
}
.about-biography-title { margin-top: 0; }
.about-bio-text,
.about-publishers-list li,
.about-contact a {
    font-family: 'GT Alpina Standard Light', 'GT Alpina Standard Regular', 'GT Alpina', serif;
    font-size: 18px;
    font-weight: 300;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.3;
}
/* Section spacing: 4rem between blocks */
.about-bio-text { margin-bottom: 4rem; }
.about-publishers { margin-bottom: 4rem !important; }
.about-contact { margin-bottom: 0; }
.about-publishers-list { list-style:none; padding:0; margin:0; }
.about-publishers-list li { margin-bottom: .2rem; }

/* About panel uses global theme variables; no dedicated background overrides */