/* Shared draft notice and navigation move together on every page. */
:root {
  --draft-notice-height: 124px;
  --draft-header-height: 150px;
  scroll-padding-top: calc(var(--draft-notice-height) + var(--draft-header-height) + 18px);
}
.draft-notice {
  box-sizing: border-box;
  position: fixed;
  z-index: 30;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 14px max(24px, var(--pad, 24px));
  border-bottom: 1px solid #bd9a51;
  background: #090909;
  color: #fff6e3;
  font-family: Arial, Helvetica, sans-serif;
}
.draft-notice .draft-notice-copy { min-width: 0; max-width: 920px; }
.draft-notice .draft-notice-title {
  margin: 0 0 7px;
  color: #fff6e3;
  font-size: clamp(18px, 1.7vw, 23px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
}
.draft-notice .draft-notice-shop {
  margin: 0;
  color: #e8dfcf;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}
.draft-notice-shop a {
  color: #f0d18c;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.draft-notice .draft-shop-circle {
  box-sizing: border-box;
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 2px solid #d3af64;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 20%, #332919 0, #11100d 55%, #050505 100%);
  box-shadow: inset 0 0 0 4px #090909, inset 0 0 0 5px #8a6a32;
  color: #f0d18c;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: 0;
  transition: border-color .2s, background .2s;
}
.draft-shop-circle svg { width: 21px; height: 21px; }
.draft-notice .draft-shop-circle:hover { border-color: #ffe2a0; background: #332919; }
.draft-notice a:focus-visible { outline: 3px solid #fff4d5; outline-offset: 5px; }
.has-draft-notice .header { top: var(--draft-notice-height); }
.draft-site-main #main { padding-top: calc(var(--draft-notice-height) + var(--draft-header-height)); }
.has-draft-notice:not(.draft-site-main) { padding-top: calc(var(--draft-notice-height) + 45px); }
/* Translate the fixed bars without changing content spacing or scroll position. */
.has-draft-notice .draft-notice,
.has-draft-notice .header {
  transition: transform .22s ease, background .25s;
}
.top-navigation-hidden .draft-notice,
.top-navigation-hidden .has-draft-notice .header {
  transform: translateY(calc(0px - var(--draft-notice-height) - var(--draft-header-height) - 1px));
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .has-draft-notice .draft-notice,
  .has-draft-notice .header { transition: none; }
}
@media (max-width: 760px) {
  :root { --draft-notice-height: 160px; --draft-header-height: 218px; }
  .draft-notice { gap: 14px; padding: 13px 16px; }
  .draft-notice .draft-notice-title { font-size: 16px; line-height: 1.4; margin-bottom: 6px; }
  .draft-notice .draft-notice-shop { font-size: 15px; line-height: 1.4; }
  .draft-notice .draft-shop-circle { flex-basis: 84px; width: 84px; height: 84px; font-size: 13px; gap: 5px; }
  .draft-shop-circle svg { width: 19px; height: 19px; }
}