/* ETC by EhKees — component styles, copied unchanged from the design system (project/components/bundle.css). Values come from tokens.css; nothing here is a raw color. */

.etc-root { background: var(--paper); color: var(--ink); font-family: var(--font-sans); }

/* Fraunces Soft Black: the logo's settings, applied to the display styles */
.display-xl, .display-l { font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 0; }
.headline { font-variation-settings: "opsz" 48, "SOFT" 100, "WONK" 0; }

/* Button ------------------------------------------------------------ */
.etc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 700; letter-spacing: .02em;
  border: var(--stroke-bold) solid var(--line-strong); border-radius: var(--radius-0);
  background: var(--ink); color: var(--paper);
  cursor: pointer; text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.etc-btn:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-offset); }
.etc-btn:active { transform: none; box-shadow: none; }
.etc-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.etc-btn--red { background: var(--red); color: var(--on-red); border-color: var(--red); }
.etc-btn--red:hover { box-shadow: 6px 6px 0 var(--ink); }
.etc-btn--gold { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.etc-btn--ghost { background: transparent; color: var(--ink); border-width: var(--stroke-mid); }
.etc-btn[disabled], .etc-btn[aria-disabled="true"] {
  background: var(--paper-sunk); color: var(--ink-subtle); border-color: var(--line);
  cursor: not-allowed; transform: none; box-shadow: none;
}

/* Tag --------------------------------------------------------------- */
.etc-tag {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  border: var(--stroke-mid) solid var(--line-strong); border-radius: var(--radius-full);
  color: var(--ink); background: transparent;
}
.etc-tag--red { background: var(--red); border-color: var(--red); color: var(--on-red); }
.etc-tag--gold { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.etc-tag--solid { background: var(--ink); color: var(--paper); }

/* Stamp ------------------------------------------------------------- */
.etc-stamp {
  --stamp-size: 168px;
  width: var(--stamp-size); height: var(--stamp-size); box-sizing: border-box;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1);
  border: var(--stroke-bold) solid currentColor; border-radius: var(--radius-full);
  color: var(--red-ink); text-align: center;
  box-shadow: inset 0 0 0 6px var(--paper), inset 0 0 0 8px currentColor;
}
.etc-stamp__top, .etc-stamp__bottom {
  font-family: var(--font-sans); font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.etc-stamp__main { font-family: var(--font-display); font-weight: 900; font-size: 44px; line-height: .9; font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 0; }
.etc-stamp--ink { color: var(--ink); }
.etc-stamp--gold { color: var(--gold-ink); }

/* Pull quote -------------------------------------------------------- */
.etc-quote { margin: 0; padding-top: var(--space-4); border-top: var(--stroke-bold) solid var(--line-strong); max-width: 640px; }
.etc-quote__text {
  margin: 0; font-family: var(--font-serif); font-weight: 400;
  font-size: 28px; line-height: 36px; color: var(--ink);
}
.etc-quote__text::before { content: "\201C"; color: var(--red-ink); font-family: var(--font-display); font-weight: 900; margin-right: .05em; font-variation-settings: "opsz" 72, "SOFT" 100; }
.etc-quote__cite {
  display: block; margin-top: var(--space-4);
  font-family: var(--font-sans); font-style: normal; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-muted);
}

/* Content card ------------------------------------------------------ */
.etc-card {
  display: flex; flex-direction: column; width: 100%; max-width: 360px;
  background: var(--paper-raised); color: var(--ink);
  border: var(--stroke-bold) solid var(--line-strong); border-radius: var(--radius-0);
  text-decoration: none; transition: transform .12s ease, box-shadow .12s ease;
}
a.etc-card:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-offset); }
a.etc-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.etc-card__media { aspect-ratio: 16 / 9; background: var(--paper-sunk); border-bottom: var(--stroke-bold) solid var(--line-strong); overflow: hidden; }
.etc-card__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); display: block; }
.etc-card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); }
.etc-card__kicker { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--red-ink); }
.etc-card__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 28px; line-height: 1.15; color: var(--ink); }
.etc-card__meta { font-family: var(--font-sans); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
/* MWCR card: its own palette, the same in both themes */
.etc-card--mwcr { background: var(--mwcr-ground); color: var(--mwcr-ink); border-color: var(--mwcr-ink); }
.etc-card--mwcr .etc-card__media { background: var(--mwcr-ink); border-color: var(--mwcr-ink); }
.etc-card--mwcr .etc-card__kicker, .etc-card--mwcr .etc-card__title, .etc-card--mwcr .etc-card__meta { color: var(--mwcr-ink); }
.etc-card--mwcr .etc-card__title { font-family: var(--font-sans); font-weight: 700; font-size: 24px; line-height: 1.2; }

/* Lane header (brand signatures set in type) ------------------------- */
.etc-lane { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding-bottom: var(--space-3); border-bottom: var(--stroke-bold) solid var(--line-strong); }
.etc-lane__name { font-family: var(--font-display); font-weight: 900; font-size: 40px; line-height: 1; color: var(--ink); font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 0; }
.etc-lane__name--mwcr { font-family: var(--font-sans); font-weight: 700; font-size: 22px; line-height: 28px; letter-spacing: -.005em; font-variation-settings: normal; }
.etc-lane__name--serif { font-family: var(--font-serif); font-weight: 400; font-size: 32px; font-variation-settings: normal; }
.etc-lane__by { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-muted); }
.etc-lane__dot { width: 14px; height: 14px; box-sizing: border-box; border-radius: var(--radius-full); border: var(--stroke-mid) solid var(--line-strong); background: var(--red); flex: none; align-self: center; }
.etc-lane__dot--mwcr { background: var(--mwcr-ink); }
.etc-lane__dot--ehkees { background: var(--ehkees-ink); }
.etc-lane__dot--wypft { background: var(--wypft-green); }

/* Show graphics (video title card, lower third, ask break, end card) ---- */
/* Built at 16:9. Wrap in data-theme="dark" (Night) unless the piece is the ask break. */
.etc-show { position: relative; aspect-ratio: 16 / 9; width: 100%; overflow: hidden; background: var(--paper); color: var(--ink); container-type: inline-size; }
.etc-show__photo { position: absolute; inset: 0; background: var(--paper-sunk); }
.etc-show__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1) brightness(.55); display: block; }
.etc-show__block { position: absolute; left: 6.7cqw; top: 50%; transform: translateY(-50%); max-width: 70cqw; }
.etc-show__rule { width: 6.3cqw; height: .9cqw; background: var(--red); margin-bottom: 2.6cqw; }
.etc-show__eyebrow { font-family: var(--font-sans); font-size: 1.6cqw; line-height: 1.2; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 1cqw; }
.etc-show__title { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: 10cqw; line-height: .95; letter-spacing: -.01em; color: var(--ink); font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 0; }
.etc-show__sub { margin: 1.4cqw 0 0; font-family: var(--font-serif); font-weight: 400; font-size: 3.2cqw; line-height: 1.2; color: var(--ink); }
.etc-show__credit { position: absolute; right: 4cqw; bottom: 3.4cqw; font-family: var(--font-sans); font-size: 1.5cqw; color: var(--ink-muted); }
/* Lower third */
.etc-show__lower { position: absolute; left: 5cqw; bottom: 7cqw; padding-left: 1.6cqw; border-left: .9cqw solid var(--red); }
.etc-show__lower-name { margin: 0; font-family: var(--font-serif); font-size: 3.6cqw; line-height: 1.1; color: var(--ink); }
.etc-show__lower-role { margin: .5cqw 0 0; font-family: var(--font-sans); font-size: 1.6cqw; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
/* End card: logo left, red divider, show name right */
.etc-show--end { display: grid; grid-template-columns: 4fr auto 5fr; align-items: center; gap: 4cqw; padding: 0 6cqw; box-sizing: border-box; }
.etc-show__logo { width: 100%; max-width: 30cqw; justify-self: end; display: block; }
.etc-show__divider { width: .5cqw; height: 30cqw; background: var(--red); }
.etc-show--end .etc-show__title { font-size: 9cqw; }
.etc-show--end .etc-show__sub { font-size: 2.6cqw; }
.etc-show--end .etc-show__eyebrow { margin-top: 2.4cqw; }
.etc-show--end .etc-show__line { margin: 1cqw 0 0; font-family: var(--font-sans); font-size: 1.6cqw; color: var(--ink-muted); }
/* The ask: Would You Pay For This break, same in both themes */
.etc-show--ask { background: var(--wypft-green); color: var(--wypft-ink); }
.etc-show--ask .etc-show__rule { background: var(--wypft-ink); }
.etc-show--ask .etc-show__eyebrow, .etc-show--ask .etc-show__title, .etc-show--ask .etc-show__sub, .etc-show--ask .etc-show__credit { color: var(--wypft-ink); }