/* Shared by the website and the account portal. Keep page and header geometry here. */
html { scrollbar-gutter:stable; }

.wrap {
  max-width:1248px;
  margin-inline:auto;
  padding-inline:40px;
}

.site-header {
  --header-gap:28px;
  height:100px;
  display:flex;
  align-items:center;
  gap:var(--header-gap);
  font-size:16px;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:normal;
}

.site-header .brand {
  flex-shrink:0;
}

.site-header .brand :is(img,svg) {
  display:block;
  width:200px;
  max-width:100%;
  height:auto;
  object-fit:contain;
}

.site-header .on-light, .site-header .brand .on-light { display:none; }
[data-theme=light] .site-header .on-light, [data-theme=light] .site-header .brand .on-light { display:block; }
[data-theme=light] .site-header .on-dark, [data-theme=light] .site-header .brand .on-dark { display:none; }

.site-header nav {
  display:flex;
  gap:var(--header-gap);
  margin-left:auto;
}

.site-header nav, .site-header [data-account-link] {
  font-size:14px;
  font-weight:400;
  color:var(--muted);
}

.site-header a { text-decoration:none; }
.site-header nav a:hover, .site-header [data-account-link]:hover { color:var(--accent); }
.site-header :is(a,button):focus-visible { outline:3px solid var(--accent); outline-offset:5px; }

.site-header .header-actions {
  display:flex;
  gap:var(--header-gap);
  align-items:center;
}

.site-header .theme-toggle {
  width:34px;
  height:34px;
  border:0;
  background:none;
  color:var(--muted);
  cursor:pointer;
  padding:6px;
}

.site-header .theme-toggle[hidden] { display:inline-block!important; visibility:hidden; }
.site-header .theme-toggle svg { width:22px; height:22px; vertical-align:baseline; }

.site-header .button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  min-height:40px;
  padding:8px 16px;
  border:1px solid transparent;
  border-radius:7px;
  background:var(--button);
  color:#fff;
  font-size:13px;
  font-weight:650;
  line-height:normal;
  transition:background .15s,transform .15s;
}

.site-header .button span { font-size:20px; font-weight:400; }

.site-header .button:hover {
  background:var(--button-hover);
  color:#fff;
  transform:translateY(-1px);
}

.site-header [data-account-link] {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;
  flex:0 0 56px;
  min-height:40px;
  padding:8px 4px;
  white-space:nowrap;
}

@media(min-width:1800px) {
  .wrap { max-width:1380px; }
}

@media(max-width:1000px) {
  .wrap { padding-inline:28px; }
  .site-header { --header-gap:20px; }
  .site-header .button { gap:16px; }
}

@media(min-width:761px) and (max-width:800px) {
  .site-header.wrap:has([data-account-link]) { --header-gap:12px; }
}

@media(max-width:760px) {
  .wrap { padding-inline:22px; }
  .site-header {
    --header-gap:12px;
    flex-wrap:wrap;
    height:auto;
    padding-block:18px 8px;
  }
  /* Crop the existing artwork to its symbol without another image request. */
  .site-header .brand {
    display:flex;
    align-items:center;
    width:36px;
    height:44px;
    overflow:hidden;
  }
  .site-header .brand :is(img,svg) { width:200px; max-width:none; flex-shrink:0; }
  .site-header nav {
    order:1;
    flex-basis:100%;
    justify-content:space-between;
    margin-left:0;
  }
  .site-header nav a { display:inline-flex; align-items:center; min-height:44px; }
  .site-header .header-actions { margin-left:auto; }
  .site-header .button { padding:8px 11px; gap:10px; }
}

@media(max-width:360px) {
  .site-header { --header-gap:8px; }
  .site-header:has([data-account-link]) { --header-gap:4px; }
}