/* ========================================
   KODIAK BONES
   MAIN STYLESHEET
   ======================================== */

/* ========================================
   GENERAL
   ======================================== */

body {
  background-color: black;
  background-image: url("/images/Backgrounds/stars.gif");
  color: white;
  font-family: "Comic Sans MS", Tahoma, Verdana, Arial, sans-serif;
  text-align: center;
  min-height: 100vh;
}

/* ========================================
   SITE HEADER
   ======================================== */

.site-shell {
  position: relative;
  max-width: 1200px;
  margin: 20px auto 40px auto;
}


/* ========================================
   HEADER BAR
   ======================================== */

.site-header {
  position: relative;
  z-index: 100;

  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 20px;

  padding: 10px 15px;

  background: black;
  border: 2px solid white;

  overflow: visible;
}


/* ========================================
   LOGO
   ======================================== */

.site-logo {
  display: inline-block;
  flex: 0 0 auto;

  color: white;
  font-weight: 900;
  font-size: 22px;
  text-decoration: none;

  margin-left: 15px;

  filter:
    drop-shadow(0 0 3px #4DAFBA)
    drop-shadow(0 0 7px #8A65C5);

  transition:
    transform 1.2s ease,
    filter 1.2s ease,
    color 1.2s ease;
}


.site-logo:hover {
  color: #D9AD3D;

  filter:
    drop-shadow(0 0 5px #D9AD3D)
    drop-shadow(0 0 10px #E98245)
    drop-shadow(0 0 16px #E05252);

  transform: scale(1.18);
}


@keyframes logo-slide {

  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 200% 50%;
  }

}


/* ========================================
   TOP NAV
   ======================================== */

.top-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;

  flex-wrap: wrap;

  gap: 8px;

  min-width: 0;

  position: relative;
  z-index: 110;
}


/* ========================================
   DIRECT NAV LINKS
   Journal / Stamps
   ======================================== */

.top-nav > .nav-direct-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 38px;

  padding: 7px 11px;

  box-sizing: border-box;

  color: white;
  background: #557FC4;

  border: 2px solid #4DAFBA;
  box-shadow: 3px 3px 0 #8A65C5;

  font-family: inherit;
  font-size: 14px;
  font-weight: bold;

  text-decoration: none;

  white-space: nowrap;

  transition:
    transform 0.35s ease,
    box-shadow 0.55s ease,
    background-color 0.55s ease,
    border-color 0.55s ease,
    color 0.55s ease,
    text-shadow 0.55s ease;
}


.top-nav > .nav-direct-link:hover {
  background-color: #5c3a20;
  border-color: #D9AD3D;
  color: white;

  text-shadow:
    0 0 5px #D9AD3D,
    0 0 12px #E98245,
    0 0 20px #E05252;

  box-shadow:
    0 0 6px #D9AD3D,
    0 0 14px #E98245,
    0 0 24px #E05252,
    5px 5px 0 #D9AD3D;

  transform:
    translateY(-3px)
    rotate(-2deg)
    scale(1.05);
}


.top-nav > .nav-direct-link:nth-of-type(even):hover {
  transform:
    translateY(-3px)
    rotate(2deg)
    scale(1.05);
}


.top-nav > .nav-direct-link:active {
  transform:
    translateY(2px)
    scale(0.95);

  box-shadow:
    1px 1px 0 #8A65C5;
}


/* ========================================
   DROPDOWN CONTAINER
   ======================================== */

.nav-dropdown {
  position: relative;

  display: inline-block;

  flex: 0 0 auto;
}


/* ========================================
   DROPDOWN BUTTON
   ======================================== */

.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 5px;

  min-height: 38px;

  padding: 7px 11px;

  box-sizing: border-box;

  color: white;
  background: #557FC4;

  border: 2px solid #4DAFBA;
  box-shadow: 3px 3px 0 #8A65C5;

  font-family: inherit;
  font-size: 14px;
  font-weight: bold;

  cursor: pointer;

  white-space: nowrap;

  transition:
    transform 0.35s ease,
    box-shadow 0.55s ease,
    background-color 0.55s ease,
    border-color 0.55s ease,
    color 0.55s ease,
    text-shadow 0.55s ease;
}


/* REMOVE BROWSER BUTTON WEIRDNESS */

.nav-dropdown-toggle:focus {
  outline: none;
}


.nav-dropdown-toggle:focus-visible {
  outline: 2px solid white;
  outline-offset: 3px;
}


/* ========================================
   BUTTON HOVER / OPEN STATE
   ======================================== */

.nav-dropdown:hover > .nav-dropdown-toggle,
.nav-dropdown.open > .nav-dropdown-toggle {
  background-color: #5c3a20;
  border-color: #D9AD3D;
  color: white;

  text-shadow:
    0 0 5px #D9AD3D,
    0 0 12px #E98245,
    0 0 20px #E05252;

  box-shadow:
    0 0 6px #D9AD3D,
    0 0 14px #E98245,
    0 0 24px #E05252,
    5px 5px 0 #D9AD3D;

  transform:
    translateY(-3px)
    scale(1.05);
}


/* ========================================
   LITTLE ARROW
   ======================================== */

.nav-arrow {
  display: inline-block;

  font-size: 10px;

  transition:
    transform 0.3s ease;
}


.nav-dropdown.open .nav-arrow,
.nav-dropdown:hover .nav-arrow {
  transform: rotate(180deg);
}


/* ========================================
   DROPDOWN MENU
   ======================================== */

.nav-dropdown-menu {
  position: absolute;

  top: calc(100% + 8px);
  left: 50%;

  z-index: 500;

  display: flex;
  flex-direction: column;

  gap: 7px;

  width: max-content;
  min-width: 165px;

  padding: 9px;

  box-sizing: border-box;

  background: #050505;

  border: 2px solid white;

  box-shadow:
    5px 5px 0 #8A65C5,
    0 0 8px #4DAFBA;

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  transform:
    translateX(-50%)
    translateY(-8px)
    scale(0.96);

  transform-origin: top center;

  transition:
    opacity 0.18s ease,
    visibility 0.18s ease,
    transform 0.22s ease;
}


/* ========================================
   SHOW DROPDOWN
   ======================================== */

.nav-dropdown.open > .nav-dropdown-menu,
.nav-dropdown:hover > .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;

  pointer-events: auto;

  transform:
    translateX(-50%)
    translateY(0)
    scale(1);
}


/* ========================================
   DROPDOWN LINKS
   ======================================== */

.nav-dropdown-menu a {
  display: block;

  width: 100%;

  padding: 8px 12px;

  box-sizing: border-box;

  color: white;
  background: #557FC4;

  border: 2px solid #4DAFBA;

  box-shadow:
    3px 3px 0 #8A65C5;

  font-family: inherit;
  font-size: 14px;
  font-weight: bold;

  text-align: center;
  text-decoration: none;

  white-space: nowrap;

  transition:
    transform 0.2s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    text-shadow 0.25s ease;
}


.nav-dropdown-menu a:hover {
  position: relative;
  z-index: 5;

  background: #5c3a20;

  border-color: #D9AD3D;

  text-shadow:
    0 0 5px #D9AD3D,
    0 0 10px #E98245,
    0 0 16px #E05252;

  box-shadow:
    0 0 5px #D9AD3D,
    0 0 12px #E98245,
    4px 4px 0 #D9AD3D;

  transform:
    translateX(-4px)
    rotate(-1deg)
    scale(1.04);
}


.nav-dropdown-menu a:nth-child(even):hover {
  transform:
    translateX(4px)
    rotate(1deg)
    scale(1.04);
}


/* ========================================
   LANGUAGE DROPDOWN
   ======================================== */

.language-toggle {
  min-width: 74px;
}


.language-menu {
  left: auto;
  right: 0;

  min-width: 150px;

  transform:
    translateY(-8px)
    scale(0.96);

  transform-origin: top right;
}


.nav-dropdown.open > .language-menu,
.nav-dropdown:hover > .language-menu {
  transform:
    translateY(0)
    scale(1);
}


/* CURRENT LANGUAGE */

.language-menu a.current-language {
  background: #55A36C;

  border-color: #D9AD3D;

  box-shadow:
    3px 3px 0 #D9AD3D;

  cursor: default;
}


/* ========================================
   KEEP DROPDOWNS HOVERABLE
   ======================================== */

/*
   Invisible bridge between the top button
   and the floating menu.

   Without this, moving the mouse through
   the 8px gap can close the menu.
*/

.nav-dropdown-menu::before {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  top: -10px;

  height: 10px;
}


/* ========================================
   HEADER MOBILE
   ======================================== */

@media (max-width: 900px) {

  .site-header {
    flex-direction: column;

    justify-content: center;

    gap: 12px;
  }


  .site-logo {
    margin-left: 0;
  }


  .top-nav {
    justify-content: center;

    width: 100%;
  }


  .nav-dropdown-menu {
    min-width: 150px;
  }

}


@media (max-width: 700px) {

  .top-nav {
    gap: 7px;
  }


  .nav-dropdown-toggle,
  .top-nav > .nav-direct-link {
    min-height: 36px;

    padding: 6px 9px;

    font-size: 13px;
  }


  /*
    On narrow screens the dropdowns are
    anchored to the button instead of
    trying to center huge menus.
  */

  .nav-dropdown-menu {
    left: 0;

    min-width: 145px;

    transform:
      translateY(-8px)
      scale(0.96);

    transform-origin: top left;
  }


  .nav-dropdown.open > .nav-dropdown-menu,
  .nav-dropdown:hover > .nav-dropdown-menu {
    transform:
      translateY(0)
      scale(1);
  }


  .language-menu {
    left: auto;
    right: 0;

    transform-origin: top right;
  }

}

/* ========================================
   SIDEBAR
   ======================================== */

.site-sidebar {
  position: absolute;

  top: 100%;
  right: 0;

  width: 280px;

  background: black;

  border: 2px solid white;
  border-top: none;

  z-index: 10;
}

.sidebar-box {
  padding: 15px;
  border-bottom: 2px solid white;
  text-align: center;

  transition:
    background-color 0.8s ease,
    box-shadow 0.8s ease;
}

.sidebar-box:hover {
  background-color: #111;

  box-shadow:
    inset 0 0 8px #D9AD3D,
    inset 0 0 18px #E98245,
    inset 0 0 28px #E05252,
    0 0 8px #4DAFBA,
    0 0 18px #8A65C5;
}

.sidebar-box h3 {
  margin-top: 0;
  padding: 6px;

  background: #557FC4;

  border: 2px solid #4DAFBA;

  color: white;
}

/* ========================================
   MAIN PAGE CONTENT
   ======================================== */

/*
   The sidebar occupies the right side of the page.
   This makes the main content use the remaining
   space so centered content does not hide behind it.
*/

.page-content {
  width: calc(100% - 330px);
}

/* ========================================
   CREDITS PAGE
   ======================================== */

.credit-columns {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 50px;
}

.credit-column {
  overflow: visible;
}

.credit-scroll {
  overflow: visible;
}

.credit-column ul {
  list-style-position: inside;
  padding-left: 0;
}

.credit-title {
  margin-bottom: 30px;
}

.credit-title span {
  display: block;
  margin-top: 4px;
  font-size: 0.55em;
  font-weight: normal;
}

.credit-list p {
  margin: 0 0 18px 0;
  line-height: 1.4;
}

/* ========================================
   MMD PAGE
   ======================================== */

.corner-miku {
  position: fixed;

  top: 10px;
  right: 10px;

  width: 250px;
}

.mmd-title {
  margin-right: 300px;
}

/* ========================================
   STAMP COLLECTION
   ======================================== */

#stamp-grid {
  display: grid;

  grid-template-columns: repeat(5, auto);

  justify-content: center;

  gap: 25px;
}

/* ========================================
   GUESTBOOK
   ======================================== */

.guestbook {
  width: 90%;
  max-width: 800px;
  height: 700px;

  border: none;
}

/* ========================================
   LANGUAGE SELECT
   ======================================== */

.language-select {
  position: fixed;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  text-align: center;
}

/* ========================================
   ABOUT PAGE
   ======================================== */

.about-box {
  display: flex;

  justify-content: center;
  align-items: center;

  gap: 30px;

  max-width: 800px;

  margin: auto;
}

.about-text {
  position: relative;

  left: 100px;

  max-width: 500px;

  text-align: left;
}

.kuma-zone {
  position: absolute;

  left: 5%;
  top: 20%;

  width: 30%;
  height: 55%;

  overflow: hidden;

  pointer-events: none;
}

.little-kuma {
  position: absolute;

  width: 250px;
  height: auto;
}

/* ABOUT FACT CARDS */

.fact-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 15px;

  max-width: 750px;

  margin: 30px auto;
}

.fact-card {
  padding: 15px;

  border: 2px solid white;

  text-align: center;
}

.birthday,
.playing {
  background-color: #55A36C;
}

.watching,
.collecting {
  background-color: #557FC4;
}

.occupation,
.obsession {
  background-color: #E05252;
}

/* ========================================
   COMMISSIONS PAGE
   ======================================== */

.commission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 40px;

  width: 100%;
  max-width: 1000px;

  margin: 30px auto;
  padding: 0 25px;

  box-sizing: border-box;
}

.commission-language {
  min-width: 0;
  width: 100%;

  box-sizing: border-box;

  text-align: center;
}


/* ========================================
   COMMISSION INTRO
   ======================================== */

.commission-intro-section {
  grid-column: 1 / -1;

  width: 100%;
  max-width: 850px;

  margin: 0 auto;
  padding: 25px 40px;

  box-sizing: border-box;

  text-align: center;
}

.commission-intro-section h1 {
  margin-top: 0;
}

.commission-intro {
  max-width: 750px;

  margin: 15px auto;

  line-height: 1.5;
}

.commission-intro-section p {
  max-width: 700px;

  margin: 15px auto;

  line-height: 1.5;
}


/* ========================================
   COMMISSION STATUS
   ======================================== */

.open {
  color: #55A36C;
}

.limited {
  color: #D9AD3D;
}

.closed {
  color: #E05252;
}


/* ========================================
   COMMISSION SERVICE CARDS
   ======================================== */

/* ========================================
   SERVICE CARDS
   ======================================== */

.service-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;

  width: 100%;
  max-width: 750px;

  margin: 25px auto;
}


/* SMALL BAR BY DEFAULT */

.service-card {
  width: 100%;
  min-height: 65px;
  max-height: 65px;

  padding: 12px 20px;

  box-sizing: border-box;

  border: 2px solid white;

  color: white;
  font-family: inherit;

  cursor: pointer;

  overflow: hidden;

  transition:
    max-height 0.3s ease,
    min-height 0.3s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}


/* SERVICE TITLE */

.service-name {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 37px;

  font-size: 24px;
  font-weight: bold;
}


/* DETAILS ARE HIDDEN INITIALLY */

.service-details {
  display: block;

  max-height: 0;
  opacity: 0;

  overflow: hidden;

  font-size: 18px;
  line-height: 1.5;

  transition:
    max-height 0.3s ease,
    opacity 0.2s ease,
    margin 0.3s ease;
}


/* EXPAND ON HOVER */

.service-card:hover,
.service-card:focus-visible {
  min-height: 150px;
  max-height: 220px;

  filter: brightness(1.1);

  box-shadow: 5px 5px 0 white;

  transform: translateY(-3px);
}


/* REVEAL DETAILS */

.service-card:hover .service-details,
.service-card:focus-visible .service-details {
  max-height: 140px;
  opacity: 1;

  margin-top: 12px;
}


/* KEEP TITLE VISIBLE */

.service-card:hover .service-name,
.service-card:focus-visible .service-name {
  display: flex;
}


/* STATUS COLORS */

.open-card {
  background-color: #54A16B;
}

.limited-card {
  background-color: #D9AD3D;
}

.closed-card {
  background-color: #702929;
}


/* ========================================
   COMMISSION PRICE TABLE
   ======================================== */

.price-table {
  width: 100%;

  border-collapse: collapse;

  margin: 20px 0;
}

.price-table th,
.price-table td {
  border: 2px solid white;

  padding: 10px;
}

.price-table th {
  text-align: center;
}

.price-table td:first-child {
  text-align: left;
}

.price-table td:last-child {
  text-align: center;

  white-space: nowrap;
}


/* ========================================
   WILL / WON'T
   ======================================== */

.will-wont-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 15px;

  margin: 25px 0;
}

.will-box,
.wont-box {
  padding: 15px;

  box-sizing: border-box;

  text-align: left;
}

.will-box {
  border: 3px solid #55A36C;
}

.wont-box {
  border: 3px solid #E05252;
}

.will-box h2,
.wont-box h2 {
  margin-top: 0;

  text-align: center;
}

.will-box h2 {
  color: #55A36C;
}

.wont-box h2 {
  color: #E05252;
}


/* ========================================
   COMMISSION PROCESS COLORS
   ======================================== */

.step-red {
  color: #E05252;
}

.step-orange {
  color: #E98245;
}

.step-yellow {
  color: #D9AD3D;
}

.step-green {
  color: #55A36C;
}

.step-blue {
  color: #4DAFBA;
}

.step-purple {
  color: #8A65C5;
}


/* ========================================
   COMMISSION REQUEST FORM
   ======================================== */

.commission-form {
  width: 100%;
  max-width: 1000px;

  margin: 60px auto;

  padding: 0 25px;

  box-sizing: border-box;

  text-align: center;
}

.form-intro {
  max-width: 750px;

  margin: 0 auto 35px auto;

  text-align: center;
}

.form-intro h2 {
  margin-bottom: 25px;
}


/* ========================================
   COMMISSION FORM WINDOW
   ======================================== */

.form-window {
  width: 100%;
  max-width: 900px;

  margin: 30px auto;

  box-sizing: border-box;

  border: 3px solid #E05252;

  background-color: black;

  box-shadow:
    5px 5px 0 #E98245,
    10px 10px 0 #D9AD3D;
}

.form-window-bar {
  padding: 8px 12px;

  background-color: #8b1e1e;

  color: white;

  border-bottom: 3px solid #E98245;

  font-weight: bold;

  text-align: left;
}

.form-window-content {
  padding: 10px;

  background-color: black;
}

.form-window iframe {
  display: block;

  width: 100%;
  min-width: 0;
  height: 539px;

  border: none;
}


/* ========================================
   COMMISSIONS MOBILE
   ======================================== */

@media (max-width: 900px) {

  .commission-grid {
    grid-template-columns: 1fr;

    gap: 30px;

    padding: 0 15px;
  }

  .commission-intro-section {
    grid-column: 1;

    padding: 20px;
  }

  .service-grid {
    grid-template-columns: 1fr;
  }

  .will-wont-grid {
    grid-template-columns: 1fr;
  }

  .commission-form {
    padding: 0 15px;
  }

}

/* ========================================
   PHONE
   ======================================== */

@media (max-width: 700px) {

  /* HEADER */

  .site-header {
    flex-direction: column;

    gap: 10px;
  }

  .top-nav {
    flex-wrap: wrap;

    justify-content: center;
  }

  /* SIDEBAR */

  .site-sidebar {
    position: static;

    width: auto;

    border-top: none;
  }

  /* MAIN CONTENT */

  .page-content {
    width: 100%;
  }

  /* CREDITS */

  .credit-columns {
    display: flex;
    justify-content: center;
    gap: 30px;
  }

  /* COMMISSIONS */

  .commission-grid {
    grid-template-columns: 1fr;

    padding: 0 15px;
  }

  .service-grid {
    grid-template-columns: 1fr;
  }

  .will-wont-grid {
    grid-template-columns: 1fr;
  }

  .commission-intro {
    min-height: 0;
  }

  .commission-form {
    width: 95%;
  }

}

/* ========================================
   MINI CALENDAR
   ======================================== */

.mini-calendar {
  width: 100%;
}

.calendar-month {
  font-size: 20px;
  font-weight: bold;
  margin: 10px 0;
}

.calendar-weekdays,
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.calendar-weekdays {
  margin-bottom: 5px;
  font-weight: bold;
}

.calendar-weekdays span,
.calendar-days span {
  padding: 4px 2px;
  text-align: center;
}

.calendar-days .today {
  background-color: #557FC4;
  border: 2px solid #4DAFBA;
  box-shadow: 2px 2px 0 #8A65C5;
}

/* ========================================
   SOCIAL DROPDOWN
   ======================================== */

.social-box details {
  width: 100%;
}

/* SOCIAL DROPDOWN BUTTON */

.social-toggle {
  width: 100%;
  cursor: pointer;

  padding: 10px;

  color: white;
  font-family: inherit;
  font-size: inherit;
  font-weight: bold;

  background: #557FC4;
  border: 2px solid #4DAFBA;
  box-shadow: 3px 3px 0 #8A65C5;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

.social-toggle:hover {
  background-color: #55A36C;
  transform: translateY(-3px) rotate(-1deg);
  box-shadow: 5px 5px 0 #D9AD3D;
}

/* LITTLE ARROW */

.social-arrow {
  display: inline-block;

  transition: transform 0.4s ease;
}

/* THE DRAWER */

.social-links {
  display: flex;
  flex-direction: column;
  gap: 8px;

  overflow: hidden;

  max-height: 0;
  opacity: 0;
  margin-top: 0;

  transform: translateY(-10px);

  transition:
    max-height 0.7s ease,
    opacity 0.4s ease,
    transform 0.7s ease,
    margin-top 0.7s ease;
}

/* OPEN STATE */

.social-dropdown.open .social-links {
  max-height: 800px;
  opacity: 1;
  margin-top: 14px;

  transform: translateY(0);
}

.social-dropdown.open .social-arrow {
  transform: rotate(180deg);
}

/* Flip arrow when open */
.social-box details[open] summary::after {
  transform: rotate(180deg);
}

/* Container holding social buttons */
.social-links {
  display: flex;
  flex-direction: column;
  gap: 8px;

  margin-top: 14px;
}

/* Each social link becomes a button */
.social-links a {
  display: block;
  padding: 8px 10px;

  color: white;
  background: #557FC4;

  border: 2px solid #4DAFBA;
  box-shadow: 3px 3px 0 #8A65C5;

  text-decoration: none;

  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}

/* BUTTONIES GO BOING */
.social-links a:hover {
  background-color: #55A36C;
  transform: translateX(-5px) rotate(-1deg) scale(1.03);
  box-shadow: 5px 5px 0 #D9AD3D;
}

/* Alternate wiggle direction */
.social-links a:nth-child(even):hover {
  transform: translateX(5px) rotate(1deg) scale(1.03);
}

.landing-bear {
  position: fixed;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  z-index: 1;
}

.landing-bear img {
  width: 300px;
  height: auto;
  display: block;
}

.language-choice {
  position: fixed;
  z-index: 5;

  padding: 18px;

  text-align: center;
  color: white;
  font-weight: bold;

  text-shadow:
    0 0 5px #4DAFBA,
    0 0 12px #4DAFBA;

  filter:
    drop-shadow(0 0 5px #4DAFBA)
    drop-shadow(0 0 12px #8A65C5);
}

.language-stamp {
  display: inline-block;
  height: auto;
}

.language-name {
  display: inline-block;
  margin-top: 5px;
}

.language-choice:hover {
  /* WARM BLOOM */
  text-shadow:
    0 0 6px #D9AD3D,
    0 0 14px #E98245,
    0 0 24px #E05252;

  filter:
    drop-shadow(0 0 7px #D9AD3D)
    drop-shadow(0 0 16px #E98245)
    drop-shadow(0 0 28px #E05252);

  transform: scale(1.08);
}

.media-card {
  width: 180px;
  height: 260px;
  flex: 0 0 180px;

  perspective: 1000px;
  cursor: pointer;

  filter:
    drop-shadow(0 0 4px #4DAFBA)
    drop-shadow(0 0 10px #8A65C5);

  transition: filter 0.45s ease;
}

.media-card-inner {
  position: relative;
  width: 100%;
  height: 100%;

  transform-style: preserve-3d;

  transition:
    transform 0.7s ease;
}

/* FWOOMP */
.media-card:hover .media-card-inner {
  transform: scale(1.10) translateY(-8px);
}

.media-card:hover {
  filter:
    drop-shadow(0 0 6px #D9AD3D)
    drop-shadow(0 0 14px #E98245)
    drop-shadow(0 0 22px #E05252);
}

.media-card.flipped:hover .media-card-inner {
  transform:
    rotateY(180deg)
    scale(1.10)
    translateY(-8px);
}

.media-front,
.media-back {
  width: 100%;
  height: 100%;
}

.media-cover {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center center;

  box-sizing: border-box;
}

.media-card.flipped .media-card-inner {
  transform: rotateY(180deg);
}

.media-carousel {
  width: 100%;
  overflow: hidden;

  padding: 60px 0;
}

.media-track {
  display: flex;
  width: max-content;
  gap: 20px;

  animation: media-scroll 10s linear infinite;
}

.media-carousel:hover .media-track {
  animation-play-state: paused;
}

@keyframes media-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.media-card {
  width: 180px;
  height: 260px;
  flex: 0 0 180px;
}

.media-card {
  width: 180px;
  height: 260px;
  flex: 0 0 180px;

  perspective: 1000px;
  cursor: pointer;
}

.media-card-inner {
  position: relative;

  width: 100%;
  height: 100%;

  transition: transform 0.7s ease;
  transform-style: preserve-3d;
}

.media-card.flipped .media-card-inner {
  transform: rotateY(180deg);
}

.media-front,
.media-back {
  position: absolute;

  width: 100%;
  height: 100%;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  box-sizing: border-box;
}

.media-front {
  transform: rotateY(0deg);
}

.media-back {
  transform: rotateY(180deg);

  background: black;
  border: 2px solid white;

  padding: 15px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  box-shadow:
    0 0 6px #4DAFBA,
    0 0 14px #8A65C5;
}

.progress-bar {
  width: 90%;
  height: 14px;

  background: #111;
  border: 2px solid white;

  margin: 10px 0;
}

.progress-fill {
  height: 100%;

  background: #4DAFBA;

  box-shadow:
    0 0 6px #4DAFBA,
    0 0 10px #8A65C5;
}

.album-card {
  width: 200px;
  height: 200px;
  flex: 0 0 200px;
}

.journal {
  width: 90%;
  margin: 30px auto;
}

.journal-post {
  display: grid;
  grid-template-columns: 200px 1fr;

  margin-bottom: 20px;

  border: 2px solid #4DAFBA;
  background: #080b18;

  box-shadow:
    0 0 6px #4DAFBA,
    0 0 14px #8A65C5;

  transition:
    background-color 0.8s ease,
    border-color 0.8s ease,
    box-shadow 0.8s ease,
    transform 0.8s ease;
}

/* THE ACTUAL WRITING IS ASLEEP */

.journal-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;

  margin-top: 0;

  transition:
    max-height 1s ease,
    opacity 0.7s ease,
    margin-top 0.8s ease;
}

/* FWOOOOOMP */

.journal-post:hover {
  background: #111;

  border-color: #D9AD3D;

  box-shadow:
    inset 0 0 8px #D9AD3D,
    inset 0 0 18px #E98245,
    0 0 10px #E98245,
    0 0 24px #E05252;

  transform: scale(1.02);
}

/* WAKE UP, JOURNAL */

.journal-post:hover .journal-content {
  max-height: 1000px;
  opacity: 1;
  margin-top: 15px;
}

.journal-date {
  padding: 8px 15px;
  text-align: center;
  border-right: 2px solid white;
}

.journal-date img {
  max-width: 80px;
  margin: 0 auto 5px auto;
}

.journal-date p {
  margin: 4px 0;
}

.journal-entry {
  padding: 8px 15px;
  text-align: left;
}

.journal-title {
  margin: 10px 0;
}

footer {
  margin-top: 20px;
}

.fact-card {
  transition:
    transform 0.35s ease-out,
    box-shadow 0.5s ease,
    filter 0.5s ease;
  will-change: transform;
}

.fact-card:hover {
  box-shadow:
    0 0 10px #ffe94a,
    0 0 22px #ff9f43,
    0 0 32px #ff6b35;

  filter: brightness(1.15);
}

/* ========================================
   MMD PAGE LAYOUT
   ======================================== */

.mmd-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;

  gap: 30px;
  align-items: center;
}

.mmd-text,
.mmd-image {
  min-width: 0;
}

.mmd-text p {
  line-height: 1.5;
}

.mmd-image img {
  display: block;

  width: 100%;
  height: auto;
}

/* FLOATING SECRET IMAGE */

.mmd-secret {
  display: inline-block;

  border: 2px solid #48b8ff;

  box-shadow:
    0 0 8px #48b8ff,
    0 0 18px #c875ff;

  animation: mmd-float 3s ease-in-out infinite;

  transition:
    border-color 0.6s ease,
    box-shadow 0.6s ease,
    filter 0.6s ease;
}

.mmd-secret img {
  display: block;

  width: 100%;
  height: auto;
}

@keyframes mmd-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }

}

.mmd-secret:hover {
  border-color: #ffe94a;

  box-shadow:
    0 0 8px #ffe94a,
    0 0 18px #ff9f43,
    0 0 30px #ff6b35;

  filter: brightness(1.12);
}

/* ========================================
   FURRY PAGE LAYOUT
   ======================================== */

.furry-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;

  gap: 30px;
  align-items: center;

  margin-left: 25px;
}

.furry-text,
.furry-image {
  min-width: 0;
}

.furry-text {
  text-align: center;
}

.furry-text p {
  line-height: 1.5;
}

.furry-image {
  min-width: 0;
  justify-self: end;
}

/* FLOATING WWF ALLIGATOR */

.furry-secret {
  display: inline-block;

  border: 2px solid #48b8ff;

  box-shadow:
    0 0 8px #48b8ff,
    0 0 18px #c875ff;

  animation: furry-float 3s ease-in-out infinite;

  transition:
    border-color 0.6s ease,
    box-shadow 0.6s ease,
    filter 0.6s ease;
}

.furry-secret img {
  display: block;

  width: 100%;
  height: auto;
}

@keyframes furry-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }

}

.furry-secret:hover {
  border-color: #ffe94a;

  box-shadow:
    0 0 8px #ffe94a,
    0 0 18px #ff9f43,
    0 0 30px #ff6b35;

  filter: brightness(1.12);
}

/* ========================================
   HOMEPAGE SPECIAL INTEREST STAMPS
   ======================================== */

.hobby-stamps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 20px;
}

.hobby-stamps a {
  display: inline-block;
  position: relative;
  z-index: 1;
}

.hobby-stamps img {
  display: block;

  transition:
    transform 0.25s ease,
    filter 0.25s ease;

  will-change: transform, filter;
}

/* FWOOOOOMP 🌈 */

.hobby-stamps a:hover {
  z-index: 10;
}

.hobby-stamps a:hover img {
  transform: scale(1.15);

  animation:
    rainbow-stamp-glow 2.5s linear infinite;
}

/* SITE-PALETTE RAINBOW GLOW */

@keyframes rainbow-stamp-glow {

  0% {
    filter:
      drop-shadow(0 0 2px white)
      drop-shadow(0 0 6px #E05252)
      drop-shadow(0 0 14px #E05252);
  }

  14% {
    filter:
      drop-shadow(0 0 2px white)
      drop-shadow(0 0 6px #E98245)
      drop-shadow(0 0 14px #E98245);
  }

  28% {
    filter:
      drop-shadow(0 0 2px white)
      drop-shadow(0 0 6px #D9AD3D)
      drop-shadow(0 0 14px #D9AD3D);
  }

  42% {
    filter:
      drop-shadow(0 0 2px white)
      drop-shadow(0 0 6px #55A36C)
      drop-shadow(0 0 14px #55A36C);
  }

  57% {
    filter:
      drop-shadow(0 0 2px white)
      drop-shadow(0 0 6px #4DAFBA)
      drop-shadow(0 0 14px #4DAFBA);
  }

  71% {
    filter:
      drop-shadow(0 0 2px white)
      drop-shadow(0 0 6px #557FC4)
      drop-shadow(0 0 14px #557FC4);
  }

  85% {
    filter:
      drop-shadow(0 0 2px white)
      drop-shadow(0 0 6px #8A65C5)
      drop-shadow(0 0 14px #8A65C5);
  }

  100% {
    filter:
      drop-shadow(0 0 2px white)
      drop-shadow(0 0 6px #D96F9F)
      drop-shadow(0 0 14px #D96F9F);
  }
}

/* =========================================
   FURSONA CARDS
   three whole losers
   ========================================= */

/* ----- GRID ----- */

.fursona-grid {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  justify-content: center;
  gap: 20px;

  width: 100%;
  margin: 35px auto;

  position: relative;
  left: 40px;
}

/* ----- CARD ----- */

.fursona-card {
  width: 200px;
  height: 265px;

  perspective: 1000px;
  cursor: pointer;

  transition:
    transform 0.25s ease,
    filter 0.25s ease;
}

/* Lift + glow when hovered */

.fursona-card:hover {
  transform: translateY(-8px) scale(1.04);

  filter:
    drop-shadow(0 0 6px var(--sona-hover))
    drop-shadow(0 0 14px var(--sona-hover));
}

.fursona-card:hover .fursona-card-front,
.fursona-card:hover .fursona-card-back {
  border-color: var(--sona-hover);

  box-shadow:
    0 0 7px var(--sona-hover),
    0 0 16px var(--sona-hover);
}

/* ----- INNER FLIPPING PART ----- */

.fursona-card-inner {
  position: relative;

  width: 100%;
  height: 100%;

  transform-style: preserve-3d;

  transition: transform 0.6s ease;
}

/* Flip when clicked */

.fursona-card.flipped .fursona-card-inner {
  transform: rotateY(180deg);
}

/* ----- BOTH SIDES ----- */

.fursona-card-front,
.fursona-card-back {
  position: absolute;
  inset: 0;

  box-sizing: border-box;

  width: 100%;
  height: 100%;

  padding: 18px;

  background: #080808;

  border: 2px solid #66ccff;
  border-radius: 12px;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  text-align: center;
}

/* ----- FRONT ----- */

.fursona-card-front {
  transform: rotateY(0deg);
}

/* Temporary box until you draw the headshots */

.fursona-placeholder {
  width: 145px;
  height: 150px;

  display: flex;
  justify-content: center;
  align-items: center;

  box-sizing: border-box;

  margin-bottom: 10px;

  border: 1px dashed #777;
  border-radius: 8px;

  font-size: 18px;
  letter-spacing: 2px;
}

/* Name */

.fursona-card-front h2 {
  margin: 5px 0;
}

/* Species */

.fursona-card-front p {
  margin: 0;

  font-size: 14px;
  opacity: 0.7;
}

/* ----- BACK ----- */

.fursona-card-back {
  transform: rotateY(180deg);
}

.fursona-card-back h2 {
  margin: 0 0 10px;
}

.fursona-card-back p {
  margin: 0 0 20px;

  line-height: 1.5;
}

/* "GET A LOAD OF THIS GUY" button */

.fursona-card-back a {
  display: inline-block;

  padding: 8px 12px;

  color: white;
  text-decoration: none;

  border: 1px solid var(--sona-rest);
  border-radius: 7px;

  box-shadow:
    0 0 4px var(--sona-rest);

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.fursona-card-back a:hover {
  transform: scale(1.06);

  border-color: var(--sona-hover);

  box-shadow:
    0 0 7px var(--sona-hover),
    0 0 14px var(--sona-hover);
}

/* ----- EVENTUAL HEADSHOT ART ----- */

.fursona-headshot {
  width: 160px;
  height: 170px;

  object-fit: cover;

  margin-bottom: 10px;

  border-radius: 8px;
}

/* ----- MOBILE ----- */

@media (max-width: 800px) {

  .fursona-grid {
    display: grid;
    grid-template-columns: repeat(3, 200px);
    justify-content: center;

    gap: 20px;

    width: 100%;
    margin: 35px auto;
  }
}

.fursona-card-front,
.fursona-card-back {
  transition:
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.fursona-card-front,
.fursona-card-back {
  border-color: var(--sona-rest);

  box-shadow:
    0 0 5px var(--sona-rest),
    0 0 10px var(--sona-rest);

  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* =========================================
   FURSONA PERSONAL COLORS
   ========================================= */

.dog-card {
  --sona-rest: #314550;
  --sona-hover: #42D9FF;
}

.gator-card {
  --sona-rest: #52641D;
  --sona-hover: #FFE34D;
}

.whiteclaw-card {
  --sona-rest: #573128;
  --sona-hover: #FF4FA3;
}

/* RESTING COLORS */

.fursona-card .fursona-card-front,
.fursona-card .fursona-card-back {
  border: 2px solid var(--sona-rest);

  box-shadow:
    0 0 5px var(--sona-rest),
    0 0 10px var(--sona-rest);

  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* HOVER COLORS */

.fursona-card:hover .fursona-card-front,
.fursona-card:hover .fursona-card-back {
  border-color: var(--sona-hover);

  box-shadow:
    0 0 7px var(--sona-hover),
    0 0 16px var(--sona-hover);
}

/* BUTTON RESTING COLOR */

.fursona-card-back a {
  border-color: var(--sona-rest);

  box-shadow:
    0 0 4px var(--sona-rest);
}

/* BUTTON HOVER COLOR */

.fursona-card-back a:hover {
  border-color: var(--sona-hover);

  box-shadow:
    0 0 7px var(--sona-hover),
    0 0 14px var(--sona-hover);
}

/* ========================================
   OOGLY WOOGLY GLOBE
   ======================================== */

.oogly-globe {
  display: flex;
  justify-content: center;
  margin: 35px auto;
}

/* WHOLE GUY FLOATS */

.globe-floater {
  display: flex;
  flex-direction: column;
  align-items: center;

  animation: globe-float 3s ease-in-out infinite;
}

/* THE EARTH */

.globe {
  position: relative;

  width: 170px;
  height: 170px;

  overflow: hidden;

  border: 4px solid white;
  border-radius: 50%;

  background:
    radial-gradient(
      circle at 35% 30%,
      #4DAFBA,
      #557FC4 65%,
      #263b70
    );

  box-shadow:
    0 0 8px white,
    0 0 16px #4DAFBA,
    0 0 28px #8A65C5;

  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

/* FAKE LITTLE CONTINENTS */

.globe-map {
  position: absolute;

  width: 300%;
  height: 100%;

  left: 0;
  top: 0;

  opacity: 0.9;

  background-image:
    radial-gradient(
      ellipse at 8% 35%,
      #55A36C 0 8%,
      transparent 9%
    ),

    radial-gradient(
      ellipse at 18% 65%,
      #55A36C 0 6%,
      transparent 7%
    ),

    radial-gradient(
      ellipse at 31% 25%,
      #D9AD3D 0 7%,
      transparent 8%
    ),

    radial-gradient(
      ellipse at 43% 55%,
      #55A36C 0 9%,
      transparent 10%
    ),

    radial-gradient(
      ellipse at 58% 30%,
      #55A36C 0 7%,
      transparent 8%
    ),

    radial-gradient(
      ellipse at 73% 62%,
      #D9AD3D 0 6%,
      transparent 7%
    ),

    radial-gradient(
      ellipse at 88% 40%,
      #55A36C 0 8%,
      transparent 9%
    );

  animation: globe-spin 10s linear infinite;
}

/* HIS STUPID LITTLE FACE */

.globe-face {
  position: absolute;

  inset: 0;

  z-index: 5;

  pointer-events: none;
}

/* EYES */

.globe-eye {
  position: absolute;

  top: 68px;

  width: 10px;
  height: 14px;

  background: white;

  border-radius: 50%;

  box-shadow:
    0 0 4px black;
}

.left-eye {
  left: 55px;
}

.right-eye {
  right: 55px;
}

/* SMILE */

.globe-mouth {
  position: absolute;

  left: 50%;
  top: 91px;

  width: 25px;
  height: 12px;

  transform: translateX(-50%);

  border-bottom: 4px solid white;

  border-radius: 0 0 50% 50%;

  filter: drop-shadow(0 0 2px black);
}

/* LITTLE DESK-GLOBE STAND */

.globe-stand {
  display: flex;
  flex-direction: column;
  align-items: center;

  margin-top: -3px;
}

.globe-neck {
  width: 10px;
  height: 25px;

  background: #D9AD3D;

  border-left: 3px solid white;
  border-right: 3px solid white;
}

.globe-base {
  width: 85px;
  height: 18px;

  background: #D9AD3D;

  border: 3px solid white;

  border-radius: 50%;
}

/* EARTH GO BRRRRR */

@keyframes globe-spin {

  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-33.333%);
  }

}

/* OOGLE WOGGLE */

@keyframes globe-float {

  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }

  50% {
    transform: translateY(-10px) rotate(2deg);
  }

}

/* TOUCH THE PLANET */

.globe:hover {
  transform: scale(1.08);

  box-shadow:
    0 0 10px white,
    0 0 22px #4DAFBA,
    0 0 38px #8A65C5;
}

.globe:hover .globe-map {
  animation-duration: 3s;
}

.geoguessr-profile-button {
  display: inline-block;

  padding: 10px 18px;
  margin: 10px 0 25px;

  background: #557FC4;
  color: white;

  border: 2px solid #4DAFBA;

  font-weight: bold;
  text-decoration: none;

  box-shadow:
    4px 4px 0 #8A65C5;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.geoguessr-profile-button:hover {
  background: #4DAFBA;

  transform: translateY(-3px);

  box-shadow:
    4px 7px 0 #8A65C5,
    0 0 8px white,
    0 0 16px #4DAFBA;
}

/* ========================================
   RESUME BUTTONS
   ======================================== */

.resume-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 24px auto 30px;
}

.resume-links a {
  display: inline-block;
  padding: 8px 14px;

  color: white;
  background: #557FC4;

  border: 2px solid #4DAFBA;
  box-shadow: 3px 3px 0 #8A65C5;

  font-weight: bold;
  text-decoration: none;

  transition:
    transform 0.4s ease,
    box-shadow 0.8s ease,
    background-color 0.8s ease,
    border-color 0.8s ease,
    color 0.8s ease,
    text-shadow 0.8s ease;
}

.resume-links a:hover {
  background-color: #5c3a20;
  border-color: #D9AD3D;
  color: white;

  text-shadow:
    0 0 5px #D9AD3D,
    0 0 12px #E98245,
    0 0 20px #E05252;

  box-shadow:
    0 0 6px #D9AD3D,
    0 0 14px #E98245,
    0 0 24px #E05252,
    5px 5px 0 #D9AD3D;

  transform: translateY(-4px) rotate(-2deg) scale(1.05);
}

.resume-links a:nth-child(even):hover {
  transform: translateY(-4px) rotate(2deg) scale(1.05);
}

.resume-links a:active {
  transform: translateY(2px) scale(0.95);
  box-shadow: 1px 1px 0 #8A65C5;
}

/* ==============================
   HORSE GRID
   ============================== */

.horse-section {
  max-width: 1000px;
  margin: 30px auto 70px;
  text-align: center;
}

.horse-intro {
  margin-bottom: 35px;
}

.horse-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 45px 30px;

  width: 100%;
}

/* ==============================
   HORSE
   ============================== */

.horse-card {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 15px;

  color: white !important;
  text-decoration: none !important;

  z-index: 1;

  transition:
    transform 0.35s ease,
    filter 0.45s ease;
}

/* portrait */

.horse-portrait {
  width: 100%;
  aspect-ratio: 1 / 1;

  display: flex;
  align-items: center;
  justify-content: center;
}

.horse-portrait img {
  display: block;

  width: 100%;
  max-width: 250px;
  height: auto;

  object-fit: contain;

  transition:
    transform 0.4s ease,
    filter 0.45s ease;
}

/* name */

.horse-name {
  display: flex;
  flex-direction: column;

  margin-top: 8px;
}

.horse-name strong {
  font-size: 1.35em;
}

.horse-name span {
  color: #4DAFBA;
}

/* ==============================
   SECRET HORSE INFORMATION
   ============================== */

.horse-popup {
  position: absolute;

  left: 50%;
  top: 88%;

  width: 85%;
  padding: 15px;

  background: #111;

  border: 2px solid #D9AD3D;

  box-shadow:
    0 0 6px #D9AD3D,
    0 0 14px #E98245,
    0 0 22px rgba(224, 82, 82, 0.65),
    4px 4px 0 #8A65C5;

  opacity: 0;
  visibility: hidden;

  transform:
    translateX(-50%)
    translateY(-15px)
    scale(0.85);

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease,
    transform 0.35s ease;

  z-index: 50;
}

.horse-popup h3 {
  margin: 0;
  color: white;
}

.horse-popup p {
  margin: 4px 0;
}

.horse-jp {
  color: #4DAFBA;
}

.horse-more {
  display: block;

  margin-top: 10px;

  color: #D9AD3D;
}

/* ==============================
        F W O O M P
   ============================== */

.horse-card:hover {
  transform:
    translateY(-7px)
    scale(1.03);

  z-index: 100;
}

.horse-card:hover .horse-portrait img {
  transform:
    translateY(-6px)
    scale(1.12);

  filter:
    drop-shadow(0 0 5px #D9AD3D)
    drop-shadow(0 0 10px #E98245)
    drop-shadow(0 0 18px #E05252);
}

.horse-card:hover .horse-popup {
  opacity: 1;
  visibility: visible;

  transform:
    translateX(-50%)
    translateY(0)
    scale(1);
}

/* ==============================
   RESPONSIVE HORSE CONTAINMENT
   ============================== */

@media (max-width: 850px) {

  .horse-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 550px) {

  .horse-grid {
    grid-template-columns: 1fr;
  }

}

/* =========================
   JAPANESE SITE ADJUSTMENTS
   ========================= */

html[lang="ja"] .top-nav {
  gap: 4px;
}

html[lang="ja"] .top-nav a {
  font-size: 16px;
  padding: 10px 14px;
}

html[lang="ja"] .site-logo {
  font-size: 22px;
}

html[lang="ja"] .site-header {
  padding: 10px 14px;
}

html[lang="ja"] .site-sidebar {
  font-size: 16px;
}

html[lang="ja"] .sidebar-box h3 {
  font-size: 20px;
}

/* ========================================
   JAPANESE HEADER COMPACT LAYOUT
   Keeps the Japanese navigation on one row
   without changing the English site.
   ======================================== */

html[lang="ja"] .site-logo {
  white-space: nowrap;
  font-size: 20px;
}

html[lang="ja"] .top-nav {
  gap: 3px;
}

html[lang="ja"] .top-nav a {
  font-size: 15px;
  padding: 9px 10px;
  white-space: nowrap;
}