html { font-size: calc(100vw / 144); scrollbar-gutter: stable; }
@font-face { font-family: 'Ufficio'; src: url('../fonts/UfficioDisplay-500.woff2') format('woff2'); }
body { margin: 0; font-family: 'Ufficio', sans-serif; background: white; overflow-x: hidden; }

#passcode-overlay { position: fixed; inset: 0; background: white; z-index: 100000; display: flex; align-items: center; justify-content: center; transition: opacity 0.5s ease; }
#passcode-input { border: 1px solid #eaeaea; border-radius: 0; padding: 1rem; text-align: center; outline: none; font-family: 'Ufficio', sans-serif; width: 10rem; box-shadow: inset 0 0.2rem 0.5rem rgba(0,0,0,0.02); }

body.focus-state, body.active-state { overflow: hidden; height: 100vh; height: 100svh; }
body.grid-mode { overflow-y: auto; height: auto; min-height: 100vh; min-height: 100svh; }
body.focus-state #main-header, body.focus-state #main-footer, body.focus-state #archive-stage { filter: blur(2rem); opacity: 0.2; pointer-events: none; }
body.spread-open .left-col, body.spread-open .right-col, body.spread-open .plus-archive { opacity: 0; pointer-events: none; transition: 0.3s; }
body.spread-open .marquee-wrapper, body.history-open .marquee-wrapper { display: none !important; }
body.history-open #filter-bar, body.spread-open #filter-bar { opacity: 0; pointer-events: none; transition: 0.3s; }
body.audio-library-open #filter-bar { opacity: 1 !important; pointer-events: auto !important; }
body.spread-open .archive-title, body.spread-open .title-anchor, body.spread-open .highlight-link { background: transparent !important; backdrop-filter: none !important; box-shadow: none !important; }
/* Removed z-index reduction so header stays visible above search overlay */
body.magazine-open #main-header { opacity: 0; pointer-events: none; transition: 0.3s; }

/* Hide project filter bar when magazine is open (JS sets opacity; CSS ensures transition) */
body.magazine-open #main-footer { opacity: 0; pointer-events: none; }

.highlight-link { background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(0.8rem); padding: 0.4rem 0.8rem; text-decoration: none; color: black; display: inline-block; cursor: pointer; transition: 0.2s; text-transform: lowercase; position: relative; font-weight: normal; white-space: nowrap; border-radius: 0.2rem; }
.highlight-link::before { content: '[ '; opacity: 0; transition: 0.2s; position: absolute; left: -0.5rem; }
.highlight-link::after { content: ' ]'; opacity: 0; transition: 0.2s; position: absolute; right: -0.5rem; }
.highlight-link:hover::before, .highlight-link:hover::after, .highlight-link.active-tag::before, .highlight-link.active-tag::after { opacity: 1; }

/* Use Helvetica Neue for long reading text */
p, .note-text-content, .history-partition-text {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}