/* about: who I am, an off-duty loadout, then experience and the patch bay */
.about {
  padding:clamp(80px,14vh,180px) 0 0;
  position:relative;
  color:var(--ink)
}
.about-h {
  font-size:clamp(44px,7vw,112px);
  line-height:.95;
  letter-spacing:-.02em
}
.about-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(32px,6vw,96px);
  margin:clamp(32px,6vh,72px) 0 clamp(64px,12vh,140px);
  align-items:start
}
.about-copy {
  /* the copy starts level with the loadout slots, not with the label above them */
  padding-top:45px
}
.about-copy p {
  font-size:clamp(20px,1.8vw,26px);
  line-height:1.4;
  max-width:34ch;
  margin:0 0 1em
}

/* loadout: six inventory slots and one detail panel */
.slots {
  display:grid;
  grid-template-columns:repeat(6,1fr)
}
.slots button {
  position:relative;
  aspect-ratio:1;
  min-height:64px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:10px;
  margin-left:-1px;
  border:1px solid var(--ink);
  background:transparent;
  color:var(--ink-2);
  font:500 var(--fs-label)/1 var(--mono);
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .3s,color .3s
}
.slots button:first-child {
  margin-left:0
}
.slots svg {
  width:clamp(22px,2.4vw,32px);
  height:auto;
  fill:currentColor
}
.slots svg {
  transition:transform .35s cubic-bezier(.16,1,.3,1)
}
.slots button:hover {
  color:var(--ink);
  background:color-mix(in srgb,var(--bone-2) 55%,transparent)
}
.slots button:hover svg {
  transform:translateY(-3px)
}
/* the open tab shares the panel's colour and drops its bottom edge, so tab and panel read as one card */
.slots button[aria-selected=true] {
  z-index:1;
  background:var(--bone-2);
  color:var(--ink);
  border-bottom-color:var(--bone-2);
  box-shadow:inset 0 3px 0 var(--signal)
}
.slots button[aria-selected=true] svg {
  fill:var(--signal)
}
.slots button:focus-visible {
  outline:2px solid var(--signal);
  outline-offset:3px
}
.slot-panels {
  border:1px solid var(--ink);
  margin-top:-1px;
  padding:clamp(22px,2.4vw,32px);
  min-height:180px;
  background:var(--bone-2)
}
.slot-panels h3 {
  font-size:clamp(26px,2.4vw,36px);
  line-height:1.05;
  margin:0 0 10px
}
.slot-panels a {
  color:inherit;
  text-decoration-color:var(--signal);
  text-underline-offset:.2em
}
.slot-panels p {
  margin:0;
  max-width:52ch;
  line-height:1.5;
  color:var(--ink-2)
}

/* easter eggs */
.strike {
  position:fixed;
  inset:0;
  z-index:200;
  pointer-events:none;
  animation:strike .7s ease-out forwards
}
.strike svg {
  width:100%;
  height:100%
}
.strike polyline {
  fill:none;
  stroke:#f4f9ff;
  stroke-width:4;
  filter:drop-shadow(0 0 3px #1f5fff) drop-shadow(0 0 14px #3d7bff) drop-shadow(0 0 40px #7fb2ff)
}
@keyframes strike {
  0% { background:rgba(140,180,255,.35); opacity:1 }
  15% { background:transparent }
  25% { background:rgba(140,180,255,.2) }
  100% { background:transparent; opacity:0 }
}
.msg.called .msg-text {
  border-bottom-color:var(--signal-ink);
  box-shadow:0 2px 0 var(--signal-ink)
}
@media(pointer:coarse) {
  .foot span:last-child {
    display:none
  }
}
kbd {
  font:inherit;
  border:1px solid currentColor;
  padding:0 .35em
}

@media(max-width:900px) {
  .about-grid {
    grid-template-columns:1fr
  }
  .about-copy {
    padding-top:0
  }
}
@media(max-width:520px) {
  .slots {
    grid-template-columns:repeat(3,1fr)
  }
  .slots button {
    aspect-ratio:auto;
    min-height:76px;
    margin-top:-1px
  }
  .slots button:nth-child(3n+1) {
    margin-left:0
  }
  .slots button[aria-selected=true] {
    border-bottom-color:var(--ink)
  }
  .slot-panels {
    margin-top:8px
  }
}