/* Tattoo Art Customs — INTERIOR FACE, PASS 2 (2026-11-08).
   The pass that was never built. Pass 1 (dark.css) recolored the classic
   components; this layer REBUILDS them to the homepage's design system
   (home.css / the lp2 grammar: black field #0a0806, panel #171310, hairline
   #2b241c, bone text #f5efe4 / #e9e1cf, muted #a89a80, blood red #a31621,
   bright red #ff5a4e, TAC Brush display type, brush-edged buttons,
   photographic 4:5 cards, 1440px rhythm) under the CLASSIC CLASS NAMES
   every interior template already uses — .card, .design-card,
   .product-card, .two-col, .three-col, .form, tables, .badge, .tag,
   section heads — so every page whose route sets darkFace renders the
   updated system without a per-template rewrite.
   Loaded in layout.ejs immediately after dark.css, only when the route
   sets darkFace. Pages without darkFace (the OLD cream set) and the
   own-face systems (Brambleforce, Dawnfold, Little Inkers, Poppy & Ziggy,
   OneMind app, FillMyList) never load it and are untouched. The homepage
   does not set darkFace and is untouched.
   Visual system only: no layout structure, copy, or behavior changes
   beyond the design grammar (geometry, type, spacing, component shape). */

/* ============================ FIELD & TYPE ============================ */
body.page-dark {
  font-family: Arial, Helvetica, sans-serif;
}
body.page-dark main.container { max-width: 1440px; padding: 0 1.25rem; }
body.page-dark ::selection { background: var(--accent); color: #fff; }

/* Section heads take the brush, the way the home face's section grammar
   does (dark.css already brushes h1; h2 is the interior section head). */
body.page-dark h2 {
  font-family: 'TAC Brush', 'Arial Black', Arial, sans-serif;
  font-weight: 400; letter-spacing: .01em; line-height: 1.15;
}
body.page-dark h3 { letter-spacing: .01em; }
body.page-dark hr { border: none; border-top: 1px solid #2b241c; margin: 1.6em 0; }
body.page-dark blockquote {
  border-left: 3px solid var(--accent); margin: 1em 0; padding: .2em 0 .2em 1em;
  color: #d8cfbc;
}

/* Links on the dark field step up to the home face's bright red family —
   #a31621 body links are near-invisible on black. */
body.page-dark main a { color: #ffb3ab; }
body.page-dark main a:hover, body.page-dark main a:focus { color: #ff5a4e; }
body.page-dark main .btn, body.page-dark main .btn:hover, body.page-dark main .btn:focus { color: #fff; }

/* ============================ CARDS ============================ */
body.page-dark .card,
body.page-dark .product-card,
body.page-dark .discount-card,
body.page-dark .tattoo-entry,
body.page-dark .aftercare-promo,
body.page-dark .flow-explain,
body.page-dark .legal-box {
  border: 1px solid #2b241c; border-radius: 12px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}
body.page-dark .card { padding: 1.4rem; }
body.page-dark .legal-box { background: #171310; color: #e9e1cf; }
body.page-dark .flow-explain { background: #171310; }

/* ---- design cards: the lp2-card treatment under the classic name ----
   Photographic 4:5 art, hairline panel frame, hover zoom, dark floating
   heart / like chips with shadows — the homepage card grammar. */
body.page-dark .design-card {
  background: #14100d; border: 1px solid #2b241c; border-radius: 12px;
  overflow: hidden; box-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}
body.page-dark .design-card img {
  aspect-ratio: 4 / 5; background: #14100d;
  transition: transform .35s ease;
}
body.page-dark .design-card:hover img,
body.page-dark .design-card:focus-within img { transform: scale(1.045); }
body.page-dark .design-card .pad { padding: .9rem; }
body.page-dark .design-card h3 { color: #f5efe4; }
body.page-dark .design-card .fav-heart,
body.page-dark .design-card .like-count {
  background: rgba(12, 10, 8, .8); border-color: #2b241c; color: #f5efe4;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}
body.page-dark .design-card .fav-heart svg { stroke: #f5efe4; }
body.page-dark .design-card .fav-heart:hover svg { stroke: #ff5a4e; }
body.page-dark .design-card .fav-heart.on svg { fill: var(--accent); stroke: var(--accent); }
body.page-dark .top-loved-badge { background: var(--accent); color: #fff; border-radius: 999px; padding: .2em .7em; }
body.page-dark .love-count { color: #ff5a4e; }

/* ============================ BUTTONS ============================ */
/* .btn takes the .btn-brush shape: brush type, painted-stroke clip ends,
   uppercase, wide letterspacing. Secondary stays a dark panel button in
   the home header's UI voice (Arial bold uppercase). */
body.page-dark .btn {
  font-family: 'TAC Brush', 'Arial Black', Arial, sans-serif;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1.2;
  padding: .8em 2.1em; border-radius: 0;
  clip-path: polygon(2% 12%, 97% 0%, 100% 32%, 98.5% 88%, 60% 100%, 3% 96%, 0% 60%, 1% 30%);
  transition: background .15s ease, transform .15s ease;
}
body.page-dark .btn:hover, body.page-dark .btn:focus { transform: translateY(-1px); }
body.page-dark .btn-small { padding: .55em 1.5em; font-size: .85rem; min-height: 36px; }
body.page-dark .btn-big { padding: .95em 2.4em; font-size: 1.12rem; }
body.page-dark .btn-secondary, body.page-dark .btn.secondary,
body.page-dark button.secondary, body.page-dark input[type=submit].secondary {
  font-family: Arial, Helvetica, sans-serif; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  background: #221c16; color: #f5efe4; border: 1px solid #3a322a;
  clip-path: none; border-radius: 999px;
}
body.page-dark .btn-secondary:hover, body.page-dark .btn-secondary:focus,
body.page-dark .btn.secondary:hover, body.page-dark .btn.secondary:focus,
body.page-dark button.secondary:hover, body.page-dark button.secondary:focus {
  background: #2b241c; color: #fff;
}
body.page-dark .btn.danger, body.page-dark button.secondary.danger { background: #b3261e; color: #fff; border-color: #b3261e; clip-path: none; }
body.page-dark .btn-quiet { border-radius: 999px; padding: .55em 1.2em; }
body.page-dark .linklike { color: #ff8a7a; }

/* ============================ FORMS ============================ */
body.page-dark main label {
  font-family: Arial, Helvetica, sans-serif; font-weight: 700;
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  color: #d8cfbc;
}
body.page-dark main input[type='text'], body.page-dark main input[type='email'],
body.page-dark main input[type='password'], body.page-dark main input[type='url'],
body.page-dark main input[type='number'], body.page-dark main input[type='tel'],
body.page-dark main input[type='file'], body.page-dark main input[type='date'],
body.page-dark main input[type='search'],
body.page-dark main textarea, body.page-dark main select {
  border-radius: 10px; padding: .7em .9em; font-size: 1rem;
  font-family: Arial, Helvetica, sans-serif;
}
body.page-dark main input:focus, body.page-dark main textarea:focus,
body.page-dark main select:focus {
  border-color: var(--accent); outline: 2px solid rgba(163, 22, 33, .55); outline-offset: 1px;
}
body.page-dark main fieldset { border: 1px solid #3a322a; border-radius: 12px; padding: 1rem 1.2rem; }
body.page-dark main input[type='checkbox'], body.page-dark main input[type='radio'] { accent-color: var(--accent); }
body.page-dark .slot-grid button { border-radius: 12px; }

/* ============================ TABLES ============================ */
body.page-dark .table-wrap { border: 1px solid #2b241c; border-radius: 12px; overflow-x: auto; }
body.page-dark th {
  font-family: Arial, Helvetica, sans-serif; font-size: .78rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #d8cfbc;
  border-bottom: 1px solid #2b241c;
}
body.page-dark td { border-bottom-color: #2b241c; }
body.page-dark tbody tr:hover { background: #1d1712; }

/* ============================ CHIPS, BADGES, PRICES ============================ */
body.page-dark .tag {
  background: #221c16; border: 1px solid #2b241c; color: #e9e1cf;
  border-radius: 999px; padding: .15em .75em;
}
body.page-dark .badge { background: #221c16; border: 1px solid #2b241c; color: #e9e1cf; border-radius: 999px; }
body.page-dark .discount-code { background: #221c16; border-color: #a89a80; color: #f5efe4; border-radius: 10px; }
body.page-dark .price {
  font-family: 'TAC Brush', 'Arial Black', Arial, sans-serif; font-weight: 400;
  color: #ffb3ab; letter-spacing: .02em;
}
body.page-dark .sale-banner {
  font-family: 'TAC Brush', 'Arial Black', Arial, sans-serif; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; border-radius: 12px;
}
body.page-dark .chips .tag { margin: 0; }

/* ============================ FEEDBACK ============================ */
body.page-dark .notice, body.page-dark .error { border-radius: 12px; }
body.page-dark .flash { background: #3a2a10; border-color: #7a5a1d; color: #f0c987; border-radius: 12px; }

/* ============================ MEDIA & PROSE FURNITURE ============================ */
body.page-dark .detail-img { border: 1px solid #2b241c; border-radius: 12px; background: #14100d; }
body.page-dark .photo-item img { border-color: #2b241c; border-radius: 12px; }
body.page-dark .ad-slot img { border-color: #2b241c; border-radius: 12px; }
body.page-dark .house-ad { border-radius: 12px; box-shadow: 0 2px 14px rgba(0, 0, 0, .35); }
body.page-dark .thread li.mine { background: #241c14; }
body.page-dark .gallery-pagination { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: 1.2rem 0; }
body.page-dark .gallery-pagination a, body.page-dark .gallery-pagination span {
  border: 1px solid #3a322a; border-radius: 999px; padding: .35em 1em;
  color: #f5efe4; text-decoration: none;
}
body.page-dark .gallery-pagination a:hover, body.page-dark .gallery-pagination a:focus { background: #221c16; color: #ff5a4e; }
body.page-dark .gallery-pagination .current { background: var(--accent); border-color: var(--accent); color: #fff; }