/* Shared outer site frame. Page-specific content styles stay in styles.css. */
@font-face {
  font-family: "Frame Oxanium";
  src: url("../fonts/oxanium/Oxanium-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
.page-shell {
  border-color: #fff;
  border-radius: 0;
  background: linear-gradient(120deg, #ffffff59, #ffffff1a 60%, #dce1e538);
  box-shadow: inset 0 0 0 1px #8b929a, 0 0 0 1px #656c74, 0 0 0 3px #ffffffb3, 0 10px 24px #30343a66;
}
.site-header {
  min-height: 192px;
  height: 192px;
  overflow: visible;
  z-index: 2;
  border-color: #fff;
  border-radius: 0;
  box-shadow: inset 0 2px #fff, inset 0 -3px #ff9b35, inset 0 -4px #fff, 0 1px #aab1b9;
}
.site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(160deg, #fff0 28%, #ffffff73 28.5% 29%, #fff0 29.5%), linear-gradient(#ffffff80, #ffffff00 50%);
}
.site-header .header-title-block {
  position: absolute;
  right: 3%;
  top: -10px;
  width: min(74%, 880px);
  max-width: none;
  height: 212px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.site-header .header-title-block h1 { color: transparent !important; text-shadow: none !important; }
.site-header .header-title-block::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("../main%20page/main_icon.gif") center / cover no-repeat;
}
/* Rei's original animation is feathered into the left of every banner. */
.site-header::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 0;
  width: min(29%, 285px);
  height: 100%;
  background: url("../main%20page/rei_adachi1.gif") center / cover no-repeat;
  mask-image: radial-gradient(ellipse at 48% 50%, #000 46%, #000c 63%, #0000 84%);
  pointer-events: none;
}
.top-nav {
  --frame-metal: linear-gradient(180deg, #fff 0%, #f3f5f7 45%, #c9cdd3 48%, #edf0f3 100%);
  --frame-control: linear-gradient(180deg, #fff6e6 0%, #ffcc88 43%, #ff9d27 45%, #ed6900 82%, #ffa329 100%);
  font-family: "Frame Oxanium", "Trebuchet MS", sans-serif;
  font-size: 14px;
  padding: 6px 9px 0;
  border-color: #aeb4bc;
  border-radius: 0;
  background: linear-gradient(#fff 0 44%, #c8cfd6 45% 51%, #f9fbfc 52% 83%, #ed7b22 84% 100%);
  box-shadow: inset 0 1px #fff, inset 0 -1px #d95300, 0 3px 7px #3b424959;
}
.top-nav ul { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); }
.top-nav li {
  width: auto;
  padding: 0;
  border-radius: 0;
  background: linear-gradient(135deg, #ffffffa6 0 7%, #fff0 7% 91%, #8c949e40 91%), var(--frame-metal);
  box-shadow: inset 0 1px #fff, inset 1px 0 #fff, inset -1px 0 #8e969f, inset 0 -2px #7d8792;
}
.top-nav li:has(a[aria-current="page"]) {
  background: var(--frame-control);
  box-shadow: inset 0 1px #fff, inset 0 -3px #ad4300, inset 1px 0 #fff, inset -1px 0 #934a13;
}
.top-nav li:hover { background: linear-gradient(#fff7ec, #ffd9a5 44%, #ffa941 48%, #ffc578); }
.page-shell .top-nav a, .page-shell .top-nav a:visited {
  display: block;
  padding: 1px 4px 1px 16px;
  text-align: center;
  color: #34383e !important;
  background: transparent !important;
  text-shadow: 0 1px #fff8;
}
.page-shell .top-nav a[aria-current="page"] { color: #532000 !important; }
.top-nav li::before {
  left: 5px;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-color: #e77a06;
  border-radius: 0;
  background: linear-gradient(135deg, #fff 0 25%, #ffd9a7 26% 48%, #ff8917 49% 75%, #b44400 76%);
  box-shadow: 0 0 0 1px #fff7, 0 1px 2px #5558;
}
.site-footer {
  font-family: "Frame Oxanium", "Trebuchet MS", sans-serif;
  color: #60656b;
  border-color: #b0b7bf;
  border-radius: 0;
  background: linear-gradient(#fff 0 47%, #c1c9d2 48% 51%, #eef2f6 52% 92%, #f58930 93%) !important;
  box-shadow: inset 0 3px #fff, inset 0 -1px #bc5105;
}
.footer-top { border-color: #b7bdc4; }
.footer-button img { border-color: #fff; box-shadow: 0 0 0 1px #a8afb7, 0 2px 4px #3d454c40; }
.page-shell .site-footer a { color: #a13900 !important; }
.page-shell .site-footer a:visited { color: #735544 !important; }
.page-shell .site-footer a:hover { color: #8d2a00 !important; background-color: #ffe0b5 !important; }
.top-nav a:focus-visible { outline: 2px solid #aa3c00; outline-offset: 2px; }
html.dark-mode .page-shell { background: linear-gradient(120deg, #252a3066, #171c2238); }
html.dark-mode .site-header::after { background: linear-gradient(#ffffff30, #ffffff00 50%); opacity: 1; }
html.dark-mode .top-nav, html.dark-mode .site-footer { background: linear-gradient(#6a727c, #303740 45%, #20262e 48%, #424a54) !important; }
html.dark-mode .site-footer { color: #c8cdd3; }
html.dark-mode .page-shell .site-footer a { color: #ffbc71 !important; }
html.dark-mode .page-shell .site-footer a:visited { color: #ffcc93 !important; }
/* Keep page-wide Music link rules inside its content, outside the site frame. */
.page-shell .sidebar a { color: #a13900 !important; }
.page-shell .sidebar a:visited { color: #735544 !important; }
.page-shell .sidebar a:hover { color: #8d2a00 !important; background-color: #ffe0b5 !important; }
.page-shell .sidebar .site-menu a[aria-current="page"] { color: #532000 !important; }
html.dark-mode .page-shell .sidebar a { color: #ffbc71 !important; }
html.dark-mode .page-shell .sidebar a:visited { color: #ffcc93 !important; }
html.dark-mode .page-shell .sidebar a:hover { color: #fff !important; background-color: #9e4b10 !important; }
html.dark-mode .page-shell .sidebar .site-menu a[aria-current="page"] { color: #532000 !important; }
@supports (backdrop-filter: blur(1px)) { .top-nav { backdrop-filter: blur(5px); } }
@media (max-width: 820px) {
  .site-header { min-height: 184px; height: 184px; }
  .site-header .header-title-block { right: 2%; top: -10px; width: 72%; height: 204px; }
  .site-header::before { left: 0; width: 32%; background-size: auto 100%; }
  .top-nav { padding: 6px 4px 0; }
  .top-nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-shell .top-nav a { padding-left: 12px; padding-right: 2px; }
}
@media print, (forced-colors: active) {
  .site-header::before, .site-header::after, .header-title-block::after { display: none !important; }
  .page-shell, .site-header, .top-nav, .top-nav li, .site-footer { color: CanvasText; background: Canvas !important; box-shadow: none; }
  .site-header .header-title-block h1 { color: CanvasText !important; }
  .page-shell .top-nav a, .page-shell .site-footer a, .page-shell .sidebar a { color: LinkText !important; text-shadow: none; }
}