/* Shared by every page: floating header, menu overlay, page curtain. */
.pf-enter .curtain i { transform: scaleY(1); }
.curtain { position: fixed; inset: 0; z-index: 300; display: flex; pointer-events: none; }
.curtain i { flex: 1; background: #f2ede3; transform: scaleY(0); border-right: 1px solid #b9ae9c; }

.bar {
  position: fixed; z-index: 200; top: 14px; left: 14px; right: 14px; height: 60px; border-radius: 20px;
  display: flex; align-items: center; justify-content: space-between; padding: 0 14px 0 20px;
  background: rgba(18, 19, 26, .72); border: 1px solid rgba(255, 255, 255, .09);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font: 600 18px/1 'Fraunces', Georgia, serif; letter-spacing: -.01em; color: #f2ede3; }
.brand .gear { color: #d4ad6e; font-size: 22px; }

.menu-btn { display: inline-flex; align-items: center; gap: 12px; height: 42px; padding: 0 16px 0 18px; border-radius: 14px; background: #f2ede3; color: #0b0c10; font: 600 14px/1 'Inter', system-ui, sans-serif; cursor: pointer; border: 0; position: relative; z-index: 260; }
.menu-btn i { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: absolute; right: 16px; transition: transform .35s, top .35s; }
.menu-btn i:nth-of-type(1) { top: 15px; } .menu-btn i:nth-of-type(2) { top: 24px; width: 12px; }
.menu-btn { padding-right: 46px; }
.menu-btn.open i:nth-of-type(1) { top: 20px; transform: rotate(45deg); }
.menu-btn.open i:nth-of-type(2) { top: 20px; width: 18px; transform: rotate(-45deg); }
.topbar .menu-btn { margin-left: 12px; mix-blend-mode: normal; }

.menu { position: fixed; inset: 0; z-index: 250; background: #0c0d12; display: flex; align-items: center; padding: 100px clamp(20px, 6vw, 100px) 40px; clip-path: inset(0 0 100% 0 round 0 0 40px 40px); transition: clip-path .6s cubic-bezier(.7, 0, .2, 1); overflow-y: auto; }
.menu.show { clip-path: inset(0 0 0 0 round 0); }
.menu nav { width: 100%; max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; }
.menu a { display: grid; grid-template-columns: 56px 1fr auto; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); text-decoration: none; color: #f2ede3; transition: padding-left .35s, color .3s; }
.menu a:hover, .menu a.current { padding-left: 18px; color: #d4ad6e; }
.menu .mn { font: 400 12px 'JetBrains Mono', monospace; letter-spacing: .15em; color: #8c8a96; }
.menu .mt { font: 400 clamp(32px, 6vw, 76px)/1 'Fraunces', Georgia, serif; letter-spacing: -.025em; }
.menu .mk { font: italic 400 16px 'Fraunces', Georgia, serif; color: #8c8a96; text-align: right; }
.menu-open, .menu-open body { overflow: hidden; }
@media (max-width: 640px) { .menu a { grid-template-columns: 36px 1fr; } .menu .mk { display: none; } }
.menu-open .bar, .menu-open .topbar { z-index: 260; background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

.tools { display: flex; align-items: center; gap: 6px; margin-left: auto; margin-right: 10px; }
.tool { height: 42px; min-width: 42px; padding: 0 12px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .16); background: transparent; color: inherit; font: 600 13px/1 'Inter', system-ui, sans-serif; letter-spacing: .04em; display: inline-flex; align-items: center; justify-content: center; gap: 4px; cursor: pointer; transition: border-color .3s, background .3s; }
.tool:hover { border-color: #d4ad6e; }
.tool span { opacity: .5; } .tool span.on { opacity: 1; color: #d4ad6e; } .tool i { opacity: .35; font-style: normal; }
.tool .i-moon { display: none; }
html[data-theme='light'] .tool .i-sun { display: none; } html[data-theme='light'] .tool .i-moon { display: block; }
.topbar .tools { margin-left: 0; margin-right: 0; }
.topbar .tool { background: rgba(8, 9, 13, .45); }
.menu-open .tools { position: relative; z-index: 262; }
@media (max-width: 560px) { .tool { height: 40px; min-width: 40px; padding: 0 9px; } .tools { margin-right: 6px; gap: 4px; } .menu-btn { padding-left: 14px; } .brand span:last-child { font-size: 16px; } }

html[data-theme='light'] .curtain i { background: #1b1812; border-right-color: #000; }
html[data-theme='light'] .bar { background: rgba(255, 253, 248, .78); border-color: rgba(0, 0, 0, .1); }
html[data-theme='light'] .brand { color: #1b1812; } html[data-theme='light'] .brand .gear { color: #8a6420; }
html[data-theme='light'] .menu-btn { background: #1b1812; color: #f4f0e8; }
html[data-theme='light'] .menu { background: #f4f0e8; }
html[data-theme='light'] .menu a { color: #1b1812; border-bottom-color: rgba(0, 0, 0, .12); }
html[data-theme='light'] .menu a:hover, html[data-theme='light'] .menu a.current { color: #8a6420; }
html[data-theme='light'] .menu .mn, html[data-theme='light'] .menu .mk { color: #6f6a62; }
html[data-theme='light'] .tool { border-color: rgba(0, 0, 0, .16); } html[data-theme='light'] .tool span.on { color: #8a6420; }
html[data-theme='light'] .topbar .tool { background: rgba(255, 253, 248, .6); }
html[data-theme='light'] .menu-open .bar, html[data-theme='light'] .menu-open .topbar { background: transparent; }