/* ------------------------------------------------------------------ tattoo pages
 * /birth-flower-tattoo/ and its twelve month pages (scripts/make-tattoo-pages.mjs).
 * The previews are dark ink on a clear background, so in dark mode they are
 * inverted to light ink rather than shipped twice. */
.tattoo-page { padding-block: var(--s-6) var(--s-9); }
.crumbs { margin-bottom: var(--s-6); }
.crumbs a { color: var(--ink-soft); }
.crumbs a, .tattoo-months p a, .tattoo-table a { display: inline-flex; align-items: center; min-height: 44px; }
.tattoo-page h1 { font-size: var(--t-4); max-width: 18ch; }
.tattoo-page .lede { margin-top: var(--s-5); max-width: 52ch; }
.tattoo-grid { display: grid; gap: var(--s-7); grid-template-areas: "text" "art" "body"; }
.tattoo-text { grid-area: text; }
.tattoo-art { grid-area: art; max-width: 30rem; }
.tattoo-art img, .tattoo-card img { display: block; width: 100%; height: auto; }
.tattoo-body { grid-area: body; max-width: 62ch; }
.tattoo-body h2 { font-size: var(--t-2); margin-top: var(--s-7); }
.tattoo-body h2:first-child { margin-top: 0; }
.tattoo-body h3 { font-size: var(--t-1); margin-top: var(--s-5); }
.tattoo-body p { margin-top: var(--s-3); }
.tattoo-body a:not(.btn), .tattoo-months a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }
.tattoo-buy { margin-top: var(--s-7); padding: var(--s-5); background: var(--paper-deep); border: 1px solid var(--border-firm); max-width: 30rem; }
.tattoo-buy .fine { margin-top: var(--s-3); }
.tattoo-months { margin-top: var(--s-9); padding-top: var(--s-6); border-top: 1px solid var(--border); }
.tattoo-months h2 { font-size: var(--t-2); margin-top: var(--s-6); }
.tattoo-months ul { list-style: none; padding: 0; margin-top: var(--s-4); display: grid; gap: var(--s-2) var(--s-5); grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.tattoo-months li a { display: inline-flex; align-items: center; min-height: 44px; }
.tattoo-hub-head { margin-bottom: var(--s-7); }
.tattoo .site-foot nav { display: flex; flex-wrap: wrap; column-gap: var(--s-5); }
.tattoo-cards { list-style: none; padding: 0; display: grid; gap: var(--s-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .tattoo-cards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .tattoo-cards { grid-template-columns: repeat(4, 1fr); } }
.tattoo-card { display: block; text-decoration: none; color: var(--ink); background: var(--paper); border: 1px solid var(--border-firm); box-shadow: var(--lift-1); }
.tattoo-card:hover { border-color: var(--accent); }
.tattoo-card__well { display: block; background: var(--paper-sink); padding: var(--s-3); }
.tattoo-card__label { display: block; padding: var(--s-3); font-size: var(--t--1); color: var(--ink-soft); }
.tattoo-card__label b { display: block; color: var(--ink); font-size: var(--t-0); }
.tattoo-hub-head + .tattoo-cards + .tattoo-body { margin-top: var(--s-8); }
.tattoo-table { overflow-x: auto; margin-top: var(--s-4); }
.tattoo-table table { border-collapse: collapse; width: 100%; font-size: var(--t--1); }
.tattoo-table th, .tattoo-table td { text-align: left; padding: 0 var(--s-3); border-bottom: 1px solid var(--border); }
.tattoo-table thead th { color: var(--ink-faint); font-weight: 600; }
@media (min-width: 900px) {
  .tattoo-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); grid-template-areas: "text art" "body art"; column-gap: var(--s-8); align-items: start; }
  .tattoo-art { position: sticky; top: var(--s-9); }
}
@media (prefers-color-scheme: dark) {
  .tattoo-art img, .tattoo-card img { filter: invert(1); }
}