/* Brand typography shares the page's existing retro type and motion. */
.keyplay-wordmark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  color: #f3f1e8;
  font-family: "Apple Garamond Regular", Georgia, serif;
  font-size: clamp(48px, 8vw, 112px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.045em;
  white-space: nowrap;
}
.keyplay-crt {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font: italic 150px/1 Georgia, serif;
  letter-spacing: -.08em;
  color: #1ad990;
  text-shadow: 0 0 5px #1ad99080, 0 0 24px #1ad99050;
  -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 2px, #0006 2px 4px);
  mask-image: repeating-linear-gradient(to bottom, #000 0 2px, #0006 2px 4px);
}
#hero .framer-10exf0u p { word-break: keep-all; text-wrap: balance; }
/* The captured navigation still contains links to removed portfolio anchors. */
a[href$="#works"], a[href$="#aboutme"] { display: none !important; }
@media (max-width: 809.98px) {
  .keyplay-wordmark { font-size: clamp(42px, 12vw, 88px); }
  /* The mobile TV image includes the old monogram. Keep the source intact
     and place the app's CRT face over its screen in the page composition. */
  #hero .framer-poqcda-container { display: none !important; }
  #hero .framer-1trjc67::after {
    content: "kp";
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 9% 12%;
    background: #151515;
    clip-path: polygon(32% 29%, 70% 23%, 79% 59%, 40% 69%);
    color: #1ad990;
    font: italic 62px/1 Georgia, serif;
    letter-spacing: -.08em;
    text-shadow: 0 0 9px #1ad99060;
    pointer-events: none;
  }
}

/* The shared visual language borrows the reference's warm radio-era palette. */
:root {
  --retro-ink: #3e3127;
  --retro-ink-deep: #2d241d;
  --retro-paper: #fff0d4;
  --retro-paper-light: #fff9eb;
  --retro-orange: #f2a83a;
  --retro-coral: #f27d3b;
  --retro-red: #f14a42;
  --retro-blue: #9dc7d2;
  --retro-edge: #806d59;
}

body.keyplay-home { background: var(--retro-blue) !important; }
body.keyplay-home #main { background: var(--retro-blue) !important; }
body.keyplay-home .framer-OGvgh { background: var(--retro-blue) !important; }
body.keyplay-home .framer-17b4oml {
  background: var(--retro-ink);
  border-left: 1px solid var(--retro-paper);
  border-right: 1px solid var(--retro-paper);
  padding-bottom: 80px !important;
}
body.keyplay-home .framer-uBY0g {
  background: var(--retro-paper-light) !important;
  border: 1px solid #d1b993 !important;
  border-radius: 14px !important;
  box-shadow: inset 0 2px #fff, inset 0 -3px #d2bfa2, 0 4px 0 #98744d, 0 9px 18px #281b112a !important;
}
body.keyplay-home .framer-uBY0g :is(a,p,span) { color: var(--retro-ink) !important; }
body.keyplay-home #hero {
  isolation: isolate;
  background: var(--retro-ink);
  border-bottom: 1px solid #d9b989;
}
body.keyplay-home #hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 28px;
  right: 0;
  bottom: 158px;
  width: 49%;
  background: var(--retro-paper);
  border: 1px solid #d2b993;
}
body.keyplay-home #hero::after {
  content: "PLAY THE\A KEYS";
  white-space: pre;
  position: absolute;
  z-index: 1;
  top: 75px;
  right: 3.5%;
  width: 40%;
  color: var(--retro-ink);
  font: 900 clamp(36px, 5.2vw, 72px)/.92 Impact, "Arial Black", sans-serif;
  letter-spacing: -.035em;
  pointer-events: none;
}
body.keyplay-home #hero .framer-kc6qle { opacity: .16 !important; filter: sepia(1) hue-rotate(330deg); }
body.keyplay-home #hero .framer-gejp2b-container {
  left: 5% !important;
  right: auto !important;
  top: 48px !important;
  width: 46% !important;
  height: 210px !important;
  transform: none !important;
}
body.keyplay-home #hero .framer-gejp2b-container::before {
  content: "●  LIVE KEYBOARD RADIO";
  position: absolute;
  top: 27px;
  left: 0;
  padding: 7px 10px;
  border: 1px solid #ad6b28;
  border-radius: 5px;
  background: var(--retro-orange);
  box-shadow: inset 0 1px #ffe4a7, 0 3px 0 #8c552c;
  color: var(--retro-ink);
  font: 700 10px/1 ui-monospace, monospace;
  letter-spacing: .05em;
}
body.keyplay-home .keyplay-wordmark {
  justify-content: flex-start;
  color: var(--retro-paper);
  font-family: Impact, "Arial Black", "Helvetica Neue", sans-serif;
  font-size: clamp(60px, 6.9vw, 115px);
  font-weight: 900;
  letter-spacing: -.055em;
  line-height: .9;
  text-transform: uppercase;
  text-shadow: 0 3px 0 #241c17;
}
body.keyplay-home #hero .framer-10exf0u {
  left: 3% !important;
  width: 94% !important;
  padding: 19px 25px;
  background: var(--retro-ink-deep);
  border: 1px solid #b39266;
  border-radius: 18px;
  box-shadow: inset 0 1px #fff0d424, 0 12px 26px #22191235;
  transform: none !important;
}
body.keyplay-home #hero .framer-10exf0u :is(p,span) { color: var(--retro-paper) !important; }
body.keyplay-home :is(a[data-framer-name="Primary - Animation"],a[data-framer-name="Dark - Icon No Arrow"],a[data-framer-name="Icon No Arrow"],a[data-framer-name="Dark - Copy to Clipboard"]) {
  border: 1px solid #d4c4a8 !important;
  border-radius: 13px !important;
  background: var(--retro-paper-light) !important;
  box-shadow: inset 0 2px #fff, inset 0 -3px #d3c5ae, 0 3px 0 #79614b, 0 7px 12px #21170f24 !important;
  transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease;
}
body.keyplay-home :is(a[data-framer-name="Primary - Animation"],a[data-framer-name="Dark - Icon No Arrow"],a[data-framer-name="Icon No Arrow"],a[data-framer-name="Dark - Copy to Clipboard"]):hover {
  background: var(--retro-orange) !important;
  transform: translateY(-1px);
}
body.keyplay-home :is(a[data-framer-name="Primary - Animation"],a[data-framer-name="Dark - Icon No Arrow"],a[data-framer-name="Icon No Arrow"],a[data-framer-name="Dark - Copy to Clipboard"]):active {
  transform: translateY(2px);
  box-shadow: inset 0 2px 5px #51361c5e, 0 1px 0 #79614b !important;
}
body.keyplay-home :is(a[data-framer-name="Primary - Animation"],a[data-framer-name="Dark - Icon No Arrow"],a[data-framer-name="Icon No Arrow"],a[data-framer-name="Dark - Copy to Clipboard"]) :is(p,span) { color: var(--retro-ink) !important; }
body.keyplay-home :is(a[data-framer-name="Primary - Animation"],a[data-framer-name="Dark - Icon No Arrow"],a[data-framer-name="Icon No Arrow"],a[data-framer-name="Dark - Copy to Clipboard"]) [data-framer-name="Pixel"] { display: none !important; }
body.keyplay-home [data-framer-name="Mobile-Contact"] {
  background: var(--retro-paper) !important;
  border: 1px solid #d1b38a;
  border-radius: 17px;
  box-shadow: inset 0 2px #fff8, 0 5px 0 #a88158, 0 14px 28px #21180f39;
}
body.keyplay-home [data-framer-name="Mobile-Contact"] :is(p,span) { color: var(--retro-ink) !important; }
body.keyplay-home a[data-framer-name]:focus-visible,
body.keyplay-g3 a:focus-visible { outline: 3px solid var(--retro-coral) !important; outline-offset: 4px; }

body.keyplay-g3 { background: var(--retro-paper) !important; color: var(--retro-ink); }
body.keyplay-g3 #main { background: var(--retro-paper); }
body.keyplay-g3 .framer-ZHNIu { background: var(--retro-paper) !important; }
body.keyplay-g3 .framer-1budsvs > div { border-top: 1px solid #dfc69e; }
body.keyplay-g3 :is(.framer-9cur9k,.framer-13wqwn4) { background: #f8e7c8 !important; }
body.keyplay-g3 .framer-1oee6ea { background: var(--retro-paper) !important; }
body.keyplay-g3 #highlights { background: var(--retro-paper) !important; }
body.keyplay-g3 .framer-1lg0261 { background-image: radial-gradient(ellipse at 50% 38%, #fff9eb, #fff0d4 72%) !important; }
body.keyplay-g3 [data-framer-name="palette"] {
  background: var(--retro-paper-light) !important;
  border: 1px solid #c9ac83 !important;
  box-shadow: inset 0 2px #fff, inset 0 -3px #d2bfa2, 0 4px 0 #9c7c55 !important;
}
body.keyplay-g3 [data-framer-name="palette"] .framer-bNikp {
  box-shadow: inset 0 1px #fff9, 0 3px 0 #8d6b4d !important;
}
body.keyplay-g3 #highlights section {
  border: 1px solid #d9bb8e;
  border-radius: 23px;
  box-shadow: 0 7px 0 #bba17e, 0 17px 34px #4a302819;
  overflow: hidden;
}
body.keyplay-g3 #highlights .framer-KsmX4 { background: var(--retro-paper-light) !important; }
body.keyplay-g3 :is(#highlights,#highlights section) :is(h2,h3,p) { color: var(--retro-ink); }
body.keyplay-g3 a.framer-XQlwj {
  border: 1px solid var(--retro-edge) !important;
  border-radius: 13px !important;
  background: var(--retro-paper-light) !important;
  box-shadow: inset 0 2px #fff, inset 0 -3px #d3c5ae, 0 3px 0 #79614b !important;
}
body.keyplay-g3 a.framer-XQlwj:hover { background: var(--retro-orange) !important; }
body.keyplay-g3 a.framer-XQlwj:active { transform: translateY(2px); box-shadow: inset 0 2px 5px #51361c5e !important; }

@media (min-width: 810px) and (max-width: 1119.98px) {
  body.keyplay-home #hero .framer-gejp2b-container { left: calc((1120px - 100vw) / 2 + 40px) !important; }
  body.keyplay-home .keyplay-wordmark { font-size: clamp(48px, 5.8vw, 64px); }
  body.keyplay-home #hero .framer-10exf0u { left: calc((1120px - 100vw) / 2 + 40px) !important; width: calc(100vw - 80px) !important; }
}
@media (min-width: 810px) {
  body.keyplay-g3 [data-framer-name="Colors"] .framer-1qdduzu { transform: translateX(40px) !important; }
}
@media (max-width: 809.98px) {
  body.keyplay-home .framer-17b4oml { padding-bottom: 50px !important; }
  body.keyplay-home #hero::before { top: 20px; bottom: 175px; width: 40%; }
  body.keyplay-home #hero::after { top: 42px; right: 3%; width: 34%; font-size: clamp(20px, 6vw, 35px); }
  body.keyplay-home #hero .framer-gejp2b-container { left: 5% !important; top: 65px !important; width: 88% !important; height: 160px !important; transform: none !important; }
  body.keyplay-home #hero .framer-gejp2b-container::before { top: 30px; font-size: 8px; }
  body.keyplay-home .keyplay-wordmark { font-size: clamp(43px, 11vw, 76px); }
  body.keyplay-home #hero .framer-10exf0u { left: 4% !important; width: 92% !important; padding: 14px 16px; transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  body.keyplay-home a[data-framer-name] { transition: none; }
}