:root { --header-height: 76px; }

html { scroll-padding-top: calc(var(--header-height) + 18px); }
body { overflow-x: hidden; }

.announcement {
  min-height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 18px;
  background: #27181d;
  color: #e7c77f;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
}

.site-header {
  height: var(--header-height);
  gap: clamp(18px, 2vw, 32px);
  padding: 0 clamp(22px, 4vw, 68px);
  border-bottom-color: rgba(87,55,37,.12);
  background: rgba(255,253,250,.94);
  box-shadow: 0 8px 28px rgba(52,31,23,.055);
  backdrop-filter: blur(14px);
}

.site-header .brand img { width: clamp(178px, 11.5vw, 218px); }
.nav { gap: clamp(17px, 1.6vw, 27px); }
.nav a { position: relative; padding: 28px 0 24px; border: 0; font-size: .79rem; }
.nav a::after { content: ""; position: absolute; right: 0; bottom: 17px; left: 0; height: 1px; background: #b8832f; transform: scaleX(0); transform-origin: right; transition: transform .25s ease; }
.nav a:hover::after,.nav a.active::after { transform: scaleX(1); transform-origin: left; }

.header-actions { gap: 10px; }
.header-actions .search { width: clamp(190px, 14vw, 248px); height: 40px; border-color: #ded3c4; background: rgba(255,255,255,.72); }
.header-actions .link-button { padding: 10px 4px; font-size: .8rem; white-space: nowrap; }
.header-actions .gold-button { min-height: 40px; padding: 10px 16px; font-size: .79rem; white-space: nowrap; }

main > section[id] { scroll-margin-top: calc(var(--header-height) + 18px); }

@media (max-width: 1150px) {
  :root { --header-height: 70px; }
  .site-header { padding: 0 20px; }
  .site-header .brand img { width: 186px; }
  .menu-toggle { order: 3; width: 42px; height: 42px; margin-left: 0; color: #3b242b; cursor: pointer; }
  .header-actions { margin-left: auto; }
  .nav.open { top: var(--header-height); padding: 14px 22px 22px; background: rgba(255,253,250,.99); box-shadow: 0 18px 35px rgba(45,25,20,.12); }
  .nav.open a { padding: 13px 2px; border-bottom: 1px solid #eee5d9; font-size: .9rem; }
  .nav.open a::after { display: none; }
}

@media (max-width: 620px) {
  :root { --header-height: 64px; }
  .announcement { min-height: 28px; font-size: .58rem; letter-spacing: .1em; }
  .site-header { padding: 0 12px 0 15px; gap: 5px; }
  .site-header .brand img { width: 154px; }
  .header-actions .gold-button { min-height: 36px; padding: 8px 11px; }
  .menu-toggle { width: 38px; height: 38px; font-size: 1.25rem; }
}

@media (max-width: 400px) {
  .site-header .brand img { width: 138px; }
  .header-actions .gold-button { padding: 7px 9px; }
  .header-actions .gold-button::after { content: "B2B"; }
}