/* partners.css — owned by the shophouse lane. */
.shop { position: absolute; display: block; text-decoration: none; }
.shop > .led, .shop > .px { display: block; }

/* The real logo on the signboard's cream panel (the frame, bolts and keyline are LED art in the canvas).
   Callers that only set top/height (the LEARN flagship) get the same 9-unit side insets and a 1.5-unit inset. */
.shop-plate {
  position: absolute; left: calc(var(--p) * 9); right: calc(var(--p) * 9); display: block; overflow: hidden;
  border: calc(var(--p) * 1.5) solid transparent; border-width: calc(var(--p) * 1.5) 0; background-clip: padding-box;
  background-color: #f2ecd8;
  background-image: radial-gradient(circle, rgba(120, 100, 50, .07) 38%, transparent 42%);
  background-size: var(--p) var(--p);
  box-shadow: inset 0 0 0 1px rgba(80, 60, 20, .18);
  padding: calc(var(--p) * .6) calc(var(--p) * 2);
}
.shop-plate[style*="width"] { border-width: 0; } /* our own plates are placed exactly on the inner panel */
.shop-plate img { display: block; width: 100%; height: 100%; object-fit: contain; }
.shop:hover .shop-plate, .shop:focus-visible .shop-plate { outline: 2px solid var(--green); outline-offset: calc(var(--p) * 1.5); }

/* warm light: a halo round each pendant lamp, and the pool it throws onto the street */
.shop-glow {
  position: absolute; width: calc(var(--p) * 7); height: calc(var(--p) * 7); translate: -50% -50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 220, 140, .45) 0, rgba(255, 180, 90, .16) 38%, rgba(255, 170, 80, 0) 70%);
}
.shop-spill {
  position: absolute; left: 4%; right: 4%; bottom: calc(var(--p) * -9); height: calc(var(--p) * 10); pointer-events: none;
  background: radial-gradient(ellipse 50% 60% at 50% 0, rgba(255, 196, 110, .17), rgba(255, 196, 110, 0));
}
.lamp-glow {
  position: absolute; width: calc(var(--p) * 22); height: calc(var(--p) * 22); translate: -50% 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 222, 140, .42) 0, rgba(255, 190, 100, .16) 30%, rgba(255, 180, 90, 0) 66%);
}
.lamp-spill {
  position: absolute; width: calc(var(--p) * 30); height: calc(var(--p) * 8); translate: -50% 100%; pointer-events: none;
  background: radial-gradient(ellipse 50% 55% at 50% 0, rgba(255, 207, 110, .2), rgba(255, 207, 110, 0));
}

/* LEARN's flagship note (kept here for the shared .chalk class) */
.chalk { position: absolute; right: 9%; padding: 5px 7px; background: #1d2a22; border: 3px solid #6b4a24; color: var(--paper); font: 500 11px/1.25 var(--f-pixel); max-width: 30%; }

/* The partners introduction follows the existing community heading. */
.partners-heading { color: var(--paper); pointer-events: none; text-shadow: 0 2px 2px #080e0b, 0 0 8px #080e0b; }
.partners-kicker { margin: 0 0 8px; font: 600 13px/1.3 var(--f-mono); letter-spacing: .16em; color: var(--mint); }
.partners-heading h2 { margin: 0; font: 700 clamp(40px, 4.8vw, 78px)/1.02 var(--f-pixel); color: #dbf3df; }
.partners-sub { margin: 10px 0 0; color: #b7c6ba; font: 500 clamp(15px, 1.5vw, 23px)/1.4 var(--f-pixel); }
@media (max-width: 767px) {
  .partners-heading h2 { font-size: 32px; }
  .partners-sub { max-width: 310px; font-size: 15px; }
}
@media (max-height: 600px) {
  .partners-heading h2 { font-size: 24px; }
  .partners-kicker, .partners-sub { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}