/* Stable introductory panels. Only the sculptural mark responds to hover. */
.home-page .showcase-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  height: auto;
  max-width: 1020px;
  margin: 54px auto 0;
  text-align: left;
}

.home-page .showcase-cards > .showcase-card {
  --panel-light: #815135;
  --panel-base: #332015;
  --panel-dark: #1b1511;
  --mark-light: #ffdfb8;
  --mark-mid: #c58553;
  --mark-shade: #6a3e25;
  --panel-ink: #ecd6c6;
  display: grid;
  grid-template-rows: 20px 1fr 16px;
  gap: 16px;
  position: relative;
  isolation: isolate;
  height: 272px;
  min-height: 272px;
  min-width: 0;
  padding: 24px;
  border: 0;
  border-radius: 13px;
  color: #fff8f2;
  background:
    radial-gradient(ellipse at 97% -8%, var(--panel-light) 0%, transparent 66%),
    linear-gradient(147deg, var(--panel-base), var(--panel-dark) 79%);
  box-shadow: inset 0 1px 0 #ffffff15, inset 0 0 0 1px #ffffff08;
  transition: none;
  overflow: hidden;
  text-decoration: none;
}

.home-page .showcase-cards > .showcase-card::before,
.home-page .showcase-cards > .showcase-card::after {
  content: '';
  position: absolute;
  inset: auto;
  top: -43px;
  right: -28px;
  width: 277px;
  height: 277px;
  border-radius: 0;
  mask: url('/assets/brand.svg') center / contain no-repeat;
  -webkit-mask: url('/assets/brand.svg') center / contain no-repeat;
  pointer-events: none;
}

/* The offset silhouette is the dark cut edge of the same single K sculpture. */
.home-page .showcase-cards > .showcase-card::after {
  z-index: -2;
  background: linear-gradient(130deg, #090706, #110c09 48%, var(--mark-shade));
  transform: translate(5px, 7px) rotate(-12deg);
  filter: drop-shadow(0 14px 13px #00000068);
  opacity: .9;
}

.home-page .showcase-cards > .showcase-card::before {
  z-index: -1;
  background:
    linear-gradient(132deg, transparent 21%, #ffffff29 23%, transparent 26%, transparent 52%, #00000042 55%, transparent 59%),
    linear-gradient(128deg, var(--mark-shade) 5%, var(--mark-mid) 20%, var(--mark-light) 28%, var(--mark-mid) 35%, var(--mark-shade) 49%, var(--mark-mid) 60%, var(--panel-dark) 87%);
  opacity: .82;
  transform: rotate(-12deg);
  filter: drop-shadow(1px 1px 0 #ffffff25);
  transition: transform .6s cubic-bezier(.2,.65,.3,1), filter .6s ease, opacity .6s ease;
}

.home-page .showcase-cards > .showcase-card-interface {
  --panel-light: #4b4e54;
  --panel-base: #24262b;
  --panel-dark: #141619;
  --mark-light: #e2e3e7;
  --mark-mid: #8c9099;
  --mark-shade: #3a3d45;
  --panel-ink: #cfd0d6;
}

.home-page .showcase-cards > .showcase-card-social {
  --panel-light: #654755;
  --panel-base: #32212d;
  --panel-dark: #1c151e;
  --mark-light: #e4cbd8;
  --mark-mid: #aa7b95;
  --mark-shade: #53354b;
  --panel-ink: #dfccd9;
}

.home-page .showcase-card .showcase-card-label {
  position: relative;
  width: fit-content;
  align-self: start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--panel-ink);
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: .035em;
  white-space: nowrap;
}

.home-page .showcase-card .showcase-card-copy {
  align-self: end;
  position: relative;
  min-height: 121px;
  width: 100%;
}

.home-page .showcase-card .showcase-card-copy h3 {
  color: #fff9f5;
  font-size: 23px;
  line-height: 1.15;
  letter-spacing: -.025em;
  white-space: normal;
  margin: 0;
}

.home-page .showcase-card .showcase-card-copy p {
  display: block;
  color: var(--panel-ink);
  font-size: 13px;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: -.01em;
  max-width: 280px;
  margin: 10px 0 0;
  text-wrap: pretty;
}

.home-page .showcase-card .showcase-card-copy br { display: initial; }

.home-page .showcase-cards .showcase-card .showcase-card-bottom {
  display: flex;
  position: relative;
  align-items: center;
  align-self: end;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  color: var(--panel-ink);
  font-size: 11px;
  line-height: 16px;
  font-weight: 400;
  white-space: nowrap;
  opacity: .82;
}

.home-page .showcase-card .showcase-card-bottom .icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.home-page .showcase-cards > .showcase-card:focus-visible {
  outline: 2px solid #d65000;
  outline-offset: 4px;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .home-page .showcase-cards > .showcase-card:hover::before {
    opacity: .96;
    transform: translate(-3px, -3px) rotate(-10deg);
    filter: drop-shadow(1px 1px 0 #ffffff38) brightness(1.08);
  }
}

@media (max-width: 900px) and (min-width: 761px) {
  .home-page .showcase-cards { gap: 10px; }
  .home-page .showcase-cards > .showcase-card { padding: 20px; height: 286px; }
  .home-page .showcase-card .showcase-card-copy { min-height: 126px; }
  .home-page .showcase-card .showcase-card-copy h3 { font-size: 21px; }
  .home-page .showcase-card .showcase-card-copy p { font-size: 12px; }
  .home-page .showcase-card .showcase-card-bottom { font-size: 10px; }
}

@media (max-width: 760px) {
  .home-page .showcase-cards { grid-template-columns: 1fr; gap: 12px; margin-top: 35px; }
  .home-page .showcase-cards > .showcase-card {
    height: 250px;
    min-height: 250px;
    padding: 24px;
    gap: 16px;
  }
  .home-page .showcase-cards > .showcase-card::before,
  .home-page .showcase-cards > .showcase-card::after { top: -58px; right: -12px; width: 290px; height: 290px; }
  .home-page .showcase-card .showcase-card-copy { min-height: 121px; }
  .home-page .showcase-card .showcase-card-copy h3 { font-size: 25px; }
  .home-page .showcase-card .showcase-card-copy p { max-width: 300px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .showcase-cards > .showcase-card::before { transition: none; }
}