/* ============================================================
EDITORIAL REDESIGN — editorial.css
Framer-inspired: cream card, massive type, floating glyphs
Fonts are loaded via in each HTML (not @import,
which is render-blocking and would duplicate the request).
============================================================ */
/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { display: block; max-width: 100%; }
a { text-decoration: none; }
body { -webkit-tap-highlight-color: transparent; }
/* Design tokens (--black/--red/--cream/--ink/--muted/--border/--soft)
live in css/base.css, loaded before this file in every page . */
/* ── Body / outer frame ──────────────────────────────────── */
html, body { min-height: 100vh; }
html {
/* Reserve scrollbar gutter on BOTH sides so the centered sheet
stays truly centered with or without a scrollbar. Fixes
Center Bias rule — visual center must equal viewport center. */
scrollbar-gutter: stable both-edges;
/* Smooth anchor-link scrolling instead of instant snap */
scroll-behavior: smooth;
/* Offset for the sticky nav so anchors don't hide behind it */
scroll-padding-top: 80px;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
body {
font-family: 'Inter', sans-serif;
color: var(--ink);
padding: clamp(10px, 1.5vw, 20px);
background:
radial-gradient(ellipse 55% 50% at 92% 6%, rgba(192,22,12,0.92) 0%, transparent 68%),
var(--black);
}
/* ── Card ────────────────────────────────────────────────── */
.sheet {
max-width: 100%;
margin: 0 auto;
background: var(--cream);
min-height: calc(100vh - clamp(20px, 3vw, 40px));
display: flex;
flex-direction: column;
position: relative;
/* Was overflow:hidden — that broke position:sticky on .nav.
Each child that needs clipping (.hero, .marquee-wrap) handles
it locally, so the page wrapper stays scroll-friendly. */
overflow: visible;
}
/* Local clipping where decorations could spill out */
.hero { overflow: hidden; }
/* ── NAV ─────────────────────────────────────────────────── */
.nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 32px;
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
z-index: 200;
background: var(--cream);
transition: background 0.3s, backdrop-filter 0.3s, border-color 0.3s;
}
.nav--scrolled {
/* Cream tint at low opacity + heavy blur — the bar becomes a
translucent frosted strip that lets the page show through
while remaining fully interactive (pointer-events stay on). */
background: rgba(245, 241, 235, 0.45);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
border-bottom-color: rgba(0,0,0,0.06);
}
/* Keep nav layout fixed regardless of page language */
html[dir="rtl"] .nav { direction: ltr; }
html[dir="rtl"] .nav-links a { direction: rtl; }
.nav-logo {
font-family: 'Caveat', cursive;
font-size: 1.5rem;
font-weight: 700;
color: var(--ink);
}
.nav-links {
display: flex;
gap: 28px;
/* True horizontal centering inside the bar, independent of how wide the
logo (left) or the account/lang buttons (right) are. */
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.nav-links a {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--muted);
transition: color 0.2s;
}
.nav-links a:hover,
.nav-links a.active { color: var(--ink); }
.nav-side {
display: flex;
align-items: center;
gap: 14px;
}
.lang-toggle {
background: none;
border: 1.5px solid var(--border);
border-radius: 999px;
width: 34px; height: 34px;
padding: 0;
/* inline-flex so BOTH the