/**
 * v2 dogfood — shared canvas chrome for original reading.css pages.
 * Background + top gradient + home-matching sticky header (brand, lang, CTAs)
 * + home typography (cream text, Merriweather 300 display, 400 buttons).
 * Apply via html.v2-dogfood.
 */
html.v2-dogfood {
  --canvas: #191a1e;
  --spread-bg: #191a1e;
  --chrome-bg: #222328;
  --chrome-bg-inner: rgba(255, 255, 255, 0.06);
  --elevation-1: #222328;
  --overlay: rgba(0, 0, 0, 0.28);

  --v2-bg: #191a1e;
  --v2-text: #fff6ea;
  --v2-text-muted: rgba(255, 246, 234, 0.65);
  --v2-text-soft: rgba(255, 246, 234, 0.45);
  --v2-contrast-primary: #fff6ea;
  --v2-contrast-quaternary: rgba(255, 255, 255, 0.1);
  --v2-accent-default: #ffd8a3;
  --v2-accent-hover: #ffe1b8;
  --v2-accent-text: #ffddad;
  --v2-accent-over: #0b0b0b;
  --v2-control-default: rgba(255, 255, 255, 0.08);
  --v2-radius-pill: 16px;
  --v2-serif: "Merriweather", "Noto Serif", "Apple SD Gothic Neo", "Noto Serif KR", "Noto Serif SC", "PingFang SC", "Malgun Gothic", Georgia, "Times New Roman", serif;
  --v2-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Apple SD Gothic Neo", "PingFang SC", "Malgun Gothic", Arial, sans-serif;
  --v2-fw-regular: 400;
  --v2-fw-display: 300;
  --v2-ag-2xl-size: 40px;
  --v2-ag-2xl-lh: 52px;
  --v2-ag-xl-size: 32px;
  --v2-ag-xl-lh: 40px;
  --v2-ag-l-size: 24px;
  --v2-ag-l-lh: 32px;
  --v2-ag-m-size: 20px;
  --v2-ag-m-lh: 32px;
  --v2-ag-s-size: 16px;
  --v2-ag-s-lh: 24px;
  --v2-contrast-secondary: rgba(255, 246, 234, 0.65);

  /* Remap reading.css palette → home cream */
  --text-primary: var(--v2-text);
  --text-secondary: var(--v2-text-muted);
  --text-tertiary: rgba(255, 246, 234, 0.3);
  --text-quaternary: rgba(255, 246, 234, 0.1);
  --accent: var(--v2-accent-default);
  --accent-hover: var(--v2-accent-hover);
  --accent-active: #ffd08f;
  --accent-text: var(--v2-accent-text);
  --accent-on-dark: var(--v2-accent-over);
}

html.v2-dogfood,
html.v2-dogfood body,
body.v2-dogfood {
  background: var(--v2-bg, #191a1e);
}

html.v2-dogfood body {
  color: var(--v2-text);
  font-family: var(--v2-serif);
  font-weight: var(--v2-fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
}

/* —— Typography: match home display/body/button treatment —— */
html.v2-dogfood :where(h1, h2, h3, h4, h5, h6, strong, b) {
  font-weight: var(--v2-fw-display);
}

html.v2-dogfood .hero h1,
html.v2-dogfood .question-hero h1,
html.v2-dogfood .card-hero-copy h1 {
  margin: 8px 0 16px;
  font-family: var(--v2-serif);
  font-size: clamp(1.75rem, 4vw, var(--v2-ag-2xl-size));
  line-height: var(--v2-ag-2xl-lh);
  font-weight: var(--v2-fw-display);
  letter-spacing: 0;
  color: var(--v2-contrast-primary);
}

html.v2-dogfood .root-section > h2,
html.v2-dogfood .reading-page h2 {
  font-family: var(--v2-serif);
  font-size: clamp(1.5rem, 3vw, var(--v2-ag-xl-size));
  line-height: var(--v2-ag-xl-lh);
  font-weight: var(--v2-fw-display);
  letter-spacing: 0;
  color: var(--v2-contrast-primary);
}

html.v2-dogfood .intro,
html.v2-dogfood .content-lead,
html.v2-dogfood .card-cta p,
html.v2-dogfood .card-essence,
html.v2-dogfood .content-item-body,
html.v2-dogfood .content-item-body p {
  font-family: var(--v2-serif);
  font-size: var(--v2-ag-s-size);
  font-weight: var(--v2-fw-regular);
  line-height: var(--v2-ag-s-lh);
  letter-spacing: 0.01em;
  color: var(--v2-contrast-secondary);
  font-style: normal;
}

html.v2-dogfood .intro {
  margin: 0;
  max-width: 42rem;
}

html.v2-dogfood .breadcrumb,
html.v2-dogfood .eyebrow,
html.v2-dogfood .daily-card-position,
html.v2-dogfood .card-glossary-item-number {
  font-family: var(--v2-serif);
  font-size: 0.78rem;
  font-weight: var(--v2-fw-regular);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-accent-text);
}

html.v2-dogfood .breadcrumb [aria-current="page"] {
  color: var(--v2-text-muted);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--v2-ag-s-size);
}

html.v2-dogfood .daily-card strong,
html.v2-dogfood .content-item-heading,
html.v2-dogfood .content-item-step {
  font-family: var(--v2-serif);
  font-weight: var(--v2-fw-display);
  color: var(--v2-contrast-primary);
}

html.v2-dogfood .daily-card span:last-child {
  color: var(--v2-text-muted);
  font-weight: var(--v2-fw-regular);
}

html.v2-dogfood .primary-button,
html.v2-dogfood .secondary-button,
html.v2-dogfood .ghost-button,
html.v2-dogfood .root-cta,
html.v2-dogfood .topic-card,
html.v2-dogfood .card-glossary-item,
html.v2-dogfood .card-contextual-item,
html.v2-dogfood .card-related-item {
  font-family: var(--v2-serif);
  font-weight: var(--v2-fw-regular);
}

html.v2-dogfood .topic-card {
  font-size: var(--v2-ag-s-size);
  line-height: 1.35;
  color: var(--v2-contrast-primary);
  background: var(--v2-contrast-quaternary);
  border: 0;
  border-radius: 16px;
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.28);
}

html.v2-dogfood .topic-card small {
  font-size: 0.75rem;
  font-weight: var(--v2-fw-regular);
  letter-spacing: 0.02em;
  color: var(--v2-text-soft);
}

html.v2-dogfood .card-glossary-item {
  font-size: var(--v2-ag-s-size);
  line-height: var(--v2-ag-s-lh);
  color: var(--v2-contrast-primary);
}

html.v2-dogfood .card-glossary-item-number {
  color: var(--v2-text-soft);
}

html.v2-dogfood .card-keywords li {
  font-family: var(--v2-serif);
  font-size: 0.78rem;
  font-weight: var(--v2-fw-regular);
  letter-spacing: 0.04em;
  color: var(--v2-accent-text);
}

html.v2-dogfood .card-contextual-item h3 {
  font-family: var(--v2-serif);
  font-size: var(--v2-ag-m-size);
  font-weight: var(--v2-fw-display);
  line-height: var(--v2-ag-m-lh);
  color: var(--v2-contrast-primary);
}

html.v2-dogfood .card-contextual-item p {
  font-size: var(--v2-ag-s-size);
  line-height: var(--v2-ag-s-lh);
  font-weight: var(--v2-fw-regular);
  color: var(--v2-contrast-secondary);
}

html.v2-dogfood .site-footer,
html.v2-dogfood .site-footer-copy {
  color: var(--v2-text-muted);
  font-weight: var(--v2-fw-regular);
}

html.v2-dogfood .site-footer-links a {
  color: var(--v2-accent-text);
  font-weight: var(--v2-fw-regular);
}

/* —— Daily “How to use” — home FAQ accordion treatment —— */
html.v2-dogfood .daily-how-section.root-section {
  margin: 48px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

html.v2-dogfood .daily-how-section .daily-how__title {
  margin: 0 0 40px;
  font-family: var(--v2-serif);
  font-size: clamp(1.75rem, 4vw, var(--v2-ag-2xl-size));
  font-weight: var(--v2-fw-display);
  line-height: 1.25;
  letter-spacing: 0;
  text-align: center;
  color: var(--v2-contrast-primary);
}

html.v2-dogfood .daily-how-faq {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  width: 100%;
}

html.v2-dogfood .daily-how-faq .v2-faq-item {
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
  border: 0 !important;
  outline: none;
}

html.v2-dogfood .daily-how-faq .v2-faq-item[open] {
  background: var(--v2-contrast-quaternary, rgba(255, 255, 255, 0.1));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  border: 0 !important;
}

html.v2-dogfood .daily-how-faq .v2-faq-item summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 68px;
  padding: 16px 48px;
  cursor: pointer;
  list-style: none;
  font-family: var(--v2-serif);
  font-size: clamp(1rem, 2.2vw, var(--v2-ag-l-size));
  font-weight: var(--v2-fw-display);
  line-height: 1.35;
  text-align: center;
  color: var(--v2-contrast-primary);
}

html.v2-dogfood .daily-how-faq .v2-faq-item summary::-webkit-details-marker {
  display: none;
}

html.v2-dogfood .daily-how-faq .v2-faq-item summary > span {
  flex: 0 1 auto;
  min-width: 0;
  text-align: center;
}

html.v2-dogfood .daily-how-faq .v2-faq-icon {
  position: absolute;
  top: 50%;
  right: 16px;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--v2-accent-text);
  transform: translateY(-50%);
}

html.v2-dogfood .daily-how-faq .v2-faq-icon--close {
  display: none;
}

html.v2-dogfood .daily-how-faq .v2-faq-item[open] .v2-faq-icon--plus {
  display: none;
}

html.v2-dogfood .daily-how-faq .v2-faq-item[open] .v2-faq-icon--close {
  display: block;
}

html.v2-dogfood .daily-how-faq .v2-faq-body {
  padding: 0 16px 16px;
  margin-top: -4px;
  font-family: var(--v2-serif);
  font-size: var(--v2-ag-s-size, 16px);
  font-weight: var(--v2-fw-regular);
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-align: center;
  color: var(--v2-text-soft);
}

html.v2-dogfood .daily-how-faq .v2-faq-body p {
  margin: 0 auto;
  max-width: 42rem;
  color: inherit;
}

/* Full-bleed blue wash — same recipe as home .v2-artboard__atmosphere-gradient */
.v2-chrome-atmosphere {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.v2-chrome-atmosphere__gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: max(42vh, 392px);
  background: linear-gradient(
    180deg,
    rgba(0, 112, 187, 0.45) 0%,
    rgba(25, 26, 30, 0) 100%
  );
}

@media (max-width: 767px) {
  .v2-chrome-atmosphere__gradient {
    height: min(42vh, 360px);
  }
}

html.v2-dogfood .page-shell {
  position: relative;
  z-index: 1;
  padding-top: 88px;
  /* Home content column is 944; reading default was 1120 */
  width: min(944px, calc(100% - 32px));
}

/* Today's cards shares the 944 content column so it shares the page center line */
html.v2-dogfood .daily-page .daily-cards-section.root-section {
  width: 100%;
  max-width: 100%;
  margin: 48px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
}

html.v2-dogfood .daily-page .daily-cards-section > h2 {
  margin: 0 0 24px;
  text-align: center;
  font-size: clamp(1.75rem, 4vw, var(--v2-ag-2xl-size));
  line-height: 1.25;
  font-weight: var(--v2-fw-display);
  color: var(--v2-contrast-primary);
}

/* Center every block below the Daily Tarot reading hero */
html.v2-dogfood .daily-page .daily-cards-section,
html.v2-dogfood .daily-page .daily-how-section,
html.v2-dogfood .daily-page .card-cta {
  text-align: center;
}

html.v2-dogfood .daily-page .daily-card-grid {
  justify-content: center;
}

/* Home compose rhythm ≈ 48px between major blocks */
html.v2-dogfood .daily-page .hero {
  margin-bottom: 48px;
}

html.v2-dogfood .daily-page .breadcrumb {
  margin-bottom: 24px;
}

html.v2-dogfood .daily-page .card-cta {
  margin: 48px 0 0;
  border: 0;
  box-shadow: none;
  text-align: center;
}

/* Home pull CTA — dark charcoal control, cream label */
html.v2-dogfood .v2-pull__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 223px;
  height: 64px;
  padding: 0 28px;
  border: 0;
  border-radius: 16px;
  background: var(--v2-control-default, rgba(255, 255, 255, 0.08));
  color: var(--v2-contrast-primary, #fff6ea);
  font-family: var(--v2-serif);
  font-size: var(--v2-ag-m-size, 20px);
  font-weight: var(--v2-fw-regular);
  line-height: 1;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}

html.v2-dogfood .v2-pull__btn:hover,
html.v2-dogfood .v2-pull__btn:focus-visible {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.12);
  outline: none;
}

html.v2-dogfood .daily-page .site-footer {
  margin-top: 48px;
}

/* —— Cards category (index / hub / card / context) —— */
html.v2-dogfood .card-page,
html.v2-dogfood .card-index-page {
  max-width: none;
  width: 100%;
}

html.v2-dogfood .card-index-page .hero,
html.v2-dogfood .card-page .breadcrumb {
  margin-bottom: 24px;
}

html.v2-dogfood .card-index-page .hero {
  margin-bottom: 48px;
  text-align: left;
}

html.v2-dogfood .card-page .card-hero {
  margin-bottom: 48px;
}

html.v2-dogfood .card-index-page .root-section,
html.v2-dogfood .card-page .card-section,
html.v2-dogfood .card-page .card-tiktok,
html.v2-dogfood .card-page .card-suggested,
html.v2-dogfood .card-page .card-related {
  margin: 48px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

html.v2-dogfood .card-index-page .root-section > h2,
html.v2-dogfood .card-page .card-section h2,
html.v2-dogfood .card-page .card-tiktok h2,
html.v2-dogfood .card-page .card-suggested h2,
html.v2-dogfood .card-page .card-related h2 {
  margin: 0 0 24px;
  text-align: center;
  font-family: var(--v2-serif);
  font-size: clamp(1.75rem, 4vw, var(--v2-ag-2xl-size));
  line-height: var(--v2-ag-2xl-lh);
  font-weight: var(--v2-fw-display);
  letter-spacing: 0;
  color: var(--v2-contrast-primary);
}

html.v2-dogfood .card-page .card-section p,
html.v2-dogfood .card-page .card-suggested > p {
  margin-left: auto;
  margin-right: auto;
  max-width: 42rem;
  text-align: center;
  font-family: var(--v2-serif);
  font-size: var(--v2-ag-s-size);
  line-height: var(--v2-ag-s-lh);
  font-weight: var(--v2-fw-regular);
  letter-spacing: 0.01em;
  color: var(--v2-contrast-secondary);
}

html.v2-dogfood .card-page .card-contextual {
  margin: 48px 0 0;
}

html.v2-dogfood .card-page .card-cta {
  margin: 48px 0 0;
  border: 0;
  box-shadow: none;
  text-align: center;
}

html.v2-dogfood .card-index-page .site-footer,
html.v2-dogfood .card-page .site-footer {
  margin-top: 48px;
}

/* —— Question / spread pages —— */
html.v2-dogfood .question-page .breadcrumb {
  margin-bottom: 24px;
}

html.v2-dogfood .question-page .question-hero {
  margin-bottom: 48px;
  text-align: left;
  max-width: none;
}

html.v2-dogfood .question-page .question-hero h1 {
  margin: 0;
}

html.v2-dogfood .question-page .spread-card,
html.v2-dogfood .question-page .reading-summary,
html.v2-dogfood .question-page .content-body,
html.v2-dogfood .question-page .faq,
html.v2-dogfood .question-page .related,
html.v2-dogfood .question-page .install-panel-section {
  margin: 48px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

html.v2-dogfood .question-page .reading-summary > h2,
html.v2-dogfood .question-page .faq h2,
html.v2-dogfood .question-page .related h2 {
  margin: 0 0 24px;
  text-align: center;
  font-family: var(--v2-serif);
  font-size: clamp(1.75rem, 4vw, var(--v2-ag-2xl-size));
  line-height: var(--v2-ag-2xl-lh);
  font-weight: var(--v2-fw-display);
  letter-spacing: 0;
  color: var(--v2-contrast-primary);
}

html.v2-dogfood .question-page .content-lead {
  margin: 0 0 24px;
  max-width: 42rem;
  text-align: left;
  border-bottom: 0;
  padding-bottom: 0;
}

html.v2-dogfood .question-page .content-collapse {
  gap: 16px;
}

html.v2-dogfood .question-page .content-item {
  border: 0;
  border-radius: 16px;
  background: transparent;
}

html.v2-dogfood .question-page .content-item[open] {
  background: var(--v2-contrast-quaternary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html.v2-dogfood .question-page .content-item-step {
  font-weight: var(--v2-fw-regular);
  background: rgba(255, 216, 163, 0.12);
}

html.v2-dogfood .question-page .content-item-heading {
  font-size: clamp(1rem, 2.2vw, var(--v2-ag-l-size));
  font-weight: var(--v2-fw-display);
  color: var(--v2-contrast-primary);
}

html.v2-dogfood .question-page .content-item-body p {
  color: var(--v2-contrast-secondary);
  font-size: var(--v2-ag-s-size);
  line-height: var(--v2-ag-s-lh);
  letter-spacing: 0.01em;
}

html.v2-dogfood .question-page .faq details {
  border: 0;
  border-radius: 16px;
  margin: 0 0 16px;
  background: transparent;
  overflow: hidden;
}

html.v2-dogfood .question-page .faq details[open] {
  background: var(--v2-contrast-quaternary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html.v2-dogfood .question-page .faq summary {
  font-family: var(--v2-serif);
  font-size: clamp(1rem, 2.2vw, var(--v2-ag-l-size));
  font-weight: var(--v2-fw-display);
  line-height: 1.35;
  color: var(--v2-contrast-primary);
  padding: 16px 48px 16px 16px;
}

html.v2-dogfood .question-page .faq details p {
  padding: 0 16px 16px;
  margin: 0;
  font-size: var(--v2-ag-s-size);
  line-height: var(--v2-ag-s-lh);
  letter-spacing: 0.01em;
  color: var(--v2-contrast-secondary);
}

html.v2-dogfood .question-page .card-summary-item {
  border: 0;
  border-radius: 16px;
  background: var(--v2-contrast-quaternary);
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.28);
}

html.v2-dogfood .question-page .card-summary-slot {
  font-family: var(--v2-serif);
  font-size: 0.78rem;
  font-weight: var(--v2-fw-regular);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-accent-text);
}

html.v2-dogfood .question-page .card-summary-copy h3 {
  font-family: var(--v2-serif);
  font-size: var(--v2-ag-m-size);
  font-weight: var(--v2-fw-display);
  line-height: var(--v2-ag-m-lh);
  color: var(--v2-contrast-primary);
}

html.v2-dogfood .question-page .card-summary-essence {
  font-size: var(--v2-ag-s-size);
  line-height: var(--v2-ag-s-lh);
  font-weight: var(--v2-fw-regular);
  color: var(--v2-contrast-secondary);
}

html.v2-dogfood .question-page .card-summary-link {
  font-family: var(--v2-serif);
  font-weight: var(--v2-fw-regular);
  color: var(--v2-accent-text);
}

html.v2-dogfood .question-page .site-footer {
  margin-top: 48px;
}

/* —— Header (home-matched, viewport-native; no artboard scale) —— */
html.v2-dogfood .v2-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  width: 100%;
  pointer-events: none;
  isolation: isolate;
}

html.v2-dogfood .v2-header__frame {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-sizing: border-box;
  width: min(944px, calc(100% - 32px));
  margin-inline: auto;
  padding: 24px 0 16px;
  pointer-events: auto;
}

html.v2-dogfood .v2-header::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  background: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: 0 6px 22px transparent;
  transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease,
    backdrop-filter 0.22s ease, -webkit-backdrop-filter 0.22s ease;
  pointer-events: none;
  z-index: -1;
}

html.v2-dogfood .v2-header.is-elevated::before {
  background: rgba(25, 26, 30, 0.88);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}

html.v2-dogfood .v2-header__actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

html.v2-dogfood .v2-header__ctas {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(8px);
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease,
    transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1.1);
}

html.v2-dogfood .v2-header.is-cta-visible .v2-header__ctas {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
}

html.v2-dogfood .v2-header__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  font-family: var(--v2-serif);
  font-size: 0.92rem;
  font-weight: var(--v2-fw-regular);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.15s ease;
}

html.v2-dogfood .v2-header__cta:hover,
html.v2-dogfood .v2-header__cta:focus-visible {
  transform: translateY(-1px);
  outline: none;
}

html.v2-dogfood .v2-header__cta--primary {
  color: var(--v2-accent-over);
  background: var(--v2-accent-default);
}

html.v2-dogfood .v2-header__cta--primary:hover,
html.v2-dogfood .v2-header__cta--primary:focus-visible {
  background: var(--v2-accent-hover);
}

html.v2-dogfood .v2-header__cta--secondary {
  color: var(--v2-contrast-primary);
  background: var(--v2-control-default);
}

html.v2-dogfood .v2-header__cta--secondary:hover,
html.v2-dogfood .v2-header__cta--secondary:focus-visible {
  background: rgba(255, 255, 255, 0.12);
}

html.v2-dogfood .v2-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

html.v2-dogfood .v2-brand img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid #fff;
  object-fit: cover;
  display: block;
}

html.v2-dogfood .v2-brand span {
  font-family: var(--v2-sans);
  font-size: 0.98rem;
  font-weight: var(--v2-fw-regular);
  color: var(--v2-text);
  transition: opacity 0.18s ease, visibility 0.18s ease;
}

html.v2-dogfood .v2-header.is-cta-visible .v2-brand span {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

html.v2-dogfood .v2-lang {
  position: relative;
  display: inline-flex;
  align-items: center;
}

html.v2-dogfood .v2-lang select {
  appearance: none;
  border: 0;
  border-radius: var(--v2-radius-pill);
  padding: 10px 34px 10px 16px;
  color: var(--v2-text);
  background: rgba(255, 255, 255, 0.08);
  font-family: var(--v2-sans);
  font-size: 0.92rem;
  cursor: pointer;
}

html.v2-dogfood .v2-lang select:hover,
html.v2-dogfood .v2-lang select:focus {
  background: rgba(255, 255, 255, 0.12);
  outline: none;
}

html.v2-dogfood .v2-lang select option {
  color: #0b0b0b;
  background: #fff;
}

html.v2-dogfood .v2-lang svg {
  position: absolute;
  right: 12px;
  width: 12px;
  height: 7px;
  pointer-events: none;
  color: var(--v2-text);
}

@media (prefers-reduced-motion: reduce) {
  html.v2-dogfood .v2-header,
  html.v2-dogfood .v2-header::before,
  html.v2-dogfood .v2-header__ctas {
    transition: none;
  }
}

@media (max-width: 900px) {
  html.v2-dogfood .v2-header__frame {
    width: calc(100% - 32px);
    max-width: 100%;
    padding: 16px 0;
  }

  html.v2-dogfood .v2-header__actions {
    gap: 8px;
  }

  html.v2-dogfood .v2-header__ctas {
    gap: 8px;
  }

  html.v2-dogfood .v2-header__cta {
    height: 36px;
    padding: 0 12px;
    font-size: 0.82rem;
  }

  html.v2-dogfood .v2-brand span {
    font-size: 0.95rem;
  }
}

/* Mobile chrome — mirrors home data-v2-layout="mobile" header */
@media (max-width: 767px) {
  html.v2-dogfood .page-shell {
    padding-top: 72px;
  }

  html.v2-dogfood .v2-header__frame {
    position: relative;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding: 12px 16px;
    gap: 8px;
  }

  html.v2-dogfood .v2-brand {
    z-index: 1;
    flex: 0 0 auto;
    gap: 0;
  }

  html.v2-dogfood .v2-brand img {
    border-color: #ffddad;
  }

  html.v2-dogfood .v2-brand span {
    display: inline;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--v2-serif);
    font-size: 16px;
    letter-spacing: 0.01em;
    white-space: nowrap;
    pointer-events: none;
  }

  html.v2-dogfood .v2-header__actions {
    z-index: 1;
    margin-left: auto;
    gap: 8px;
    min-width: 0;
  }

  html.v2-dogfood .v2-header__ctas {
    gap: 0;
    max-width: 0;
    margin: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateX(6px);
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease, max-width 0.28s ease,
      transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1.1);
  }

  html.v2-dogfood .v2-header.is-cta-visible .v2-header__ctas {
    gap: 6px;
    max-width: 220px;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
  }

  html.v2-dogfood .v2-header__cta {
    height: 32px;
    padding: 0 10px;
    font-size: 0.75rem;
    border-radius: 10px;
  }

  html.v2-dogfood .v2-lang select {
    padding: 7px 26px 7px 10px;
    font-size: 0.8rem;
    border-radius: 10px;
  }

  html.v2-dogfood .v2-lang svg {
    right: 9px;
  }
}