/* DEPTHREX shared chrome: header, menu, language, footer. Same file on every page.
   The header/footer markup is kept in the site source and copied onto every page by a script. */
:root{
  --bg:#0B1215;--fg:#F2F4F5;--muted:#9FB2C0;--line:#23333A;--soft:#0F1A1F;--accent:#D4A843;--on-accent:#0B1215;
  --dx-h:64px;--dx-ease:cubic-bezier(0.23,1,0.32,1);
  /* layers: header 30 · language popover 40 · menu 50 */
}
@media (min-width:1024px){:root{--dx-h:76px}}
html{scroll-padding-top:calc(var(--dx-h) + 8px)}
html:has(.dx-menu[open]){overflow:hidden}

/* ---------- header ---------- */
.dx-top{position:sticky;top:0;z-index:30;height:calc(var(--dx-h) + env(safe-area-inset-top,0px));
  padding:env(safe-area-inset-top,0px) 16px 0;display:flex;align-items:center;gap:32px;
  background:var(--bg);border-bottom:0.5px solid var(--line);
  transition:background-color .3s ease,border-color .3s ease}
.dx-top.over{background:transparent;border-color:transparent}
@media (min-width:1024px){.dx-top{padding-inline:32px}}

.dx-mark{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--fg);flex:0 0 auto}
.dx-mark img{display:block;height:40px;width:auto}
.dx-mark span{font:400 28px/1 "Bebas Neue",Impact,sans-serif;letter-spacing:.07em;padding-top:2px}
@media (min-width:1024px){.dx-mark img{height:48px}.dx-mark span{font-size:32px}}

.dx-nav{display:none;gap:28px}
.dx-nav a,.dx-me{position:relative;font:500 14px/1 "Inter","Noto Sans SC",system-ui,sans-serif;color:var(--muted);text-decoration:none;padding:12px 0;transition:color .2s ease}
.dx-nav a[aria-current="page"],.dx-me[aria-current="page"]{color:var(--fg)}
.dx-nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:var(--accent)}
@media (hover:hover) and (pointer:fine){.dx-nav a:hover,.dx-me:hover{color:var(--fg)}}

.dx-end{margin-left:auto;display:flex;align-items:center;gap:20px}
.dx-langbtn{display:none;align-items:center;gap:6px;height:40px;padding:0 4px;border:0;background:transparent;color:var(--muted);
  font:500 13px/1 "Inter","Noto Sans SC",system-ui,sans-serif;cursor:pointer;transition:color .2s ease}
.dx-langbtn::after{content:"";width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg)}
@media (hover:hover) and (pointer:fine){.dx-langbtn:hover{color:var(--fg)}}
.dx-me{display:none}
.dx-cta{display:none;align-items:center;height:40px;padding:0 20px;border-radius:999px;background:var(--accent);color:var(--on-accent);
  font:600 14px/1 "Inter","Noto Sans SC",system-ui,sans-serif;text-decoration:none;white-space:nowrap;transition:transform .16s ease-out}
.dx-cta:active,.dx-mcta:active{transform:scale(.97)}
@media (min-width:640px){.dx-cta{display:inline-flex}}
@media (min-width:1024px){.dx-nav,.dx-me{display:flex}.dx-langbtn{display:inline-flex}.dx-burger{display:none!important}}

.dx-burger{width:44px;height:44px;margin-right:-10px;border:0;background:transparent;cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px}
.dx-burger span{display:block;width:22px;height:1.5px;background:var(--fg)}
.dx-burger span:last-child{width:14px;margin-left:8px}

.dx-top a:focus-visible,.dx-top button:focus-visible,.dx-menu a:focus-visible,.dx-menu button:focus-visible,
.dx-foot a:focus-visible,.dx-foot button:focus-visible,.dx-langpop button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- language popover (desktop) ---------- */
.lang.dx-langpop{position:fixed;inset:auto;margin:0;padding:6px;border:0.5px solid var(--line);border-radius:6px;background:var(--bg);
  display:none;flex-direction:column;gap:0;min-width:200px;opacity:0;transform:translateY(-4px);
  transition:opacity .16s var(--dx-ease),transform .16s var(--dx-ease),overlay .16s allow-discrete,display .16s allow-discrete}
.lang.dx-langpop:popover-open{display:flex;opacity:1;transform:none}
@starting-style{.lang.dx-langpop:popover-open{opacity:0;transform:translateY(-4px)}}
.lang.dx-langpop button{display:flex;justify-content:space-between;align-items:center;text-align:left;width:100%;min-height:40px;padding:0 12px;border:0;border-radius:4px;
  background:transparent;color:var(--muted);font:500 14px/1 "Inter","Noto Sans SC",system-ui,sans-serif;cursor:pointer}
.lang.dx-langpop button[aria-pressed="true"]{background:transparent;color:var(--fg)}
.lang.dx-langpop button[aria-pressed="true"]::after{content:"";width:6px;height:6px;border-radius:999px;background:var(--accent)}
@media (hover:hover) and (pointer:fine){.lang.dx-langpop button:hover{background:var(--soft);color:var(--fg)}}

/* ---------- menu sheet (phones and tablets) ---------- */
.dx-menu{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;border:0;padding:0;
  background:var(--bg);color:var(--fg);display:none;flex-direction:column;
  opacity:0;transition:opacity .2s ease,overlay .2s allow-discrete,display .2s allow-discrete}
.dx-menu[open]{display:flex;opacity:1}
@starting-style{.dx-menu[open]{opacity:0}}
.dx-menu::backdrop{background:var(--bg)}
.dx-mtop{height:calc(var(--dx-h) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) 16px 0;display:flex;align-items:center;justify-content:space-between;border-bottom:0.5px solid var(--line);flex:0 0 auto}
.dx-x{position:relative;width:44px;height:44px;margin-right:-10px;border:0;background:transparent;cursor:pointer}
.dx-x::before,.dx-x::after{content:"";position:absolute;left:11px;top:21px;width:22px;height:1.5px;background:var(--fg);transform:rotate(45deg)}
.dx-x::after{transform:rotate(-45deg)}
.dx-mbody{flex:1 1 auto;overflow-y:auto;padding:24px 16px calc(24px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:32px}
.dx-mlinks{display:flex;flex-direction:column}
.dx-mlinks a{display:flex;align-items:center;justify-content:space-between;min-height:60px;border-bottom:0.5px solid var(--line);
  font:500 clamp(1.75rem,8vw,2.25rem)/1.1 "Playfair Display",Georgia,"Noto Serif SC",serif;color:var(--fg);text-decoration:none}
.dx-mlinks a[aria-current="page"]{color:var(--accent)}
.dx-menu[open] .dx-mlinks a,.dx-menu[open] .dx-mrest{animation:dx-rise .42s var(--dx-ease) both;animation-delay:calc(var(--i,0) * 40ms + 40ms)}
@keyframes dx-rise{from{opacity:0;transform:translateY(10px)}}
.dx-mrest{display:flex;flex-direction:column;gap:24px}
.dx-msub{display:flex;gap:24px}
.dx-msub a{font:500 15px/1 "Inter","Noto Sans SC",system-ui,sans-serif;color:var(--muted);text-decoration:none;padding:8px 0}
.dx-mcta{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:999px;background:var(--accent);color:var(--on-accent);
  font:600 16px/1 "Inter","Noto Sans SC",system-ui,sans-serif;text-decoration:none;transition:transform .16s ease-out}

/* language row: menu and footer */
.lang.dx-lrow{display:flex;gap:0;border:0;padding:0;border-radius:0}
.lang.dx-lrow button{min-height:44px;padding:0 16px 0 0;border:0;border-radius:0;background:transparent;color:var(--muted);
  font:500 14px/1 "Inter","Noto Sans SC",system-ui,sans-serif;cursor:pointer}
.lang.dx-lrow button+button{padding-left:16px;border-left:0.5px solid var(--line)}
.lang.dx-lrow button[aria-pressed="true"]{background:transparent;color:var(--fg)}

/* ---------- footer ---------- */
.dx-foot{border-top:0.5px solid var(--line);margin-top:96px;padding:48px 16px calc(32px + env(safe-area-inset-bottom,0px));color:var(--muted);
  font:400 14px/1.5 "Inter","Noto Sans SC",system-ui,sans-serif}
.dx-fin{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.dx-fmark{display:flex;align-items:center;gap:16px;text-decoration:none;color:var(--fg);align-self:start}
.dx-fmark img{height:72px;width:auto;display:block}
.dx-fmark span{display:flex;flex-direction:column;gap:6px;font:400 40px/1 "Bebas Neue",Impact,sans-serif;letter-spacing:.07em}
.dx-fmark small{font:500 11px/1 "Inter","Noto Sans SC",system-ui,sans-serif;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
.dx-fcols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 16px}
.dx-fcols div{display:flex;flex-direction:column;gap:2px;min-width:0}
.dx-fh{margin:0 0 8px;font:500 12px/1 "Inter","Noto Sans SC",system-ui,sans-serif;color:var(--fg)}
.dx-fcols a{color:var(--muted);text-decoration:none;padding:6px 0;transition:color .2s ease}
@media (hover:hover) and (pointer:fine){.dx-fcols a:hover{color:var(--fg)}}
.dx-fbot{max-width:1120px;margin:40px auto 0;padding-top:16px;border-top:0.5px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px;font-size:13px}
.dx-fbot p{margin:0}
@media (min-width:760px){.dx-fin{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}.dx-fcols{grid-template-columns:repeat(3,minmax(0,1fr))}.dx-foot{padding-inline:32px}}

@media (prefers-reduced-motion:reduce){
  .dx-top,.dx-menu,.lang.dx-langpop{transition:none}
  .dx-menu[open] .dx-mlinks a,.dx-menu[open] .dx-mrest{animation:none}
}