/* Surcam Parts by Connection */
.spc { --spc-ink: #0e1213; --spc-ink-2: #4b5458; --spc-line: rgba(14, 18, 19, .1); --spc-accent: #03695e; --spc-plate: #ffffff; --spc-ease: cubic-bezier(0.23, 1, 0.32, 1);
	box-sizing: border-box; width: 100%; max-width: 1240px; margin-inline: auto; color: var(--spc-ink); font-family: "IBM Plex Sans", system-ui, sans-serif; }
.spc *, .spc *::before, .spc *::after { box-sizing: border-box; }
.spc h2, .spc h3, .spc p, .spc ol, .spc figure { margin: 0; padding: 0; }
.spc ol { list-style: none; }
.spc__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }
.spc__title { max-width: 14ch; font-size: 64px; font-weight: 600; line-height: 1.02; letter-spacing: -.022em; color: var(--spc-ink); }
.spc__lede { max-width: 36ch; font-size: 21px; line-height: 1.45; color: var(--spc-ink-2); }
.spc__seg { margin-top: 40px; display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(14, 18, 19, .05); box-shadow: inset 0 0 0 1px var(--spc-line); }
.spc__seg button { min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: none; color: var(--spc-ink-2); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--spc-ease); }
.spc__seg button[aria-pressed="true"] { background: var(--spc-ink); color: #fff; }
.spc__seg button:active { transform: scale(.97); }
.spc__grid { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 64px; align-items: start; }
.spc__aside { position: sticky; top: 108px; display: grid; gap: 10px; }
.spc__plate { position: relative; aspect-ratio: 1; border-radius: 32px; overflow: hidden; background: var(--spc-plate); box-shadow: 0 0 0 1px var(--spc-line), 0 30px 60px -48px rgba(14, 18, 19, .4); }
.spc__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(.985); transition: opacity 260ms ease, transform 360ms var(--spc-ease); }
.spc__img[data-kind="contain"] { padding: 14% 14% 20%; object-fit: contain; }
.spc__img.is-on { opacity: 1; transform: none; }
.spc__cap { position: absolute; left: 16px; bottom: 16px; padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, .92); color: var(--spc-ink); font-size: 14px; opacity: 0; transform: translateY(4px); transition: opacity 200ms ease, transform 260ms var(--spc-ease); }
.spc__plate.has-cap .spc__cap { opacity: 1; transform: none; }
.spc__sys { margin-top: 12px; font-size: 26px; font-weight: 600; letter-spacing: -.012em; }
.spc__note { color: var(--spc-ink-2); font-size: 16px; }
.spc__all { justify-self: start; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; color: var(--spc-accent); font-weight: 600; text-decoration: none; }
.spc__count { color: var(--spc-ink); }
.spc__list { border-top: 1px solid var(--spc-line); }
.spc__list a { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 24px; align-items: baseline; padding: 22px 4px; border-bottom: 1px solid var(--spc-line); color: var(--spc-ink); text-decoration: none; }
.spc__name { font-size: 24px; font-weight: 600; letter-spacing: -.012em; transition: color 160ms ease; }
.spc__n { white-space: nowrap; color: var(--spc-ink-2); font-size: 14px; }
.spc__n b { color: var(--spc-ink); font-size: 16px; font-weight: 600; }
.spc__go { align-self: center; width: 18px; height: 18px; fill: none; stroke: #6f7a7e; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke 160ms ease, transform 220ms var(--spc-ease); }
.spc__text { grid-column: 1 / -1; max-width: 64ch; color: var(--spc-ink-2); font-size: 15px; line-height: 1.5; }
.spc__list a:focus-visible { outline: 2px solid var(--spc-accent); outline-offset: 2px; }
.spc__list a:focus-visible .spc__name { color: var(--spc-accent); }
@media (hover: hover) and (pointer: fine) {
	.spc__list a:hover .spc__name { color: var(--spc-accent); }
	.spc__list a:hover .spc__go { stroke: var(--spc-accent); transform: translateX(4px); }
	.spc__all:hover .spc__go { transform: translateX(3px); }
	.spc__seg button:not([aria-pressed="true"]):hover { color: var(--spc-ink); }
}
@media (max-width: 1024px) { .spc__title { font-size: 48px; } }
@media (max-width: 960px) {
	.spc__grid { grid-template-columns: minmax(0, 1fr); }
	.spc__aside { position: static; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 4px 18px; }
	.spc__plate { grid-row: span 2; border-radius: 20px; }
	.spc__cap { display: none; }
	.spc__sys { margin-top: 0; align-self: end; font-size: 20px; }
	.spc__note { align-self: start; font-size: 15px; }
	.spc__all { grid-column: 1 / -1; margin-top: 10px; }
}
@media (max-width: 767px) { .spc__title { font-size: 38px; } .spc__lede { font-size: 18px; } .spc__name { font-size: 20px; } }