/* Header interaction system: navigation as letter discovery, Studio as the primary product. */
.site-header {
  --header-gold: #d6b968;
  --header-gold-bright: #f0d98e;
  --header-ink: #11120f;
  border-bottom-color: rgba(214, 185, 104, .24);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .12);
}

.site-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0 12%, rgba(232, 203, 126, .7) 34%, rgba(232, 203, 126, .12) 68%, transparent 100%);
  transform: scaleX(.72);
  opacity: .68;
}

.site-header .brand-lockup {
  position: relative;
}

.site-header .academy-symbol {
  background: linear-gradient(145deg, rgba(220, 188, 105, .1), transparent 56%);
  box-shadow: inset 0 0 24px rgba(214, 178, 82, .08), 0 0 0 0 rgba(214, 185, 104, 0);
  transition: box-shadow .45s ease, border-color .35s ease, transform .45s cubic-bezier(.2, .75, .2, 1);
}

.site-header .brand-lockup:hover .academy-symbol,
.site-header .brand-lockup:focus-visible .academy-symbol {
  border-color: var(--header-gold-bright);
  box-shadow: inset 0 0 24px rgba(214, 178, 82, .16), 0 0 30px rgba(214, 178, 82, .18);
  transform: rotate(-2deg) scale(1.035);
}

.site-header nav {
  align-self: stretch;
}

.site-header .nav-link {
  position: relative;
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 0 2px;
  overflow: hidden;
  isolation: isolate;
  color: rgba(246, 236, 211, .78);
  transition: color .3s ease;
}

.site-header .nav-link span {
  position: relative;
  z-index: 2;
  transition: transform .38s cubic-bezier(.2, .75, .2, 1), letter-spacing .38s ease;
}

.site-header .nav-link::before {
  content: attr(data-glyph);
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  color: var(--header-gold);
  font: 400 42px/1 KufiLegacy, serif;
  opacity: 0;
  filter: blur(5px);
  transform: translate(-50%, 38%) scale(.62) rotate(-7deg);
  transition: opacity .35s ease, filter .5s ease, transform .52s cubic-bezier(.2, .75, .2, 1);
}

.site-header .nav-link::after {
  content: '';
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 8px;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--header-gold-bright), transparent);
  opacity: 0;
  transform: translateX(-50%) scaleX(.12);
  transition: opacity .3s ease, transform .45s cubic-bezier(.2, .75, .2, 1);
}

.site-header .nav-link:hover,
.site-header .nav-link:focus-visible {
  color: #fff9e9;
}

.site-header .nav-link:hover span,
.site-header .nav-link:focus-visible span {
  letter-spacing: .1em;
  transform: translateY(-8px);
}

.site-header .nav-link:hover::before,
.site-header .nav-link:focus-visible::before {
  opacity: .32;
  filter: blur(0);
  transform: translate(-50%, -12%) scale(1) rotate(0);
}

.site-header .nav-link:hover::after,
.site-header .nav-link:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}

.site-header .nav-studio {
  position: relative;
  min-width: 244px;
  min-height: 64px;
  display: grid;
  grid-template-columns: 40px 1fr 24px;
  align-items: center;
  gap: 12px;
  padding: 8px 11px 8px 10px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(242, 218, 151, .72);
  color: #171713;
  background:
    linear-gradient(112deg, rgba(255, 241, 190, .94), rgba(204, 165, 72, .96) 58%, rgba(159, 117, 25, .98));
  box-shadow: inset 0 1px rgba(255, 248, 219, .7), 0 8px 28px rgba(180, 135, 30, .18);
  transition: border-color .35s ease, box-shadow .45s ease, transform .42s cubic-bezier(.2, .75, .2, 1);
}

.site-header .nav-studio::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(112deg, transparent 20%, rgba(255, 255, 240, .72) 43%, transparent 66%);
  transform: translateX(-140%);
  transition: transform .8s cubic-bezier(.2, .75, .2, 1);
}

.site-header .nav-studio::after {
  content: '';
  position: absolute;
  z-index: -2;
  inset: -16px;
  background: radial-gradient(circle at 78% 50%, rgba(239, 204, 111, .34), transparent 50%);
  opacity: 0;
  transition: opacity .4s ease;
}

.site-header .nav-studio:hover,
.site-header .nav-studio:focus-visible {
  border-color: #fff0b6;
  box-shadow: inset 0 1px rgba(255, 252, 228, .9), 0 12px 38px rgba(208, 163, 55, .3), 0 0 0 1px rgba(236, 207, 128, .16);
  transform: translateY(-2px);
}

.site-header .nav-studio:hover::before,
.site-header .nav-studio:focus-visible::before {
  transform: translateX(140%);
}

.site-header .nav-studio:hover::after,
.site-header .nav-studio:focus-visible::after {
  opacity: 1;
}

.nav-studio-icon {
  position: relative;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(36, 31, 19, .32);
  background: rgba(24, 24, 18, .09);
  transition: background .35s ease, transform .5s cubic-bezier(.2, .75, .2, 1);
}

.nav-studio-icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: square;
  stroke-linejoin: bevel;
}

.nav-studio-icon i {
  position: absolute;
  right: -3px;
  top: -3px;
  width: 6px;
  height: 6px;
  border: 1px solid #1a1913;
  background: #efd783;
  transform: rotate(45deg);
}

.nav-studio:hover .nav-studio-icon,
.nav-studio:focus-visible .nav-studio-icon {
  background: rgba(24, 24, 18, .16);
  transform: rotate(-3deg) scale(1.06);
}

.nav-studio-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
  text-align: left;
}

.nav-studio-copy small,
.nav-studio-copy em {
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.nav-studio-copy small {
  font-size: 6px;
  letter-spacing: .18em;
  opacity: .68;
}

.nav-studio-copy b {
  font: 600 13px/1.05 var(--sans);
  letter-spacing: .035em;
  white-space: nowrap;
}

.nav-studio-copy em {
  font-size: 7px;
  letter-spacing: .1em;
  opacity: .7;
}

.nav-studio-arrow {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(31, 28, 19, .28);
  font-size: 11px;
  transition: color .3s ease, background .3s ease, transform .4s cubic-bezier(.2, .75, .2, 1);
}

.nav-studio:hover .nav-studio-arrow,
.nav-studio:focus-visible .nav-studio-arrow {
  color: #f2d987;
  background: #171713;
  transform: rotate(45deg);
}

.site-header.scrolled .nav-studio {
  min-height: 54px;
}

.site-header.scrolled .nav-studio-copy em {
  display: none;
}

@media (max-width: 1180px) and (min-width: 961px) {
  .site-header nav { gap: 13px; }
  .site-header .nav-link { font-size: 10px; }
  .site-header .nav-studio { min-width: 206px; grid-template-columns: 36px 1fr 20px; gap: 9px; }
  .nav-studio-icon { width: 36px; height: 36px; }
  .nav-studio-copy em { display: none; }
}

@media (max-width: 960px) {
  .site-header nav { align-self: auto; }
  .site-header .nav-link { min-height: 52px; display: flex; justify-content: space-between; padding: 14px 16px; color: var(--ink); overflow: hidden; }
  .site-header .nav-link::before { left: auto; right: 18px; top: 50%; color: #947020; transform: translateY(-50%) scale(.85); opacity: .16; filter: none; }
  .site-header .nav-link::after { left: 16px; right: 16px; bottom: 0; width: auto; transform: none; opacity: .25; background: var(--line); }
  .site-header .nav-link:hover span,
  .site-header .nav-link:focus-visible span { transform: none; }
  .site-header .nav-studio { min-width: 0; width: 100%; min-height: 70px; margin-top: 8px; }
  .site-header.scrolled .nav-studio { min-height: 70px; }
  .site-header.scrolled .nav-studio-copy em { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .nav-link::before,
  .site-header .nav-link::after,
  .site-header .nav-link span,
  .site-header .nav-studio,
  .site-header .nav-studio::before,
  .nav-studio-icon,
  .nav-studio-arrow { transition: none; }
  .site-header .nav-studio::before { display: none; }
}