/* INK-MKT-ENGINE Ф3 (T3.3) — banner slots P1 (under hero) / P2 (after article body).
   Reserved box via aspect-ratio + width/height attrs -> CLS = 0. Campaign and house unit
   share the same box, so an unsold slot never collapses. Dark theme default. */
.ink-spot {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--article-body-width, 780px);
  margin: 32px auto;
  padding: 0 16px;
}
.article-body .ink-spot { padding: 0; margin: 40px 0 0; }
.ink-spot__box {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  background: var(--surface-2, #1a1a1a);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
}
.ink-spot--p1 .ink-spot__box { aspect-ratio: 16 / 5; }
.ink-spot--p2 .ink-spot__box { aspect-ratio: 4 / 3; max-width: 480px; margin: 0 auto; }
@media (max-width: 640px) { .ink-spot--has-mobile .ink-spot__box { aspect-ratio: 2 / 1; } }
.ink-spot__link, .ink-spot__link picture { display: block; width: 100%; height: 100%; }
.ink-spot__img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* P2 sits inside .article-body, whose generic img/a rules add margins, radius and underline */
.article-body .ink-spot__img { margin: 0; height: 100%; border-radius: 0; }
.article-body .ink-spot__link, .article-body .ink-spot__house { text-decoration: none; }
.ink-spot__label {
  /* above the creative, never on top of the advertiser's text */
  display: block;
  margin: 0 0 6px;
  font: 600 10px/1.4 var(--article-font-ui, system-ui, sans-serif);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: right;
  color: var(--text-tertiary, rgba(255, 255, 255, 0.45));
}
.ink-spot--p2 .ink-spot__label { max-width: 480px; margin-left: auto; margin-right: auto; }
[data-theme="light"] .ink-spot__label, html.light-theme .ink-spot__label { color: rgba(0, 0, 0, 0.45); }
[data-theme="light"] .ink-spot__box, html.light-theme .ink-spot__box { background: #f2f2f2; border-color: rgba(0, 0, 0, 0.08); }
/* ===== House units (INK-MKT-ENGINE) — iNKPPL's own promo plates =====================
   Editorial plates (design approved by Founder 31.10). Same reserved boxes (16:5, phone 2:1, 4:3):
   the box becomes a size container and the layout follows ITS aspect ratio, not the viewport.
   Art = inline SVG (aria-hidden), strokes in currentColor + gold ink -> themes for free. */
.ink-spot--house {
  --house-bg: var(--color-bg-editorial, #0E0E0E);
  --house-fg: var(--color-text, #F5F5F5);
  --house-meta: var(--color-text-secondary, #A3A3A3);
  --house-ink: var(--gold, #E8C547);          /* gold for text + marks (dark) */
  --house-glow: var(--gold-dim, rgba(232, 197, 71, 0.15));
  --house-line: 0.28;                          /* art hairline opacity */
}
[data-theme="light"] .ink-spot--house, html.light-theme .ink-spot--house {
  --house-bg: #FAFAFA;
  --house-fg: #111111;
  --house-meta: #5C5C5C;
  --house-ink: #7D6000;                        /* dark gold: 5.6:1 on #FAFAFA */
  --house-glow: rgba(232, 197, 71, 0.22);
  --house-line: 0.32;
}
.ink-spot--house .ink-spot__box { container: adhouse / size; background: var(--house-bg); }
[data-theme="light"] .ink-spot--house .ink-spot__box, html.light-theme .ink-spot--house .ink-spot__box { background: var(--house-bg); }
.ink-spot__house {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-decoration: none;
  color: var(--house-fg);
  background: radial-gradient(90% 130% at 100% 0%, var(--house-glow), transparent 62%), var(--house-bg);
}
.ink-spot__house-copy {
  position: absolute;
  z-index: 1;
  top: 0; bottom: 0; left: 0;
  width: 60%;
  box-sizing: border-box;
  padding: 8cqh 0 8cqh 6cqw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4cqh;
}
.ink-spot__house-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font: 500 clamp(9px, 5cqh, 12px)/1 var(--font-mono, ui-monospace, monospace);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--house-meta);
}
.ink-spot__house-brand::before { content: ""; width: 0.65em; height: 0.65em; background: var(--house-ink); }
.ink-spot__house-text {
  font: 400 clamp(16px, 10.5cqh, 34px)/1.08 var(--article-font-display, var(--font-display, Georgia, serif));
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--house-fg);
}
.ink-spot__house-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid currentColor;
  font: 600 clamp(12px, 5.6cqh, 15px)/1 var(--article-font-ui, var(--font-ui, system-ui, sans-serif));
  letter-spacing: 0.02em;
  color: var(--house-ink);
}
.ink-spot__house-arrow { font-style: normal; transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1); }
.ink-spot__house-art {
  position: absolute;
  top: 0; right: 0;
  width: 48%;
  height: 100%;
  display: block;
  margin: 0;
  max-width: none;
  color: var(--house-fg);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 34%); /* mask alpha only */
  mask-image: linear-gradient(90deg, transparent 0, black 34%);
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: 70% 50%;
}
.ink-spot__house-art .l { stroke: currentColor; stroke-opacity: var(--house-line); fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.ink-spot__house-art .t { fill: currentColor; fill-opacity: 0.5; font: 500 13px var(--font-mono, ui-monospace, monospace); }
.ink-spot__house-art .t2 { fill: currentColor; fill-opacity: 0.85; font: 400 64px var(--font-display, Georgia, serif); }
.ink-spot__house-art .g { stroke: var(--house-ink); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ink-spot__house-art .gf { fill: var(--house-ink); }
.ink-spot__house-art .p { fill: currentColor; fill-opacity: 0.55; }
.ink-spot__house:hover .ink-spot__house-art { transform: scale(1.03); }
.ink-spot__house:hover .ink-spot__house-arrow { transform: translateX(3px); }
.ink-spot__house:focus-visible { outline: 2px solid var(--house-ink); outline-offset: -4px; }
@media (prefers-reduced-motion: reduce) { .ink-spot__house-art, .ink-spot__house-arrow { transition: none; } }
/* CJK: no Hangul/Han in DM Serif -> heavy sans; never break Korean words mid-syllable block */
:lang(ko) .ink-spot__house-text, :lang(zh) .ink-spot__house-text {
  font-family: var(--article-font-ui, var(--font-ui, system-ui, sans-serif));
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.02em;
  word-break: keep-all;
}
:lang(zh) .ink-spot__house-text { word-break: normal; line-break: strict; }
/* P1 desktop 16:5 — wide band: copy left, art bleeds off the right edge */
@container adhouse (min-aspect-ratio: 5 / 2) {
  .ink-spot__house-copy { width: 55%; padding-left: 4.5cqw; }
  .ink-spot__house-text { font-size: clamp(18px, 12cqh, 36px); }
  .ink-spot__house-art { width: 45%; }
}
/* P2 4:3 — stacked: art fills the top, copy anchored bottom-left */
@container adhouse (max-aspect-ratio: 3 / 2) {
  .ink-spot__house-copy { top: auto; width: 100%; padding: 0 7cqw 7cqh; gap: 3cqh; justify-content: flex-end; }
  .ink-spot__house-text { font-size: clamp(18px, 7.4cqh, 30px); }
  .ink-spot__house-brand { font-size: clamp(9px, 3.2cqh, 12px); }
  .ink-spot__house-cta { font-size: clamp(12px, 3.8cqh, 15px); }
  .ink-spot__house-art { width: 100%; height: 60%; transform-origin: 50% 30%;
    -webkit-mask-image: linear-gradient(180deg, black 45%, transparent 100%);
    mask-image: linear-gradient(180deg, black 45%, transparent 100%); }
}
/* Network fallback (AdSense / РСЯ): the ad fills the reserved box, never resizes it (CLS = 0). */
.ink-spot__box > .ink-spot__net { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: hidden; }

/* Ф3 B4 — "Section supported by [Brand]" partner plate above the article text.
   Not a reserved slot: absent when unsold. Logo height fixed by attr + CSS (no CLS on load). */
.ink-mark { margin: 0 0 24px; }
.ink-mark__link {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  max-width: 100%;
  padding: 8px 12px;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  background: var(--surface-2, #1a1a1a);
  color: var(--text-secondary, rgba(255, 255, 255, 0.7));
  font: 500 13px/1.3 var(--article-font-ui, system-ui, sans-serif);
  text-decoration: none;
}
.article-body .ink-mark__link { text-decoration: none; }
.ink-mark__label {
  font: 600 10px/1.4 var(--article-font-ui, system-ui, sans-serif);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary, rgba(255, 255, 255, 0.45));
}
.ink-mark__logo-wrap { display: inline-flex; align-items: center; height: 28px; }
.ink-mark__logo, .article-body .ink-mark__logo {
  display: block;
  height: 28px;
  width: auto;
  max-width: 140px;
  margin: 0;
  border-radius: 4px;
  object-fit: contain;
}
.ink-mark__brand { font-weight: 700; color: var(--text-primary, #f2f2f2); }
.ink-mark__link:hover .ink-mark__brand { color: var(--accent, #e94560); }
[data-theme="light"] .ink-mark__link, html.light-theme .ink-mark__link { background: #f2f2f2; border-color: rgba(0, 0, 0, 0.08); color: rgba(0, 0, 0, 0.7); }
[data-theme="light"] .ink-mark__label, html.light-theme .ink-mark__label { color: rgba(0, 0, 0, 0.45); }
[data-theme="light"] .ink-mark__brand, html.light-theme .ink-mark__brand { color: #111; }

/* INK-MKT-ENGINE offer v4 B1/B2 (Founder 2026-10-30) — masters-by-geo listings and the catalog.
   ONE slot after the second row of cards: printed AFTER all cards and placed into grid row 3,
   spanning all columns (no card moves, no hole). Masters: 5/4/3/2 columns (breakpoints of
   masters-v2/listing.css); a breakpoint with fewer than 2 rows + 1 card carries
   ink-spot--off-{key} and hides the slot. Catalog: --cols (1..7, set on :root by
   tattoos-v2/listing.js) -> row after 2 x --cols cards, at least 4 cards (1 column -> row 5);
   plain integer first for browsers without CSS round(). */
.masters-grid > .ink-spot--row,
.masonry-grid > .ink-spot--row,
.masters-grid > .ink-spot--flow,
.masonry-grid > .ink-spot--flow {
  grid-column: 1 / -1;
  width: 100%;
  max-width: var(--article-body-width, 780px);
  margin: 8px auto;
  padding: 0;
}
.masters-grid > .ink-spot--row { grid-row: 3; }
.masonry-grid > .ink-spot--row {
  grid-row: 3;
  grid-row: max(3, round(up, 4 / var(--cols, 2), 1) + 1);
}
@media (min-width: 640px) {
  .masonry-grid > .ink-spot--row { grid-row: max(3, round(up, 4 / var(--cols, 3), 1) + 1); }
}
@media (min-width: 1280px) {
  .masonry-grid > .ink-spot--row { grid-row: max(3, round(up, 4 / var(--cols, 5), 1) + 1); }
}
/* SEO S1: tablets (768-1279px) show short catalog rows, so after 2 rows the slot was above the
   fold (768x1024, 820x1180, 1024x1366); there it goes after row 3. Server adds
   ink-spot--off-tab when the page has fewer than 3 x 4 + 1 cards. */
@media (min-width: 768px) and (max-width: 1279px) {
  .masonry-grid > .ink-spot--row { grid-row: 4; grid-row: max(4, round(up, 4 / var(--cols, 3), 1) + 2); }
  .ink-spot--off-tab { display: none; }
}
.masonry-grid > .ink-spot--row, .masonry-grid > .ink-spot--flow { margin: 4px auto 16px; }
@media (max-width: 768px) { .masters-grid > .ink-spot--row, .masters-grid > .ink-spot--flow { margin: 4px auto; } }
@media (min-width: 1401px) { .ink-spot--off-xl { display: none; } }
@media (min-width: 1101px) and (max-width: 1400px) { .ink-spot--off-lg { display: none; } }
@media (min-width: 769px) and (max-width: 1100px) { .ink-spot--off-md { display: none; } }
@media (max-width: 768px) { .ink-spot--off-sm { display: none; } }
/* Load-more slot (every second batch): full-width row after that batch's cards. A batch rarely
   ends on a full row (24 / 48 cards at 5 columns), so dense packing lets the next batch's first
   card fill the cell left before the slot instead of leaving a hole. Cards are all 1 x 1, so
   dense changes nothing else. */
.masters-grid:has(> .ink-spot--flow),
.masonry-grid:has(> .ink-spot--flow) { grid-auto-flow: row dense; }

/* INK-MKT-ENGINE offer v4 B3 — calculator plate, moved right after #tattoo-cost-result by an
   inline script; hidden while the result block is hidden; nothing printed when unsold. */
.ink-mark--calc { margin: 16px 0 0; }
.ink-mark--calc .ink-mark__link, .prose .ink-mark__link { text-decoration: none; color: var(--text-secondary, rgba(255, 255, 255, 0.7)); }
[data-theme="light"] .prose .ink-mark__link, html.light-theme .prose .ink-mark__link { color: rgba(0, 0, 0, 0.7); }
.calc-result--hidden + .ink-mark--calc { display: none; }