/* My Social: contact keys over the night sky. */
@font-face { font-family: 'Gaegu'; src: url('/assets/fonts/Gaegu-Bold-latin.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url('/assets/fonts/BricolageGrotesque-latin.woff2') format('woff2'); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }

html,
body.social-page {
  margin: 0;
  background: #0c0c0d;
}
body.social-page {
  --sc-display: 'Gaegu', 'Comic Sans MS', cursive;
  --sc-body: 'Bricolage Grotesque', Helvetica, Arial, sans-serif;
  color: #f5f5f5;
  font-family: var(--sc-body);
}

.sc-sec {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: #0c0c0d;
}
.sc-sky {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background:
    linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
    url('/assets/media/social/sky.jpg') center / cover no-repeat;
}
.sc-clouds {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 432px;
  pointer-events: none;
}
.sc-cloud {
  position: absolute;
  width: 56.02%;
  height: auto;
}
.sc-cloud.c1 { left: -14.01%; top: 53.39px; }
.sc-cloud.c2 { left: 59.99%; top: 53.39px; transform: scaleX(-1); }
.sc-cloud.c3 { left: 21.55%; top: 190.88px; }

.sc-wrap {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: min(1216px, 100%);
  margin: 0 auto;
  padding: 120px 48px 270px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.sc-title {
  max-width: 863px;
  margin: 0;
  font: 700 clamp(48px, 6vw, 90px)/1.2 var(--sc-display);
  color: #fff;
  text-wrap: balance;
}
.sc-lead {
  margin: 20px 0 0;
  font: 400 clamp(20px, 2.45vw, 37px)/1.25 var(--sc-body);
  color: #fff;
  text-wrap: pretty;
}

.sc-panel {
  position: relative;
  box-sizing: border-box;
  width: min(1060px, 100%);
  margin-top: 44px;
  padding: 26px 40px 30px;
  border-radius: 32px;
  background: #222;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 1px 0 0 rgba(255, 255, 255, 0.05);
  filter: drop-shadow(0 40px 35px rgba(0, 0, 0, 0.8));
  container-type: inline-size;
}
.sc-hint {
  margin: 0;
  font: 600 13px/18.2px var(--sc-body);
  color: #cacaca;
}

/* Figma: five 150px columns with 30px gaps in a 980px inner panel (55px either side).
   Sized off the panel width so the row stays centred as the panel narrows. */
.sc-keys {
  display: flex;
  justify-content: center;
  gap: min(30px, 3.06cqi);
  margin-top: 8px;
}
.sc-col {
  flex: none;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 96px 118px 96px;
  justify-items: center;
  width: min(150px, 15.31cqi);
}
.sc-col.below .sc-key { grid-row: 2; }
.sc-col.below .sc-note { grid-row: 3; padding-top: 10px; }
.sc-col.above .sc-note { grid-row: 1; align-self: end; padding-bottom: 6px; }
.sc-col.above .sc-key { grid-row: 2; }

.sc-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 220px;
}
.sc-note p {
  margin: 0;
  font: 400 18px/22.5px var(--sc-body);
  color: #f5f5f5;
  white-space: nowrap;
}
.sc-arrow {
  display: block;
}
.sc-mail {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sc-key:focus-visible {
  outline: 2px solid #f1be48;
  outline-offset: 4px;
}

/* Keys: a dark well with a coloured cap that sits 7px proud and drops when pressed. */
.sc-key {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 118px;
  height: 118px;
  padding: 10px;
  border-radius: 26px;
  background: linear-gradient(180deg, #2a2e36, #1b1e24);
  box-shadow: inset 0 2px 1px rgba(255, 255, 255, 0.08), inset 0 -3px 6px rgba(0, 0, 0, 0.5), 0 22px 30px -16px rgba(10, 20, 40, 0.7);
  -webkit-tap-highlight-color: transparent;
}
.sc-face {
  position: absolute;
  left: 10px;
  top: 3px;
  width: 98px;
  height: 98px;
  box-sizing: border-box;
  padding-bottom: 6px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 42%), var(--cap);
  box-shadow:
    0 7px 0 var(--edge),
    0 12px 14px rgba(0, 0, 0, 0.35),
    inset 0 2px 1px rgba(255, 255, 255, 0.45),
    inset 0 -9px 0 rgba(0, 0, 0, 0.18);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.sc-face img {
  display: block;
}
.sc-key:hover .sc-face {
  transform: translateY(2px);
  box-shadow:
    0 5px 0 var(--edge),
    0 10px 12px rgba(0, 0, 0, 0.35),
    inset 0 2px 1px rgba(255, 255, 255, 0.45),
    inset 0 -9px 0 rgba(0, 0, 0, 0.18);
}
.sc-key:active .sc-face,
.sc-key.down .sc-face {
  transform: translateY(7px);
  box-shadow:
    0 0 0 var(--edge),
    0 3px 5px rgba(0, 0, 0, 0.35),
    inset 0 2px 1px rgba(255, 255, 255, 0.45),
    inset 0 -9px 0 rgba(0, 0, 0, 0.18);
}
.k-mail { --cap: #ea4335; --edge: #a92a20; }
.k-ig { --cap: linear-gradient(40deg, #f9a13a 3.67%, #ee2a7b 45.37%, #8134af 77.8%, #515bd4 96.33%); --edge: #8a1e57; }
.k-in { --cap: #0a66c2; --edge: #063f7a; }
.k-x,
.k-gh { --cap: #262525; --edge: #181818; }

.sc-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 30;
  margin: 0;
  padding: 10px 16px;
  border-radius: 10px;
  background: #f5f5f5;
  color: #242424;
  font: 500 14px/20px var(--sc-body);
  transform: translate(-50%, 12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.sc-toast.on {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* The shared nav sits on a dark page here. */
.sitenav--social .chip .t,
.sitenav--social .ntrk .chip {
  color: #f5f5f5;
}
.sitenav--social .ntrk .chip.on {
  background: #f5f5f5;
}
.sitenav--social .ntrk .chip.on .t {
  color: #242424;
}
.sitenav--social .tdot {
  background: #f5f5f5;
}
.sitenav--social .menubtn svg path {
  fill: #f5f5f5;
}

@media (max-width: 899.98px) {
  .sc-wrap {
    padding: 112px 20px 150px;
  }
  .sc-clouds {
    height: 300px;
  }
  .sc-cloud {
    width: 120%;
  }
  .sc-cloud.c1 { left: -55%; top: 40px; }
  .sc-cloud.c2 { left: 35%; top: 40px; }
  .sc-cloud.c3 { left: -10%; top: 120px; }
}

/* The five-key row needs about 1124px once the content clears the rail, so narrower
   screens use the stacked list. */
@media (max-width: 1159.98px) {
  .sc-panel {
    padding: 22px 20px 26px;
  }
  .sc-keys {
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
    margin-top: 18px;
  }
  .sc-col,
  .sc-col.above,
  .sc-col.below {
    display: grid;
    grid-template-columns: 85px 1fr;
    grid-template-rows: auto;
    align-items: center;
    justify-items: start;
    column-gap: 18px;
    width: auto;
  }
  .sc-col .sc-key,
  .sc-col.above .sc-key,
  .sc-col.below .sc-key {
    grid-row: 1;
    grid-column: 1;
    zoom: 0.72;
  }
  .sc-col .sc-note,
  .sc-col.above .sc-note,
  .sc-col.below .sc-note {
    grid-row: 1;
    grid-column: 2;
    align-items: flex-start;
    align-self: center;
    width: auto;
    padding: 0;
    text-align: left;
  }
  .sc-arrow {
    display: none;
  }
  .sc-note p {
    white-space: normal;
    font-size: 16px;
    line-height: 21px;
  }
  .sc-note br {
    display: none;
  }
  .sc-mail {
    gap: 0;
  }
  .sc-mail span {
    font-size: 13px;
    overflow-wrap: anywhere;
  }
}

/* From 800px the fixed left rail (about 140px wide) is shown; the content keeps 168px clear
   of both edges, so it stays centred and never scrolls under the rail. */
@media (min-width: 800px) {
  .sc-wrap {
    padding-inline: max(48px, calc(168px - max(0px, (100vw - 1216px) / 2)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .sc-face,
  .sc-toast {
    transition: none;
  }
}