.sp { padding-block: clamp(36px, 5vw, 66px); }
.sp__top { max-inline-size: 60ch; margin-block-end: clamp(26px, 3.5vw, 44px); }
.sp__deck { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: clamp(14px, 2vw, 24px); }
.sp__card { background: var(--white); border: 1px solid var(--line); padding: clamp(20px, 2.6vw, 32px); }
.sp__card--main { border-block-start: 6px solid var(--red); }
.sp__mail { font-family: var(--display); font-size: clamp(20px, 2.6vw, 30px); word-break: break-word; margin-block-end: 14px; }
.sp__mail a { text-decoration: none; color: var(--red); }
.sp__mail a:hover { text-decoration: underline; }
.sp__list { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; font-size: 15px; }
.sp__list li { padding-inline-start: 22px; position: relative; color: var(--ink-3); }
.sp__list li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 10px; inline-size: 11px; block-size: 3px; background: var(--red); }
.sp__card--desk { border-block-start: 6px solid var(--ink); }
.sp__post { font-style: normal; background: var(--paper-2); padding: 16px 18px; margin-block-end: 14px; line-height: 1.5; }
.sp__post b { display: block; font-family: var(--display); font-size: 17px; letter-spacing: 0.05em; text-transform: uppercase; margin-block-end: 6px; }
.sp__jump { font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); text-decoration: none; }
.sp__jump:hover { text-decoration: underline; }
.sp__note { margin-block-start: clamp(30px, 4vw, 52px); background: var(--ink); color: #c9ced4; padding: clamp(22px, 3vw, 36px); }
.sp__note h2 { color: #fff; }
.sp__hint { font-size: 15px; }
.sp__template { background: #17191c; border-inline-start: 4px solid var(--red); color: #e6e8ea; padding: 18px 20px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 14px; line-height: 1.8; overflow-x: auto; margin: 0 0 18px; }