:root {
  color-scheme: light dark;
  --site-bg: light-dark(#edf1ec,#172326);
  --site-surface: light-dark(#fbfcf8,#202d30);
  --site-ink: light-dark(#172c30,#eef3ec);
  --site-muted: light-dark(#607578,#a9babb);
  --site-line: light-dark(#d5dfda,#3b4a4c);
  --site-accent: light-dark(#17665f,#72c4b6);
  --site-shadow: 0 18px 44px rgba(10,30,31,.18);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--site-bg); color:var(--site-ink); font-family:Arial,sans-serif; }
.site-header { position:relative; z-index:5; background:var(--site-bg); border-bottom:1px solid var(--site-line); }
.site-header-inner { max-width:1184px; min-height:64px; margin:auto; padding:0 32px; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.site-brand { color:var(--site-ink); font-size:12px; font-weight:800; letter-spacing:.12em; text-decoration:none; text-transform:uppercase; white-space:nowrap; }
.site-brand b { margin-right:8px; color:var(--site-accent); font:500 21px Georgia,serif; }
.site-menu { position:relative; }
.site-menu summary { cursor:pointer; list-style:none; color:var(--site-muted); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:12px 0 12px 16px; }
.site-menu summary::-webkit-details-marker { display:none; }
.site-menu summary::after { content:"⌄"; color:var(--site-accent); font-size:15px; margin-left:9px; }
.site-menu[open] summary::after { content:"⌃"; }
.site-menu nav { position:absolute; top:calc(100% + 2px); right:0; width:min(320px,calc(100vw - 36px)); padding:8px; border:1px solid var(--site-line); background:var(--site-surface); box-shadow:var(--site-shadow); }
.site-menu nav a { display:block; padding:11px 12px; border-bottom:1px solid var(--site-line); color:var(--site-ink); font-size:13px; text-decoration:none; }
.site-menu nav a:last-child { border-bottom:0; }
.site-menu nav a:hover,.site-menu nav a:focus-visible { background:var(--site-bg); color:var(--site-accent); }
.site-content { min-height:calc(100vh - 65px); }
.site-content a:focus-visible,.site-menu summary:focus-visible { outline:2px solid var(--site-accent); outline-offset:3px; }
.site-back { max-width:1500px; margin:0 auto; padding:0 34px 25px; }
.site-back a { color:var(--site-accent); font-size:11px; text-underline-offset:3px; }
@media(max-width:680px) {
  .site-header-inner { min-height:58px; padding:0 18px; }
  .site-brand { font-size:10px; letter-spacing:.08em; }
  .site-menu summary { font-size:10px; }
  .site-back { padding:0 18px 22px; }
}
