/*
 * PC/SP implementation boundary.
 *
 * Keep this file limited to visibility switching. PC section CSS must not
 * target .philosophy-sp-only, and SP section CSS must not target
 * .philosophy-pc-only.
 */
.philosophy-pc-only {
  display: block;
}

.philosophy-sp-only {
  display: none;
}

@media (max-width: 768px) {
  html,
  body.philosophy-page {
    min-width: 0;
    width: 100%;
    background: #000;
  }

  .philosophy-pc-only {
    display: none !important;
  }

  .philosophy-sp-only {
    display: block;
    margin: 0 auto;
    overflow: hidden;
  }

  /*
   * Legacy shared CSS fixes every <header> to the viewport. SP sections use
   * semantic headers internally, so restore them to normal section layout.
   */
  .philosophy-sp-only header {
    position: static;
    width: auto;
    margin: 0;
    padding: 0;
    z-index: auto;
    transition: none;
    transform: none;
  }
}