/* Page header artwork and shared frame-width adjustments. */
/* Section header imagery */
.page-header .page-header-inner.container {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--vk-color-primary);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.page-header .page-header-inner.container::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 32, 56, 0.4);
  z-index: 0;
}

.page-header .page-header-title,
.page-header .page-header-sub-title,
.page-header .page-header-inner.container > * {
  position: relative;
  z-index: 1;
}

.page-header .page-header-title,
.page-header .page-header-sub-title {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.page-id-22 .page-header .page-header-inner.container,
.parent-pageid-22 .page-header .page-header-inner.container {
  background-image: url("../../../images/top/main_image.png");
  background-position: center 38%;
}

.page-id-31 .page-header .page-header-inner.container,
.single-club .page-header .page-header-inner.container {
  background-image: url("../../../../uploads/2019/11/19000603.451f49f9ace2a5479964efa14b552ff3.19112307.jpg");
  background-position: center 42%;
}

.page-id-20 .page-header .page-header-inner.container,
.parent-pageid-20 .page-header .page-header-inner.container {
  background-image: url("../../../../uploads/2018/05/apple-touch-icon.png");
  background-position: 76% 44%;
  background-size: auto 180%;
}

.page-id-29 .page-header .page-header-inner.container,
.parent-pageid-29 .page-header .page-header-inner.container,
.page-id-130 .page-header .page-header-inner.container,
.page-id-136 .page-header .page-header-inner.container {
  background-image: url("../../../images/yabane/platehouse.png");
  background-position: center 46%;
  background-size: cover;
}

@media (max-width: 767px) {
  .page-id-20 .page-header .page-header-inner.container,
  .parent-pageid-20 .page-header .page-header-inner.container {
    background-position: 72% 42%;
    background-size: auto 150%;
  }
}

/* Section header imagery override */
.page-header {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--vk-color-primary);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 32, 56, 0.32);
  z-index: 0;
}

.page-header .page-header-inner.container {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

.page-id-22 .page-header,
.parent-pageid-22 .page-header {
  background-image:
    radial-gradient(circle at 16% 50%, rgba(255, 255, 255, 0.13) 0 5px, transparent 5px),
    radial-gradient(circle at 84% 50%, rgba(255, 255, 255, 0.13) 0 5px, transparent 5px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.09) 0 1px, transparent 1px 120px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0)),
    linear-gradient(180deg, #3598d8 0%, #2b79b2 100%);
  background-size: auto, auto, auto, auto, 100% 100%;
}

.page-id-31 .page-header,
.single-club .page-header {
  background-image:
    radial-gradient(circle at 14% 50%, rgba(255, 255, 255, 0.12) 0 34px, transparent 34px),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08) 0 22px, transparent 22px),
    radial-gradient(circle at 86% 50%, rgba(255, 255, 255, 0.12) 0 34px, transparent 34px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 190px),
    linear-gradient(180deg, #3598d8 0%, #2b79b2 100%);
}

.page-id-20 .page-header,
.parent-pageid-20 .page-header {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)),
    url("../../../../uploads/2018/05/apple-touch-icon.png"),
    linear-gradient(180deg, #3598d8 0%, #2b79b2 100%);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center, center, center;
  background-size: 100% 100%, auto 155%, 100% 100%;
}

.page-id-29 .page-header,
.parent-pageid-29 .page-header {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)),
    url("../../../../uploads/2018/05/plate.png"),
    linear-gradient(180deg, #3598d8 0%, #2b79b2 100%);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center, center, center;
  background-size: 100% 100%, auto 150%, 100% 100%;
}

@media (max-width: 767px) {
  .page-id-20 .page-header,
  .parent-pageid-20 .page-header,
  .page-id-29 .page-header,
  .parent-pageid-29 .page-header {
    background-size: 100% 100%, auto 110%, 100% 100%;
  }
}

/* 30years header artwork override */
.page-id-22 .page-header,
.parent-pageid-22 .page-header {
  background-image: url("../../../images/headers/history-30years-theme.png") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.page-id-22 .page-header::before,
.parent-pageid-22 .page-header::before {
  background: rgba(8, 32, 56, 0.26) !important;
}

/* Remove legacy inner header stripe */
.page-header .page-header-inner.container::before {
  display: none !important;
}

/* Section header artwork overrides */
.page-id-31 .page-header,
.single-club .page-header {
  background-image: url("../../../images/headers/club-theme.png") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.page-id-31 .page-header::before,
.single-club .page-header::before {
  background: rgba(8, 32, 56, 0.30) !important;
}

.page-id-20 .page-header,
.parent-pageid-20 .page-header {
  background-image: url("../../../images/headers/moroyama-theme.png") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.page-id-20 .page-header::before,
.parent-pageid-20 .page-header::before {
  background: rgba(8, 32, 56, 0.28) !important;
}

.page-id-29 .page-header,
.parent-pageid-29 .page-header {
  background-image: url("../../../images/headers/volunteer-theme.png") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.page-id-29 .page-header::before,
.parent-pageid-29 .page-header::before {
  background: rgba(8, 32, 56, 0.24) !important;
}

.page-id-130 .page-header {
  background-image: url("../../../images/headers/inquiry-theme.png") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.page-id-130 .page-header::before {
  background: rgba(8, 32, 56, 0.24) !important;
}

.page-id-136 .page-header {
  background-image: url("../../../images/headers/news-theme.png") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.page-id-136 .page-header::before {
  background: rgba(8, 32, 56, 0.28) !important;
}

/* Match section header height to artwork aspect ratio */
.page-id-22 .page-header,
.parent-pageid-22 .page-header,
.page-id-31 .page-header,
.single-club .page-header,
.page-id-20 .page-header,
.parent-pageid-20 .page-header,
.page-id-29 .page-header,
.parent-pageid-29 .page-header,
.page-id-130 .page-header,
.page-id-136 .page-header {
  aspect-ratio: 3 / 1;
  min-height: 0 !important;
}

.page-id-22 .page-header .page-header-inner.container,
.parent-pageid-22 .page-header .page-header-inner.container,
.page-id-31 .page-header .page-header-inner.container,
.single-club .page-header .page-header-inner.container,
.page-id-20 .page-header .page-header-inner.container,
.parent-pageid-20 .page-header .page-header-inner.container,
.page-id-29 .page-header .page-header-inner.container,
.parent-pageid-29 .page-header .page-header-inner.container,
.page-id-130 .page-header .page-header-inner.container,
.page-id-136 .page-header .page-header-inner.container {
  min-height: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  box-sizing: border-box;
}

.page-id-22 .page-header .page-header-title,
.parent-pageid-22 .page-header .page-header-title,
.page-id-31 .page-header .page-header-title,
.single-club .page-header .page-header-title,
.page-id-20 .page-header .page-header-title,
.parent-pageid-20 .page-header .page-header-title,
.page-id-29 .page-header .page-header-title,
.parent-pageid-29 .page-header .page-header-title,
.page-id-130 .page-header .page-header-title,
.page-id-136 .page-header .page-header-title {
  margin: 0;
}

@media (max-width: 767px) {
  .page-id-22 .page-header,
  .parent-pageid-22 .page-header,
  .page-id-31 .page-header,
  .single-club .page-header,
  .page-id-20 .page-header,
  .parent-pageid-20 .page-header,
  .page-id-29 .page-header,
  .parent-pageid-29 .page-header,
  .page-id-130 .page-header,
  .page-id-136 .page-header {
    aspect-ratio: 16 / 7;
  }
}

/* Final notebook frame alignment */
:root {
  --yabane-note-width: 1280px;
  --yabane-content-width: min(1110px, calc(100vw - 120px));
}

body {
  background-position: center top !important;
  background-repeat: repeat-y !important;
  background-size: var(--yabane-note-width) auto !important;
}

body::after {
  display: none !important;
}

#site-header-container.site-header-container.container,
.global-nav,
.page-header {
  width: var(--yabane-content-width) !important;
  max-width: var(--yabane-content-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#site-header-container .global-nav {
  flex: 0 0 var(--yabane-content-width) !important;
}

/* Responsive notebook frame and synchronized band widths */
:root {
  --yabane-note-width: 100vw;
  --yabane-band-width: calc(100vw - 100px);
}

body {
  background-position: center top !important;
  background-repeat: repeat-y !important;
  background-size: 100vw auto !important;
}

#site-header-container.site-header-container.container,
.global-nav,
.page-header {
  width: var(--yabane-band-width) !important;
  max-width: var(--yabane-band-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#site-header-container .global-nav {
  flex: 0 0 var(--yabane-band-width) !important;
}

.page-header {
  width: var(--yabane-band-width) !important;
  max-width: var(--yabane-band-width) !important;
}

@media (max-width: 767px) {
  :root {
    --yabane-band-width: calc(100vw - 60px);
  }

  body {
    background-size: 100vw auto !important;
  }
}

/* Sync top hero, global nav, and section band widths */
:root {
  --yabane-band-width: min(930px, calc(100vw - 120px));
}

.global-nav,
.page-header,
.home .yabane-hero {
  width: var(--yabane-band-width) !important;
  max-width: var(--yabane-band-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#site-header-container .global-nav {
  flex: 0 0 var(--yabane-band-width) !important;
}

.home .yabane-hero img {
  width: 100%;
  display: block;
}

/* Final unified content frame */
:root {
  --yabane-frame-width: min(1110px, calc(100vw - 120px));
}

body {
  background-position: center top !important;
  background-repeat: repeat-y !important;
  background-size: 100vw auto !important;
}

.site-body-container.container,
#site-header-container.site-header-container.container,
.global-nav,
.page-header,
.home .yabane-hero {
  width: var(--yabane-frame-width) !important;
  max-width: var(--yabane-frame-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#site-header-container .global-nav {
  flex: 0 0 var(--yabane-frame-width) !important;
}

.home .yabane-hero img {
  width: 100%;
  display: block;
}

@media (max-width: 767px) {
  :root {
    --yabane-frame-width: calc(100vw - 60px);
  }
}