/* technique-v2.css, pages: techniki.html + technika-*.html
 Reuses .sn-r2-* (single-portfolio-v2.css) + .sn-kt2-* (category-v2.css)
 Adds .sn-tk2-* for technique-specific bits:
 - Hero photo grid (4 thumbnails)
 - Large technique cards (index page)
 - Photo-placeholder for Grawer UV
 - "Dla kogo i kiedy" checklist
 - Spec grid (detail page) */

.sn-tk2-main {
 background: var(--bone-100);
 color: var(--fg-on-light-1);
 --tk2-rule: rgba(20, 17, 13, 0.12);
 --tk2-rule-dark: rgba(255, 255, 255, 0.14);
}
.sn-tk2-main > .sn-r2-hero { padding-top: clamp(56px, 6vw, 88px); }

/* ─── HERO photo grid (4 thumbnails, 2x2), for techniki.html ─ */
.sn-tk2-hero-grid {
 position: relative;
 display: grid;
 grid-template-columns: 1fr 1fr;
 grid-template-rows: 1fr 1fr;
 aspect-ratio: 1 / 1;
 width: 100%;
 gap: 8px;
 background: var(--ink-900);
 padding: 8px;
 border-radius: var(--radius-tight);
 border: 1px solid rgba(255, 255, 255, 0.06);
}
.sn-tk2-hero-tile {
 position: relative;
 overflow: hidden;
 background: var(--ink-800);
 border-radius: 1px;
}
.sn-tk2-hero-tile img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
 transition: transform 600ms var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.sn-tk2-hero-tile:hover img { transform: scale(1.04); }
.sn-tk2-hero-tile-label {
 position: absolute;
 left: 12px; bottom: 12px;
 z-index: 2;
 font-family: var(--font-display);
 font-weight: 900;
 font-style: italic;
 font-size: 14px;
 color: #fff;
 letter-spacing: -0.01em;
 text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
 display: flex;
 flex-direction: column;
 gap: 2px;
}
.sn-tk2-hero-tile-no {
 font-family: var(--font-body);
 font-size: 9px;
 font-weight: 700;
 letter-spacing: var(--ls-eyebrow);
 text-transform: uppercase;
 color: var(--brass-400);
 font-style: normal;
}
.sn-tk2-hero-tile-overlay {
 position: absolute;
 inset: 0;
 background: linear-gradient(180deg, transparent 50%, rgba(20,17,13,0.55) 100%);
 pointer-events: none;
 z-index: 1;
}

/* Placeholder for the Grawer UV tile (no photo) */
.sn-tk2-hero-tile-placeholder {
 position: relative;
 background:
 radial-gradient(circle at 30% 30%, rgba(176, 144, 88, 0.15) 0%, transparent 60%),
 var(--ink-900);
 display: flex;
 align-items: center;
 justify-content: center;
 overflow: hidden;
}
.sn-tk2-hero-tile-placeholder::before {
 content: "";
 position: absolute;
 inset: 0;
 /* Subtle 'sandblast' specks */
 background-image:
 radial-gradient(circle at 20% 30%, rgba(255,255,255,0.04) 1px, transparent 1.5px),
 radial-gradient(circle at 70% 60%, rgba(255,255,255,0.03) 1px, transparent 1.5px),
 radial-gradient(circle at 40% 80%, rgba(255,255,255,0.05) 1px, transparent 1.5px),
 radial-gradient(circle at 80% 20%, rgba(255,255,255,0.04) 1px, transparent 1.5px),
 radial-gradient(circle at 50% 50%, rgba(255,255,255,0.03) 1px, transparent 1.5px);
 background-size: 80px 80px, 60px 60px, 90px 90px, 70px 70px, 50px 50px;
 background-position: 0 0, 25px 35px, 50px 10px, 15px 60px, 40px 25px;
 pointer-events: none;
}
.sn-tk2-hero-tile-placeholder-glyph {
 font-family: var(--font-display);
 font-weight: 900;
 font-style: italic;
 font-size: clamp(64px, 8vw, 112px);
 line-height: 0.85;
 color: rgba(255, 255, 255, 0.12);
 letter-spacing: -0.05em;
 position: relative;
 z-index: 1;
}

/* ─── INDEX page, large technique cards ─────────────── */
.sn-tk2-cards {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: clamp(20px, 2vw, 32px);
}
.sn-tk2-card {
 background: #fff;
 border: 1px solid var(--tk2-rule);
 border-radius: var(--radius-tight);
 overflow: hidden;
 display: flex;
 flex-direction: column;
 text-decoration: none;
 color: inherit;
 position: relative;
 transition: border-color 280ms var(--ease-out), transform 280ms var(--ease-out);
}
.sn-tk2-card:hover {
 border-color: var(--brass-500);
 transform: translateY(-3px);
}
.sn-tk2-card-photo {
 position: relative;
 aspect-ratio: 1 / 1;
 overflow: hidden;
 background: var(--ink-800);
}
.sn-tk2-card-photo img {
 width: 100%; height: 100%;
 object-fit: cover;
 display: block;
 transition: transform 600ms var(--ease-out);
}
.sn-tk2-card:hover .sn-tk2-card-photo img { transform: scale(1.03); }

/* Placeholder for cards without a photo */
.sn-tk2-card-placeholder {
 position: relative;
 background:
 radial-gradient(circle at 30% 30%, rgba(176, 144, 88, 0.12) 0%, transparent 60%),
 var(--ink-900);
 display: flex;
 align-items: center;
 justify-content: center;
 overflow: hidden;
}
.sn-tk2-card-placeholder::before {
 content: "";
 position: absolute;
 inset: 0;
 background-image:
 radial-gradient(circle at 20% 30%, rgba(255,255,255,0.04) 1px, transparent 1.5px),
 radial-gradient(circle at 70% 60%, rgba(255,255,255,0.03) 1px, transparent 1.5px),
 radial-gradient(circle at 40% 80%, rgba(255,255,255,0.05) 1px, transparent 1.5px),
 radial-gradient(circle at 80% 20%, rgba(255,255,255,0.04) 1px, transparent 1.5px);
 background-size: 80px 80px, 60px 60px, 90px 90px, 70px 70px;
 background-position: 0 0, 25px 35px, 50px 10px, 15px 60px;
 pointer-events: none;
}
.sn-tk2-card-placeholder-glyph {
 font-family: var(--font-display);
 font-weight: 900;
 font-style: italic;
 font-size: clamp(80px, 10vw, 160px);
 line-height: 0.85;
 color: rgba(255, 255, 255, 0.12);
 letter-spacing: -0.05em;
 position: relative;
 z-index: 1;
}
.sn-tk2-card-fig {
 position: absolute;
 top: 14px; left: 14px;
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 6px 10px;
 background: rgba(20, 17, 13, 0.82);
 backdrop-filter: blur(6px);
 -webkit-backdrop-filter: blur(6px);
 border-radius: var(--radius-tight);
 z-index: 2;
}
.sn-tk2-card-fig-no {
 font-family: var(--font-display);
 font-weight: 900; font-style: italic;
 font-size: 13px;
 color: var(--brass-400);
 letter-spacing: -0.01em;
}
.sn-tk2-card-fig-lbl {
 font-family: var(--font-body);
 font-size: 9px; font-weight: 700;
 letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
 color: var(--fg-on-dark-2);
}
.sn-tk2-card-tag {
 position: absolute;
 top: 14px; right: 14px;
 z-index: 2;
 font-family: var(--font-body);
 font-size: var(--fs-nano); font-weight: 700;
 letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
 color: #fff;
 background: var(--brass-500);
 padding: 6px 10px;
 border-radius: var(--radius-tight);
 line-height: 1;
}
.sn-tk2-card-body {
 padding: clamp(24px, 2.5vw, 32px);
 display: flex;
 flex-direction: column;
 gap: 12px;
 flex: 1;
}
.sn-tk2-card-name {
 font-family: var(--font-display);
 font-weight: 900;
 font-size: clamp(26px, 2.4vw, 36px);
 line-height: 1.05;
 letter-spacing: -0.025em;
 color: var(--fg-on-light-1);
 margin: 0;
 text-wrap: balance;
}
.sn-tk2-card-name em {
 font-style: italic;
 color: var(--brass-600);
 font-weight: 900;
}
.sn-tk2-card-tagline {
 font-family: var(--font-heading);
 font-size: clamp(14px, 1.2vw, 16px);
 line-height: 1.4;
 color: var(--fg-on-light-2);
 margin: 0;
 font-weight: 400;
 text-wrap: pretty;
}
.sn-tk2-card-meta {
 display: flex;
 flex-wrap: wrap;
 gap: 0;
 padding-top: 14px;
 border-top: 1px solid var(--tk2-rule);
 margin-top: auto;
}
.sn-tk2-card-meta-item {
 display: flex;
 flex-direction: column;
 gap: 2px;
 flex: 1;
 padding-right: 16px;
 border-right: 1px dotted var(--tk2-rule);
}
.sn-tk2-card-meta-item:last-child {
 border-right: 0;
 padding-right: 0;
}
.sn-tk2-card-meta-item:not(:first-child) { padding-left: 16px; }
.sn-tk2-card-meta-lbl {
 font-family: var(--font-body);
 font-size: 9px;
 font-weight: 700;
 letter-spacing: var(--ls-eyebrow);
 text-transform: uppercase;
 color: var(--brass-600);
}
.sn-tk2-card-meta-val {
 font-family: var(--font-display);
 font-weight: 700;
 font-style: italic;
 font-size: 16px;
 color: var(--fg-on-light-1);
 letter-spacing: -0.01em;
 font-variant-numeric: tabular-nums;
}
.sn-tk2-card-cta {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 font-family: var(--font-body);
 font-size: var(--fs-mini);
 font-weight: 700;
 letter-spacing: var(--ls-eyebrow);
 text-transform: uppercase;
 color: var(--brass-600);
 padding-top: 10px;
 transition: gap 220ms;
}
.sn-tk2-card-cta svg { width: 10px; height: 10px; transition: transform 220ms; }
.sn-tk2-card:hover .sn-tk2-card-cta { gap: 12px; }
.sn-tk2-card:hover .sn-tk2-card-cta svg { transform: translateX(3px); }

/* ─── INDEX page, comparison table ─────────────────── */
.sn-tk2-cmp {
 margin-top: clamp(28px, 3vw, 40px);
 border-top: 1px solid var(--tk2-rule-dark);
}
.sn-tk2-cmp-row {
 display: grid;
 grid-template-columns: 200px repeat(3, 1fr) 1.4fr;
 align-items: baseline;
 gap: clamp(16px, 1.5vw, 24px);
 padding: clamp(18px, 2vw, 24px) 0;
 border-bottom: 1px solid var(--tk2-rule-dark);
}
.sn-tk2-cmp-row-head .sn-tk2-cmp-cell {
 font-family: var(--font-body);
 font-size: var(--fs-nano);
 font-weight: 700;
 letter-spacing: var(--ls-loose);
 text-transform: uppercase;
 color: var(--brass-400);
}
.sn-tk2-cmp-cell {
 font-family: var(--font-heading);
 font-size: 14px;
 line-height: 1.45;
 color: var(--fg-on-dark-2);
 text-wrap: pretty;
}
.sn-tk2-cmp-cell-name {
 font-family: var(--font-display);
 font-weight: 700;
 font-style: italic;
 font-size: clamp(18px, 1.6vw, 22px);
 line-height: 1.1;
 letter-spacing: -0.015em;
 color: var(--fg-on-dark-1);
 margin: 0;
}
.sn-tk2-cmp-cell-val {
 font-family: var(--font-display);
 font-weight: 700;
 font-style: italic;
 font-size: 18px;
 color: var(--brass-400);
 letter-spacing: -0.01em;
 font-variant-numeric: tabular-nums;
}

/* ─── DETAIL page, hero photo (large, side of meta) ─ */
.sn-tk2-detail-photo {
 position: relative;
 aspect-ratio: 1 / 1;
 width: 100%;
 background: var(--ink-900);
 border-radius: var(--radius-tight);
 overflow: hidden;
 border: 1px solid rgba(255, 255, 255, 0.06);
}
.sn-tk2-detail-photo img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
}
.sn-tk2-detail-photo::after {
 content: "";
 position: absolute;
 inset: 0;
 background:
 linear-gradient(180deg, rgba(20,17,13,0.45) 0%, transparent 30%, transparent 65%, rgba(20,17,13,0.55) 100%);
 pointer-events: none;
 z-index: 1;
}
.sn-tk2-detail-photo-caption {
 position: absolute;
 left: clamp(20px, 2vw, 28px);
 right: clamp(20px, 2vw, 28px);
 bottom: clamp(18px, 2vw, 26px);
 z-index: 2;
 font-family: var(--font-display);
 font-style: italic;
 font-weight: 700;
 font-size: clamp(14px, 1.2vw, 17px);
 line-height: 1.2;
 letter-spacing: -0.01em;
 color: #fff;
 text-shadow: 0 1px 4px rgba(0,0,0,0.6);
 padding-top: 16px;
 border-top: 1px solid rgba(255,255,255,0.18);
}
.sn-tk2-detail-photo-stamp {
 position: absolute;
 top: clamp(20px, 2vw, 28px);
 right: clamp(20px, 2vw, 28px);
 z-index: 2;
 display: flex;
 flex-direction: column;
 align-items: flex-end;
 gap: 4px;
 text-align: right;
}
.sn-tk2-detail-photo-stamp-glyph {
 font-family: var(--font-display);
 font-weight: 900;
 font-style: italic;
 font-size: clamp(56px, 6.5vw, 88px);
 line-height: 0.85;
 letter-spacing: -0.04em;
 color: var(--brass-400);
 text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}
.sn-tk2-detail-photo-stamp-lbl {
 font-family: var(--font-body);
 font-size: var(--fs-nano);
 font-weight: 700;
 letter-spacing: var(--ls-loose);
 text-transform: uppercase;
 color: rgba(255, 255, 255, 0.88);
 text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

/* Placeholder treatment for grawer UV detail hero */
.sn-tk2-detail-placeholder {
 position: relative;
 background:
 radial-gradient(circle at 30% 30%, rgba(176, 144, 88, 0.18) 0%, transparent 60%),
 var(--ink-900);
 display: flex;
 align-items: center;
 justify-content: center;
 overflow: hidden;
}
.sn-tk2-detail-placeholder::before {
 content: "";
 position: absolute;
 inset: 0;
 background-image:
 radial-gradient(circle at 18% 32%, rgba(255,255,255,0.06) 1.5px, transparent 2px),
 radial-gradient(circle at 72% 58%, rgba(255,255,255,0.04) 1px, transparent 1.5px),
 radial-gradient(circle at 42% 82%, rgba(255,255,255,0.05) 1.2px, transparent 1.5px),
 radial-gradient(circle at 82% 22%, rgba(255,255,255,0.05) 1px, transparent 1.5px),
 radial-gradient(circle at 52% 52%, rgba(255,255,255,0.03) 1px, transparent 1.5px);
 background-size: 90px 90px, 70px 70px, 100px 100px, 80px 80px, 60px 60px;
 background-position: 0 0, 30px 40px, 60px 15px, 20px 70px, 50px 30px;
 pointer-events: none;
}
.sn-tk2-detail-placeholder-glyph {
 font-family: var(--font-display);
 font-weight: 900;
 font-style: italic;
 font-size: clamp(180px, 22vw, 360px);
 line-height: 0.85;
 color: rgba(255, 255, 255, 0.05);
 letter-spacing: -0.06em;
 position: relative;
 z-index: 1;
 text-align: center;
}
.sn-tk2-detail-placeholder-note {
 position: absolute;
 left: clamp(20px, 2vw, 28px);
 bottom: clamp(18px, 2vw, 26px);
 z-index: 2;
 font-family: var(--font-body);
 font-size: var(--fs-mini);
 letter-spacing: 0.04em;
 color: rgba(255, 255, 255, 0.45);
 font-style: italic;
}

/* ─── DETAIL page, editorial body section ──────────── */
.sn-tk2-body {
 padding: clamp(72px, 8vw, 112px) 0;
 background: var(--bone-100);
}
.sn-tk2-body-layout {
 display: grid;
 grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
 gap: clamp(40px, 5vw, 88px);
 align-items: start;
}
.sn-tk2-body-side .sn-r2-chap-head { margin-bottom: clamp(20px, 2vw, 28px); }
.sn-tk2-body-h {
 font-family: var(--font-display);
 font-weight: 900;
 font-size: clamp(32px, 4vw, 56px);
 line-height: 1.05;
 letter-spacing: -0.025em;
 color: var(--fg-on-light-1);
 margin: 0 0 clamp(20px, 2vw, 28px);
 max-width: 16ch;
 text-wrap: balance;
}
.sn-tk2-body-h em {
 font-style: italic;
 color: var(--brass-600);
 font-weight: 900;
}
.sn-tk2-body-content {
 display: flex;
 flex-direction: column;
 gap: clamp(18px, 2vw, 24px);
}
.sn-tk2-body-content p {
 font-family: var(--font-heading);
 font-weight: 400;
 font-size: clamp(15px, 1.2vw, 17px);
 line-height: 1.65;
 color: var(--fg-on-light-2);
 margin: 0;
 text-wrap: pretty;
}
.sn-tk2-body-content p strong {
 color: var(--fg-on-light-1);
 font-weight: 600;
}
.sn-tk2-body-content p em {
 font-style: italic;
 color: var(--brass-600);
 font-weight: 500;
}
.sn-tk2-body-dropcap {
 float: left;
 font-family: var(--font-display);
 font-weight: 900;
 font-style: italic;
 font-size: clamp(64px, 6.5vw, 92px);
 line-height: 0.82;
 color: var(--brass-600);
 padding: 4px 14px 0 0;
 letter-spacing: -0.05em;
 shape-outside: margin-box;
}

/* ─── DETAIL page, pull quote (in body, italic display) ──── */
.sn-tk2-pull {
 padding: clamp(80px, 9vw, 120px) 0;
 background: var(--ink-900);
 color: var(--fg-on-dark-1);
 position: relative;
}
.sn-tk2-pull-inner {
 max-width: 920px;
 margin: 0 auto;
 text-align: center;
}
.sn-tk2-pull-glyph {
 font-family: var(--font-display);
 font-weight: 900;
 font-style: italic;
 font-size: clamp(64px, 8vw, 120px);
 line-height: 0.8;
 color: var(--brass-500);
 opacity: 0.35;
 margin: 0 0 -20px;
}
.sn-tk2-pull-q {
 font-family: var(--font-display);
 font-weight: 700;
 font-style: italic;
 font-size: clamp(26px, 3vw, 42px);
 line-height: 1.2;
 letter-spacing: -0.02em;
 color: var(--fg-on-dark-1);
 margin: 0 0 clamp(20px, 2vw, 28px);
 text-wrap: balance;
}
.sn-tk2-pull-q em {
 color: var(--brass-400);
}
.sn-tk2-pull-credit {
 font-family: var(--font-body);
 font-size: 12px;
 font-weight: 700;
 letter-spacing: var(--ls-eyebrow);
 text-transform: uppercase;
 color: var(--brass-400);
}

/* ─── DETAIL page, "Dla kogo i kiedy" checklist ───── */
.sn-tk2-when {
 padding: clamp(72px, 8vw, 112px) 0;
 background: var(--bone-100);
}
.sn-tk2-when-layout {
 display: grid;
 grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
 gap: clamp(40px, 5vw, 88px);
 align-items: start;
}
.sn-tk2-when-side .sn-tk2-body-h { max-width: 18ch; }
.sn-tk2-when-list {
 list-style: none;
 margin: 0;
 padding: 0;
 border-top: 1px solid var(--tk2-rule);
}
.sn-tk2-when-item {
 display: grid;
 grid-template-columns: 36px 1fr;
 gap: 20px;
 align-items: center;
 padding: clamp(16px, 1.8vw, 22px) 0;
 border-bottom: 1px solid var(--tk2-rule);
 font-family: var(--font-heading);
 font-size: clamp(15px, 1.3vw, 18px);
 line-height: 1.4;
 color: var(--fg-on-light-1);
}
.sn-tk2-when-num {
 font-family: var(--font-display);
 font-weight: 900;
 font-style: italic;
 font-size: 22px;
 line-height: 1;
 color: var(--brass-600);
 letter-spacing: -0.02em;
 font-variant-numeric: tabular-nums;
}
.sn-tk2-when-keyadv {
 margin-top: clamp(28px, 3vw, 40px);
 padding: clamp(24px, 2.5vw, 32px);
 background: var(--ink-900);
 color: var(--fg-on-dark-1);
 border-radius: var(--radius-tight);
 display: flex;
 flex-direction: column;
 gap: 10px;
}
.sn-tk2-when-keyadv-tag {
 font-family: var(--font-body);
 font-size: var(--fs-nano);
 font-weight: 700;
 letter-spacing: var(--ls-loose);
 text-transform: uppercase;
 color: var(--brass-400);
}
.sn-tk2-when-keyadv-text {
 font-family: var(--font-display);
 font-weight: 700;
 font-style: italic;
 font-size: clamp(18px, 1.6vw, 22px);
 line-height: 1.3;
 letter-spacing: -0.01em;
 color: var(--fg-on-dark-1);
 margin: 0;
 text-wrap: pretty;
}

/* ─── DETAIL page, Spec ladder (dark) ────────────── */
.sn-tk2-specs {
 padding: clamp(72px, 8vw, 112px) 0;
 background: var(--ink-900);
 color: var(--fg-on-dark-1);
}
.sn-tk2-specs-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 0;
 border-top: 1px solid var(--tk2-rule-dark);
 border-left: 1px solid var(--tk2-rule-dark);
}
.sn-tk2-spec {
 padding: clamp(28px, 3vw, 40px);
 border-right: 1px solid var(--tk2-rule-dark);
 border-bottom: 1px solid var(--tk2-rule-dark);
 display: flex;
 flex-direction: column;
 gap: 6px;
}
.sn-tk2-spec-lbl {
 font-family: var(--font-body);
 font-size: var(--fs-nano);
 font-weight: 700;
 letter-spacing: var(--ls-loose);
 text-transform: uppercase;
 color: var(--brass-400);
}
.sn-tk2-spec-val {
 font-family: var(--font-display);
 font-weight: 900;
 font-style: italic;
 font-size: clamp(20px, 2vw, 28px);
 line-height: 1.1;
 letter-spacing: -0.02em;
 color: var(--fg-on-dark-1);
 font-variant-numeric: tabular-nums;
 text-wrap: balance;
}

/* ─── DETAIL page, Related realizacje (3 cards) ─── */
.sn-tk2-related {
 padding: clamp(72px, 8vw, 112px) 0;
 background: var(--bone-100);
}
.sn-tk2-related-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: clamp(20px, 2vw, 28px);
}
.sn-tk2-rcard {
 display: flex;
 flex-direction: column;
 text-decoration: none;
 color: inherit;
 transition: transform 280ms var(--ease-out);
}
.sn-tk2-rcard:hover { transform: translateY(-3px); }
.sn-tk2-rcard-photo {
 position: relative;
 aspect-ratio: 1 / 1;
 overflow: hidden;
 background: var(--ink-800);
 border: 1px solid var(--tk2-rule);
 border-radius: var(--radius-tight);
}
.sn-tk2-rcard-photo img {
 width: 100%; height: 100%;
 object-fit: cover;
 display: block;
 transition: transform 600ms var(--ease-out);
}
.sn-tk2-rcard:hover .sn-tk2-rcard-photo img { transform: scale(1.04); }
.sn-tk2-rcard-fig {
 position: absolute;
 top: 12px; left: 12px;
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 5px 9px;
 background: rgba(20, 17, 13, 0.82);
 backdrop-filter: blur(6px);
 -webkit-backdrop-filter: blur(6px);
 border-radius: var(--radius-tight);
 z-index: 2;
}
.sn-tk2-rcard-fig-no {
 font-family: var(--font-display);
 font-weight: 900; font-style: italic;
 font-size: 12px;
 color: var(--brass-400);
}
.sn-tk2-rcard-fig-lbl {
 font-family: var(--font-body);
 font-size: 9px; font-weight: 700;
 letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
 color: var(--fg-on-dark-2);
}
.sn-tk2-rcard-body {
 padding: 16px 4px 0;
 display: flex;
 flex-direction: column;
 gap: 4px;
}
.sn-tk2-rcard-name {
 font-family: var(--font-display);
 font-weight: 700;
 font-style: italic;
 font-size: 18px;
 line-height: 1.15;
 letter-spacing: -0.015em;
 color: var(--fg-on-light-1);
 margin: 0;
}
.sn-tk2-rcard-meta {
 font-family: var(--font-body);
 font-size: 12px;
 color: var(--fg-on-light-3);
 margin: 0;
}

/* ─── Responsive ──────────────────────────────────── */
@media (max-width: 1000px) {
 .sn-tk2-cards { grid-template-columns: 1fr; }
 .sn-tk2-body-layout,
 .sn-tk2-when-layout { grid-template-columns: 1fr; }
 .sn-tk2-specs-grid { grid-template-columns: repeat(2, 1fr); }
 .sn-tk2-related-grid { grid-template-columns: 1fr; }
 .sn-tk2-cmp-row { grid-template-columns: 160px repeat(2, 1fr); gap: 12px; row-gap: 4px; }
 .sn-tk2-cmp-row > *:nth-child(n+4) { grid-column: 2 / -1; }
}
@media (max-width: 720px) {
 .sn-tk2-specs-grid { grid-template-columns: 1fr; }
 .sn-tk2-cmp-row { grid-template-columns: 1fr; }
 .sn-tk2-cmp-row .sn-tk2-cmp-cell::before {
 content: attr(data-label) " · ";
 font-family: var(--font-body);
 font-size: var(--fs-nano);
 font-weight: 700;
 letter-spacing: var(--ls-eyebrow);
 text-transform: uppercase;
 color: var(--brass-600);
 }
 .sn-tk2-cmp-row-head { display: none; }
}