@charset "UTF-8";
body { padding-top: var(--nav-h); }
html { scroll-padding-top: calc(var(--nav-h) + 8px); }
.topbar {
position: fixed; inset: 0 0 auto 0; z-index: 60;
background: color-mix(in srgb, var(--bg) 88%, transparent);
border-bottom: 1px solid var(--line); backdrop-filter: blur(10px);
transition: transform .3s ease;
}
.topbar.is-hidden { transform: translateY(-100%); }
.topbar-in {
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px;
height: var(--nav-h);
}
.topbar-brand { justify-self: start; display: inline-flex; align-items: center; gap: 10px; line-height: 1; }
.topbar-brand .brand-word {
font-family: var(--font-wordmark); font-weight: 700; font-size: var(--step-0);
letter-spacing: .14em; line-height: 1; color: var(--wm);
}
.topbar-brand:hover .brand-word { color: var(--accent-ink); }
.torch.xs { width: 12px; height: 26px; animation: torch-flicker 4.2s ease-in-out infinite; }
.topnav { justify-self: center; display: flex; align-items: center; gap: 2px; }
.nav-link {
padding: 8px 11px; font-family: var(--font-body); font-weight: 600;
font-size: .8125rem; letter-spacing: .11em; text-transform: uppercase;
color: var(--fg); border-bottom: 2px solid transparent; white-space: nowrap;
transition: color .15s, border-color .15s;
}
.nav-link:hover { color: var(--accent-ink); }
.nav-link.is-active { color: var(--accent-ink); border-bottom-color: var(--ember); }
.nav-right { justify-self: end; display: flex; align-items: center; gap: 14px; }
.nav-tools { display: flex; align-items: center; gap: 14px; }
.nav-cta {
display: inline-flex; align-items: center; min-height: 40px;
padding: 9px 18px; font-family: var(--font-body); font-weight: 700;
font-size: var(--step--1); letter-spacing: .06em; text-transform: uppercase;
color: #fff; background: var(--ember); border: 1px solid var(--ember);
border-radius: var(--radius); white-space: nowrap;
transition: background .15s, border-color .15s, box-shadow .15s;
}
.nav-cta:hover { color: #fff; background: var(--ember-deep); border-color: var(--ember-deep); box-shadow: 0 0 24px rgba(210,85,42,.40); }
.toggle {
cursor: pointer;
font-family: var(--font-body); font-weight: 600; font-size: var(--step--1); line-height: 1;
letter-spacing: .14em; text-transform: uppercase; color: var(--fg);
background: transparent; border: 1px solid var(--line); border-radius: var(--radius);
padding: 10px 13px; min-height: 40px;
display: inline-flex; gap: 8px; align-items: center;
transition: border-color .15s, color .15s;
}
.toggle:hover { border-color: var(--ember); color: var(--accent-ink); }
.toggle .flame {
width: 8px; height: 8px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
background: var(--ember); box-shadow: 0 0 8px var(--ember);
}
.lang-switch { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; }
.lang-switch.lang-stack { flex-direction: column; gap: 4px; }
.lang-opt {
display: inline-flex; padding: 1px; border-radius: 1px;
opacity: .4; transition: opacity .15s, box-shadow .15s;
}
.lang-opt:hover { opacity: .8; }
.lang-opt.is-active { opacity: 1; }
.lang-opt.is-active .flag { box-shadow: 0 0 0 1px var(--ember); }
.flag { display: block; width: 21px; height: 14px; }
@media (pointer: coarse) {
.lang-opt { min-width: 44px; min-height: 44px; justify-content: center; align-items: center; }
}
.nav-burger {
display: none; cursor: pointer;
width: 44px; height: 44px; padding: 0;
align-items: center; justify-content: center;
background: transparent; border: 1px solid var(--line); border-radius: var(--radius);
transition: border-color .15s;
}
.nav-burger:hover { border-color: var(--ember); }
.burger-bars { position: relative; display: block; }
.burger-bars, .burger-bars::before, .burger-bars::after {
width: 20px; height: 2px; background: var(--fg);
}
.burger-bars::before, .burger-bars::after { content: ""; position: absolute; left: 0; }
.burger-bars::before { top: -6px; }
.burger-bars::after  { top: 6px; }
.sheet {
margin: 0; inset: 0; width: auto; height: auto; max-width: none; max-height: none;
padding: 0; color: var(--fg); background: var(--bg); border: 0; border-radius: 0;
}
.sheet::backdrop { background: var(--bg); }
.sheet-in {
display: flex; flex-direction: column; min-height: 100%;
padding: 0 var(--pad-x) calc(28px + env(safe-area-inset-bottom, 0px));
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); }
.sheet-brand { display: inline-flex; align-items: center; gap: 10px; line-height: 1; }
.sheet-brand .brand-word {
font-family: var(--font-wordmark); font-weight: 700; font-size: var(--step-0);
letter-spacing: .14em; line-height: 1; color: var(--wm);
}
.sheet-close {
background: transparent; border: 1px solid var(--line); border-radius: var(--radius);
color: var(--fg); cursor: pointer; padding: 9px 13px; min-height: 44px;
font-size: var(--step--1); letter-spacing: .04em;
}
.sheet-close:hover { border-color: var(--ember); color: var(--accent-ink); }
.sheet-nav { display: flex; flex-direction: column; margin-top: 8px; }
.sheet-link {
padding: 18px 2px; min-height: 56px; display: flex; align-items: center;
font-family: var(--font-display); font-size: var(--step-1); color: var(--fg);
border-bottom: 1px solid var(--hair);
}
.sheet-link:hover, .sheet-link.is-active { color: var(--accent-ink); }
.sheet-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: auto; padding-top: 28px; }
.sheet-tools .nav-cta { flex: 1 1 auto; justify-content: center; }
@media (max-width: 1023px) {
.topnav, .nav-tools { display: none; }
.nav-burger { display: inline-flex; }
.topbar-in { display: flex; justify-content: space-between; }
.topbar-brand .brand-word { font-size: .9375rem; letter-spacing: .12em; }
.torch.xs { width: 11px; height: 24px; }
}
@media (min-width: 1024px) {
.sheet { display: none; }                
}