@font-face { font-family:'DM Sans'; src:url('../fonts/dm-sans-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'DM Sans'; src:url('../fonts/dm-sans-800.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'Cormorant Garamond'; src:url('../fonts/cormorant-garamond-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }

:root { --font-sans:'DM Sans',system-ui,sans-serif; --font-display:'Cormorant Garamond',Georgia,serif; --font-mono:'Courier New',monospace; --bg-page:#ffffff; --bg-surface:#ffffff; --bg-hover:#f0f0f0; --border-subtle:#e8e8e8; --border-strong:#d0d0d0; --text-primary:#0a0a0a; --text-secondary:#6b7280; --text-muted:#a1a1aa; --bg-topbar:#ffffff; --radius-sm:4px; --radius-md:8px; --radius-lg:16px; --sp-xs:4px; --sp-sm:8px; --sp-md:16px; --sp-lg:24px; --sp-xl:32px; --sp-2xl:48px; }
.dark { --bg-page:#0a0a0a; --bg-surface:#000000; --bg-hover:#1a1a1a; --border-subtle:#1a1a1a; --border-strong:#2a2a2a; --text-primary:#ffffff; --text-secondary:#888888; --text-muted:#555555; --bg-topbar:#000000; }

@layer base {
html { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; font-size:16px; }
body { font-family:var(--font-sans); font-weight:400; background:var(--bg-page); color:var(--text-primary); margin:0; min-height:100vh; display:flex; flex-direction:column; transition:background 0.2s,color 0.2s; }
h1,h2,h3,h4,h5,h6 { font-family:var(--font-display); font-weight:500; letter-spacing:0.03em; line-height:1.3; margin:0; text-transform:none; }
h1 { font-size:2.25rem; line-height:1.2; letter-spacing:0.02em; }
h2 { font-size:1.75rem; }
h3 { font-size:1.375rem; }
p { font-weight:400; line-height:1.8; letter-spacing:0.015em; margin:0; color:var(--text-secondary); }
a { color:var(--text-primary); text-decoration:none; transition:color 0.15s; }
*:focus-visible { outline:2px solid var(--text-primary); outline-offset:2px; }
::selection { background:var(--text-primary); color:var(--bg-page); }
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:99px; }
}

@layer components {
/* Topbar:52px */
.topbar { height:52px; position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:0 var(--sp-xl); background:var(--bg-topbar); border-bottom:1px solid var(--border-subtle); flex-shrink:0; }
.brand { font-weight:800; font-size:0.8125rem; letter-spacing:0.12em; color:var(--text-primary); text-decoration:none; text-transform:uppercase; flex-shrink:0; }
.topbar-right { display:flex; align-items:center; margin-left:auto; }
.topbar-nav { display:flex; align-items:center; gap:var(--sp-md); }
.topbar-nav a { font-weight:400; font-size:0.8125rem; letter-spacing:0.03em; color:var(--text-secondary); padding:6px 0; transition:color 0.15s; }
.topbar-nav a:hover { color:var(--text-primary); }
.topbar-nav a.active { color:var(--text-primary); }
.topbar-buffer { width:24px; flex-shrink:0; }
.topbar-controls { display:flex; align-items:center; gap:4px; }
.icon-btn { width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-md); border:none; background:transparent; color:var(--text-primary); cursor:pointer; transition:background 0.15s; }
.icon-btn:hover { background:var(--bg-hover); }
.icon-btn i { width:15px; height:15px; }
.locale-btn { font-weight:400; font-size:0.75rem; letter-spacing:0.06em; color:var(--text-muted); padding:4px 8px; border-radius:var(--radius-md); cursor:pointer; display:flex; align-items:center; gap:4px; transition:color 0.15s,background 0.15s; }
.locale-btn:hover { color:var(--text-primary); background:var(--bg-hover); }
/* Page layout (52px topbar, 44px footer) */
.page-container { width:100%; max-width:1280px; margin:0 auto; padding:0 var(--sp-xl); }
main { flex:1; display:flex; flex-direction:column; padding:var(--sp-2xl) 0 var(--sp-xl); }
/* Splash landing */
.splash { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:calc(100vh - 52px - 44px); gap:var(--sp-lg); text-align:center; padding:var(--sp-xl); }
.splash-logo { width:260px; height:auto; display:block; }
.splash-logo img { width:100%; height:auto; display:block; }
.splash-tagline { font-weight:400; font-size:0.75rem; letter-spacing:0.12em; color:var(--text-muted); }
/* Footer:44px */
footer { border-top:1px solid var(--border-subtle); padding:0 var(--sp-xl); height:44px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.footer-nav { display:flex; align-items:center; gap:var(--sp-lg); }
.footer-link { font-weight:400; font-size:0.75rem; letter-spacing:0.06em; color:var(--text-muted); transition:color 0.15s; }
.footer-link:hover { color:var(--text-primary); }
.footer-meta { font-weight:400; font-size:0.75rem; color:var(--text-muted); }
/* Responsive */
@media (max-width:1024px) { .topbar,.page-container,footer { padding:0 var(--sp-md); } main { padding:var(--sp-xl) 0 var(--sp-md); } }
@media (max-width:640px) { .splash-logo { width:200px; } h1 { font-size:1.75rem; } }
}