/* Shared logo and navigation on every page. */

@font-face {
  font-family:Syne;
  src:url('/fonts/syne-latin.woff2') format('woff2');
  font-style:normal;
  font-weight:400 800;
  font-display:block;
}

@font-face {
  font-family:'Space Grotesk';
  src:url('/fonts/space-grotesk-latin.woff2') format('woff2');
  font-style:normal;
  font-weight:400 600;
  font-display:block;
}

@font-face {
  font-family:'DM Sans';
  src:url('/fonts/dm-sans-latin.woff2') format('woff2');
  font-style:normal;
  font-weight:400 600;
  font-display:block;
}

:root {
  --landing-accent:#d7b66c;
}

.landing-hero {
  position:relative;
  width:var(--site-width);
  margin:0 auto;
  padding:48px 0 0;
  text-align:left;
}

.landing-identity {
  min-width:0;
  max-width:none;
}

.landing-mark {
  display:inline-block;
  margin:0;
  color:#f3f1ec;
  font:500 96px/1.13 Syne,Arial,sans-serif;
  letter-spacing:-.105em;
  white-space:nowrap;
  padding-bottom:0px;
  border-bottom:1px solid #626264;
}

.landing-mark .mark-digit {
  color:var(--landing-accent);
}

.name-expansion {
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  column-gap:10px;
  row-gap:4px;
  margin-top:17px;
  color:#fafaf8;
  font:500 23px/1.35 'Space Grotesk',Arial,sans-serif;
  letter-spacing:0;
}

.name-part {
  white-space:nowrap;
}

.name-initial {
  font-weight:500;
}

.name-rest {
  text-decoration-line:underline;
  text-decoration-color:#d7b66c;
  text-decoration-thickness:1px;
  text-underline-offset:.2em;
}

.name-count {
  display:inline-block;
  margin-left:.32em;
  color:var(--landing-accent);
  font:500 12px/1 'DM Sans',Arial,sans-serif;
  letter-spacing:0;
  vertical-align:baseline;
}

.site-navigation {
  width:max-content;
  max-width:100%;
}

.landing-primary-nav {
  display:flex;
  width:max-content;
  max-width:100%;
  align-items:center;
  flex-wrap:wrap;
  gap:0 12px;
  margin-top:20px;
}

.landing-primary-nav a {
  color:#c2c3c5;
  font:400 16px/1.5 'DM Sans',Arial,sans-serif;
  letter-spacing:0;
  text-transform:none;
  white-space:nowrap;
}

.site-navigation.has-sub-nav .landing-primary-nav {
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
}

.landing-nav-separator {
  color:var(--landing-accent);
  font-size:14px;
}

.landing-primary-nav a:hover {
  color:var(--landing-accent);
}

.landing-primary-nav a:focus-visible,.site-sub-nav a:focus-visible,.landing-areas a:focus-visible {
  outline:2px solid var(--landing-accent);
  outline-offset:6px;
  border-radius:2px;
}

.landing-primary-nav a[aria-current],
.site-sub-nav a[aria-current] {
  color:var(--landing-accent);
}

.site-sub-nav {
  display:flex;
  flex-wrap:wrap;
  gap:.35rem 1.5rem;
  margin-top:12px;
}

.site-sub-nav a {
  color:var(--muted);
  font:16px/1.5 Abel,Arial,sans-serif;
  text-transform:none;
  letter-spacing:0;
}

.site-sub-nav a:hover {
  color:var(--landing-accent);
}
@media(max-width:700px) {
  .landing-hero {
    padding:32px 0 0;
  }

  .landing-identity {
    max-width:calc(100% - 54px);
  }

  .site-navigation {
    display:none;
  }

  .landing-mark {
    font-size:clamp(72px,22vw,88px);
  }

  .name-expansion {
    font-size:clamp(18px,5.5vw,23px);
    column-gap:24px;
  }
}

.site-menu-toggle {
  position:absolute;
  top:36px;
  right:0;
  z-index:40;
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  width:42px;
  height:42px;
  padding:8px;
  border:0;
  background:var(--bg);
  color:var(--fg);
  cursor:pointer;
}

.site-menu-toggle span {
  display:block;
  width:26px;
  height:2px;
  background:currentColor;
}

.site-menu-toggle:hover,.site-menu-toggle:focus-visible {
  color:var(--landing-accent);
}

.site-menu-backdrop:not([hidden]) {
  position:fixed;
  inset:0;
  z-index:50;
  background:#000a;
}

.site-menu[hidden],.site-menu-backdrop[hidden] {
  display:none;
}

.site-menu:not([hidden]) {
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  z-index:51;
  display:flex;
  flex-direction:column;
  gap:6px;
  width:min(360px,100vw);
  padding:76px 36px 36px;
  background:#1a1a1a;
  overflow-y:auto;
}

.site-menu a {
  width:max-content;
  max-width:100%;
  color:var(--fg);
  font:20px/1.5 Abel,Arial,sans-serif;
  letter-spacing:0;
  text-transform:none;
}

.site-menu a:hover,.site-menu a[aria-current] {
  color:var(--landing-accent);
}

.site-menu-group {
  display:grid;
  gap:8px;
  margin-bottom:12px;
}

.site-menu-subnav {
  display:grid;
  gap:6px;
  padding-left:16px;
  border-left:1px solid var(--line);
}

.site-menu-subnav a {
  color:var(--muted);
  font-size:16px;
}

.site-menu-close {
  position:absolute;
  top:22px;
  right:34px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--fg);
  font:36px/1 Abel,Arial,sans-serif;
  cursor:pointer;
}

.site-menu-open {
  overflow:hidden;
}

.site-menu-toggle:focus-visible,.site-menu-close:focus-visible,.site-menu a:focus-visible {
  outline:2px solid var(--landing-accent);
  outline-offset:3px;
}

@media(max-width:700px) {
  .site-menu-toggle {
    display:flex;
    top:22px;
  }

  .site-menu:not([hidden]) {
    padding-left:28px;
    padding-right:28px;
  }

  .site-menu-close {
    right:27px;
  }
}
