/* About-page experiment. Shared navigation and interaction files stay untouched. */
.about-page {
  background-color: #fff;
  background-image: linear-gradient(rgba(0, 0, 0, .12), rgba(0, 0, 0, .12)), url('../images/backgrounds/about-white-paisley.png');
  background-size: auto, 1254px auto;
  background-repeat: repeat;
  background-position: center top;
}

.about-page .about-layout {
  display: block;
  max-width: 980px;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  background: #f9f7f1;
  border: 1px solid #b8b0a2;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .2);
}
.about-page .about-rail { padding: 0 0 1rem; }
.about-page .about-rail::before { content: none; }
.about-page .about-eyebrow,
.about-page .about-rail h1,
.about-page .about-rule { margin-left: 0; }

.about-page .about-rail h1 { color: #17120e; text-shadow: none; }
.about-page .about-eyebrow { color: #d65a0b; }
.about-page .about-rule { color: #343434; }
.about-page .about-story {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.about-page .about-story p { color: #241b16; text-shadow: none; }
.about-page .about-story h2 { color: #e75b00; text-shadow: none; }
.about-page .about-story a { color: #a83d00; }

/* Speaker-cabinet footer for this page's amp experiment. */
.about-page .site-footer {
  padding: clamp(18px, 2.5vw, 32px);
  background:
    linear-gradient(#171412, #171412) left top / 28px 8px no-repeat,
    linear-gradient(#171412, #171412) left top / 8px 28px no-repeat,
    linear-gradient(#171412, #171412) right top / 28px 8px no-repeat,
    linear-gradient(#171412, #171412) right top / 8px 28px no-repeat,
    linear-gradient(#171412, #171412) left bottom / 28px 8px no-repeat,
    linear-gradient(#171412, #171412) left bottom / 8px 28px no-repeat,
    linear-gradient(#171412, #171412) right bottom / 28px 8px no-repeat,
    linear-gradient(#171412, #171412) right bottom / 8px 28px no-repeat,
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #f18a46, #dc642b 50%, #ed8040) !important;
  box-shadow: inset 0 2px 0 rgba(255,225,188,.5), inset 0 -4px 12px rgba(86,30,9,.5);
}

.about-page .site-footer::before,
.about-page .site-footer__content::before,
.about-page .site-footer__content::after { content: none; }

.about-page .site-footer__content {
  padding: clamp(1rem, 2vw, 2rem);
  border: 3px solid #9a4c25;
  border-radius: 0;
  background:
    repeating-linear-gradient(0deg, rgba(83, 67, 37, .16) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(83, 67, 37, .16) 0 1px, transparent 1px 4px),
    #d8c99b;
  box-shadow: inset 0 2px 8px rgba(68, 40, 16, .35);
}

.about-page .site-footer p,
.about-page .site-footer a { color: #21180e; text-shadow: none; }
.about-page .site-footer a:hover,
.about-page .site-footer a:focus-visible { color: #773708; }
.about-page .site-footer__logo-link { background: #f7f2e4; border-color: #594b36; box-shadow: none; }
.about-page .site-footer__logo { filter: brightness(0); }
.about-page .site-footer__bottom { border-color: rgba(70, 51, 28, .4); }

@media (min-width: 992px) {
  header.orange-amp-experiment {
    padding: clamp(8px, .9vw, 12px) clamp(14px, 1.5vw, 22px);
    border: 0;
    background:
      linear-gradient(#171412, #171412) left top / 34px 9px no-repeat,
      linear-gradient(#171412, #171412) left top / 9px 34px no-repeat,
      linear-gradient(#171412, #171412) right top / 34px 9px no-repeat,
      linear-gradient(#171412, #171412) right top / 9px 34px no-repeat,
      linear-gradient(#171412, #171412) left bottom / 34px 9px no-repeat,
      linear-gradient(#171412, #171412) left bottom / 9px 34px no-repeat,
      linear-gradient(#171412, #171412) right bottom / 34px 9px no-repeat,
      linear-gradient(#171412, #171412) right bottom / 9px 34px no-repeat,
      repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
      linear-gradient(180deg, #f18a46, #dc642b 50%, #ed8040);
    box-shadow: inset 0 2px 0 rgba(255, 225, 188, .5), inset 0 -4px 12px rgba(86, 30, 9, .5), 0 12px 28px rgba(0,0,0,.45);
  }

  header.orange-amp-experiment::before,
  header.orange-amp-experiment::after { content: none; }

  .orange-amp-experiment .amp-panel {
    width: 100%;
    padding: 7px clamp(18px, 3vw, 44px) 9px;
    border: 3px solid #4b322a;
    border-radius: 5px;
    background: linear-gradient(180deg, #f8efd9, #e8d9b9);
    box-shadow: 0 0 0 4px rgba(255, 221, 204, .5), inset 0 0 0 2px #fff, 0 5px 12px rgba(56, 20, 9, .5);
  }

  .orange-amp-experiment .logo-container {
    margin: 0 0 5px;
    padding: 1px 0 3px;
    border-bottom: 1px solid #98877d;
  }

  .orange-amp-experiment .logo {
    width: 180px;
    max-width: 180px;
    filter: brightness(0);
  }

  .orange-amp-experiment .control-panel {
    padding: 6px 10px 5px;
    border: 2px solid #33231d;
    border-radius: 3px;
    background: linear-gradient(90deg, #080808 0%, #111 14%, #fba65c 14%, #f68436 86%, #111 86%, #080808 100%);
    box-shadow: inset 0 2px 0 rgba(255, 227, 192, .25), inset 0 -3px 5px rgba(0, 0, 0, .3);
  }

  .orange-amp-experiment .control-panel::before,
  .orange-amp-experiment .control-panel::after { content: none; }

  .orange-amp-experiment .control-panel ul {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    gap: 8px;
  }

  .orange-amp-experiment .knob {
    width: 48px;
    height: 48px;
    border: 3px solid #121212;
    background: radial-gradient(circle at 38% 30%, #404040, #141414 48%, #030303 75%);
    box-shadow: 0 3px 5px rgba(0,0,0,.55), inset 0 1px 2px rgba(255,255,255,.25), inset 0 -2px 4px #000;
  }

  .orange-amp-experiment .knob::before {
    top: 5px;
    height: 9px;
    width: 3px;
    background: #f5eee5;
  }

  .orange-amp-experiment .knob:hover::before,
  .orange-amp-experiment .knob:focus::before,
  .orange-amp-experiment .knob.active::before { background: #fff; }

  .orange-amp-experiment .knob-label,
  .orange-amp-experiment .knob:hover + .knob-label,
  .orange-amp-experiment .knob:focus + .knob-label { color: #1a120e; font-weight: 700; text-shadow: none; }

  .orange-amp-experiment .control-panel ul > .amp-input-jack {
    width: 48px;
    height: 48px;
    clip-path: none;
    background: url('../images/icons/orange-amp-input-jack.png') center / 180% no-repeat;
    filter: none;
  }

  .orange-amp-experiment .amp-input-jack__bezel { display: none; }

  .orange-amp-experiment .control-panel ul li.power-switch {
    flex-direction: row;
    justify-content: center;
    gap: 0;
  }

  .orange-amp-experiment .power-switch .switch,
  .orange-amp-experiment .power-switch:hover .switch,
  .orange-amp-experiment .power-switch.on .switch {
    position: relative;
    width: clamp(52px, 4vw, 66px);
    height: clamp(52px, 4vw, 66px);
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
  }

  .orange-amp-experiment .switch::before,
  .orange-amp-experiment .switch::after { content: none; }

  .orange-amp-experiment .orange-amp-switch-base,
  .orange-amp-experiment .orange-amp-switch-down,
  .orange-amp-experiment .orange-amp-switch-up {
    position: absolute;
    inset: 0;
    background: center / contain no-repeat;
    pointer-events: none;
  }

  .orange-amp-experiment .orange-amp-switch-base { background-image: url('../images/icons/orange-amp-toggle-base.png'); }
  .orange-amp-experiment .orange-amp-switch-down,
  .orange-amp-experiment .orange-amp-switch-up { transition: opacity 160ms ease; }
  .orange-amp-experiment .orange-amp-switch-down {
    background-image: url('../images/icons/orange-amp-toggle-down.png');
    transform: translateY(8%);
    opacity: 1;
  }
  .orange-amp-experiment .orange-amp-switch-up {
    background-image: url('../images/icons/orange-amp-toggle-up.png');
    transform: translateY(-16%);
    opacity: 0;
  }
  .orange-amp-experiment .power-switch.on .switch:not(.orange-amp-second-switch) .orange-amp-switch-down,
  .orange-amp-experiment .orange-amp-second-switch.is-on .orange-amp-switch-down { opacity: 0; }
  .orange-amp-experiment .power-switch.on .switch:not(.orange-amp-second-switch) .orange-amp-switch-up,
  .orange-amp-experiment .orange-amp-second-switch.is-on .orange-amp-switch-up { opacity: 1; }
  .orange-amp-experiment .switch:focus-visible { outline: 2px solid #fff; outline-offset: -15px; }

  .orange-amp-experiment .amp-nav-search { margin-top: 10px; }
}

@media (max-width: 991px) {
  .orange-amp-experiment .orange-amp-second-switch { display: none; }
  .orange-amp-experiment .orange-amp-switch-base,
  .orange-amp-experiment .orange-amp-switch-down,
  .orange-amp-experiment .orange-amp-switch-up { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .orange-amp-experiment .orange-amp-switch-down,
  .orange-amp-experiment .orange-amp-switch-up { transition: none; }
}