/* Dating articles: one stylesheet for all four brands (same files are served on every domain).
   <html data-brand="..."> is set in the page (the article's own brand) and replaced by the domain's
   brand by a tiny script in the <head>. Colors come from /styles.css tokens. */

/* ---------- Brand tokens ---------- */
html,
html[data-brand="all"],
html[data-brand="primetime"],
.art-group[data-group="primetime"] {
  --accent: #c9a227; --btn-bg: var(--gold-fill); --btn-fg: var(--dark-ink); --btn-hover: var(--gold-hover);
  --stripe: linear-gradient(90deg, #b8861b, #c9a227);
}
html[data-brand="nowornever"],
.art-group[data-group="nowornever"] {
  --accent: #e3607f; --btn-bg: var(--garnet); --btn-fg: #fff; --btn-hover: var(--garnet-hover);
  --stripe: linear-gradient(90deg, #8e1b3a, #e3607f);
}
html[data-brand="pridetime"],
.art-group[data-group="pridetime"] {
  --accent: #b48fd0; --btn-bg: var(--gold-fill); --btn-fg: var(--dark-ink); --btn-hover: var(--gold-hover);
  --stripe: linear-gradient(90deg, #8e1b3a 0 16.66%, #a8552a 16.66% 33.33%, #c9a227 33.33% 50%, #0b5c46 50% 66.66%, #27476e 66.66% 83.33%, #5a2a5e 83.33%);
}
html[data-brand="420sd"],
.art-group[data-group="420sd"] {
  --accent: #4fbf90; --btn-bg: var(--emerald); --btn-fg: #fff; --btn-hover: var(--emerald-hover);
  --stripe: linear-gradient(90deg, #0b5c46, #4fbf90);
}

/* Brand name / tag: show only the span for the current brand */
[data-b] { display: none; }
html[data-brand="all"] [data-b="all"],
html[data-brand="primetime"] [data-b="primetime"],
html[data-brand="nowornever"] [data-b="nowornever"],
html[data-brand="pridetime"] [data-b="pridetime"],
html[data-brand="420sd"] [data-b="420sd"] { display: inline; }

.brand__tag, .footer-tag { color: var(--accent); }
.brand-stripe { height: 4px; background: var(--stripe); }
.btn--brand, .btn--brand:hover { color: var(--btn-fg); }
.btn--brand { background: var(--btn-bg); }
.btn--brand:hover { background: var(--btn-hover); }

/* ---------- Article ---------- */
.art { padding: 52px 0 72px; }
.art__wrap { max-width: 760px; margin: 0 auto; padding: 0 20px; }
.art__crumbs { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--ink-72); margin-bottom: 26px; }
.art__crumbs a { color: var(--ink-72); }
.art__crumbs a:hover { color: var(--accent); }
.art .kicker, .art-index .kicker, .art-group .kicker { color: var(--accent); }
.art__title { font-size: clamp(32px, 6vw, 54px); line-height: 1.08; margin: 0 0 18px; overflow-wrap: break-word; }
.art__meta { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--ink-72); margin: 0 0 28px; }
.art__cover { margin: 0 0 36px; }
.art__cover img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--hair); background: var(--panel); }

.art__body { font-size: 18px; line-height: 1.75; color: rgba(244, 241, 236, 0.86); overflow-wrap: break-word; }
.art__body p { margin: 0 0 20px; }
.art__body h2 { font-size: clamp(26px, 4.4vw, 34px); line-height: 1.15; margin: 46px 0 16px; color: var(--ink); }
.art__body h3 { font-size: clamp(20px, 3.4vw, 24px); line-height: 1.25; margin: 30px 0 10px; color: var(--ink); }
.art__body ul, .art__body ol { margin: 0 0 22px; padding-left: 22px; }
.art__body li { margin: 0 0 10px; padding-left: 4px; }
.art__body li::marker { color: var(--accent); font-weight: 700; }
.art__body b, .art__body strong { color: var(--ink); font-weight: 700; }
.art__body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.art__body a:hover { color: var(--ink); }
.art__body blockquote { margin: 28px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--accent); font-family: var(--display); font-size: 22px; line-height: 1.4; color: var(--ink); }
.art__body table { width: 100%; border-collapse: collapse; margin: 0 0 24px; display: block; overflow-x: auto; font-size: 16px; }
.art__body th, .art__body td { border: 1px solid var(--hair); padding: 10px 12px; text-align: left; vertical-align: top; }

.art__question { position: relative; margin: 44px 0 30px; padding: 30px 24px 26px; background: var(--panel); border: 1px solid var(--hair); }
.art__question::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 4px; background: var(--stripe); }
.art__question .label { color: var(--accent); margin-bottom: 12px; font-size: 11px; }
.art__question p { font-family: var(--display); font-size: clamp(21px, 3.6vw, 27px); line-height: 1.35; margin: 0; color: var(--ink); }
.art__cta { margin: 0; }
.art__cta .btn { max-width: 100%; white-space: normal; }
.art__soon { font-size: 15px; line-height: 1.6; color: var(--ink-72); margin: 16px 0 0; }
.art__soon a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.art__more { margin-top: 56px; padding-top: 30px; border-top: 2px solid var(--rule); }
.art__more .label { font-family: var(--body); font-size: 11px; margin: 0 0 18px; color: var(--accent); }
.art__more ul { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 2px; background: var(--grid-line); border: 1px solid var(--grid-line); }
.art__more li a { display: block; padding: 18px 20px; background: var(--panel); color: var(--ink); font-family: var(--display); font-size: 19px; line-height: 1.3; }
.art__more li a:hover { background: #1d191b; color: var(--accent); }
.art__more .text-link { color: var(--accent); }
.art__network { margin: 36px 0 0; font-size: 14px; color: var(--ink-72); overflow-wrap: anywhere; }
.art__network a { color: var(--accent); }

/* ---------- Index ---------- */
.art-index__head { max-width: 900px; }
.art-index__title { font-size: clamp(34px, 5.4vw, 62px); line-height: 1.06; margin: 0 0 22px; }
.art-group + .art-group { margin-top: 72px; }
.art-group__head { margin-bottom: 26px; max-width: 760px; }
.art-group__head .kicker { margin-bottom: 12px; }
.art-group__blurb { font-size: 16px; line-height: 1.6; color: var(--ink-72); margin: 12px 0 0; }
.art-group__here { display: inline-block; margin-left: 10px; padding: 3px 8px; font-size: 10px; letter-spacing: 0.18em; background: var(--btn-bg); color: var(--btn-fg); vertical-align: middle; }
.art-cards a { position: relative; }
.art-cards a::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--stripe); opacity: 0.85; }
.art-cards a:hover strong { color: var(--accent); }
.art-card__meta { font-style: normal; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--accent); }

@media (max-width: 520px) {
  .art { padding-top: 36px; }
  .art__wrap { padding: 0 16px; }
  .art__body { font-size: 17px; }
  .art__question { padding: 26px 18px 22px; }
  .art__cta .btn { width: 100%; }
}