/* Shared visual roles for Scena's English and Vietnamese pages. */
:root {
  --scena-type: "Archivo", "Segoe UI", system-ui, sans-serif;
  --scena-code: "JetBrains Mono", Consolas, ui-monospace, monospace;
  --scena-ink: #1b1b23;
  --scena-muted: #555762;
  --scena-paper: #fff;
  --scena-canvas: #f5f4f0;
  --scena-line: #dedbd3;
  --scena-night: #11121a;
  --scena-night-muted: #c9c9d5;
  --scena-action: #b5331b;
  --scena-action-hover: #912713;
  --scena-action-soft: #fff0e9;
  --scena-focus: #6652bb;
  --scena-radius-card: 8px;
  --scena-display: clamp(2.15rem, 1.35rem + 2.55vw, 3.65rem);
  --scena-hero: clamp(2.15rem, 1.22rem + 3.75vw, 4.6rem);
  --scena-heading: clamp(1.5rem, 1.12rem + 1.35vw, 2.45rem);
  --scena-lead: clamp(1rem, .94rem + .36vw, 1.2rem);
  --scena-tracking: -.042em;
  --scena-heading-tracking: -.026em;
}

:root:lang(vi) {
  --scena-tracking: -.026em;
  --scena-heading-tracking: -.014em;
}

body[data-scena-page] {
  color: var(--scena-ink);
  background: var(--scena-paper);
  font-family: var(--scena-type);
}

body[data-scena-page] ::selection {
  color: var(--scena-ink);
  background: #f1d5c8;
}

.hv .page > header h1,
.page > main h1 {
  font-family: var(--scena-type);
  font-weight: 770 !important;
  line-height: 1.12 !important;
  letter-spacing: var(--scena-tracking) !important;
  text-wrap: balance;
}

.hv .page > header h1 {
  font-size: var(--scena-hero) !important;
  max-inline-size: min(100%, 22ch) !important;
}

.page > main h1 {
  font-size: var(--scena-display) !important;
  max-inline-size: min(100%, 28ch) !important;
}

body:is([data-scena-page="reference"], [data-scena-page="utility"]) {
  --scena-display: clamp(2rem, 1.46rem + 2.05vw, 3.15rem);
}

.page > main :is(h2, h3) {
  text-wrap: balance;
  letter-spacing: var(--scena-heading-tracking) !important;
}

.page > main h2 {
  font-weight: 740 !important;
}

.page > main :is(.sec > .wrap > h2, .wrap > header > h2) {
  font-size: var(--scena-heading) !important;
  line-height: 1.18 !important;
}

.page > main h3 {
  font-weight: 690 !important;
  line-height: 1.28;
}

.page > main :is(.lead, h1 + p, .wrap > h2 + p),
.hv .page > header h1 + p {
  font-size: var(--scena-lead) !important;
  line-height: 1.6 !important;
  max-inline-size: min(100%, 64ch) !important;
  text-wrap: pretty;
}

.page > main .lead {
  color: var(--scena-muted);
}

.hv .page > header h1 + p {
  color: var(--scena-night-muted) !important;
  max-inline-size: min(100%, 60ch) !important;
}

.page > main .eyebrow {
  color: var(--scena-action) !important;
  background: #f4ede6 !important;
  border-color: #e5dacf !important;
  border-radius: 6px !important;
  font-family: var(--scena-type) !important;
  font-size: .75rem !important;
  line-height: 1.35;
  letter-spacing: .065em !important;
}

.page > main .eyebrow::before {
  background: currentColor !important;
  box-shadow: none !important;
}

/* Use the same quiet introduction surface across reading and product pages. */
body:not([data-scena-page="home"]) .page > main > .sec:first-child:has(h1):not([style*="23, 24, 28"]):not([style*="#17181C"]):not([style*="url("]),
.page > main > article > header.sec:has(h1):not([style*="23, 24, 28"]):not([style*="#17181C"]):not([style*="url("]) {
  background-color: #faf9f6;
}

.hv .page > header > div[style*="position: relative; background:"] {
  background: var(--scena-night) !important;
}

.page > main .sec:is([style*="background: #F4F5F6"], [style*="background: #F7F8F9"],
  [style*="background: rgb(244, 245, 246)"], [style*="background: rgb(247, 248, 249)"]) {
  background: var(--scena-canvas) !important;
  border-color: var(--scena-line) !important;
}

.page > main :is(.card, .post, .faqrow) {
  border-color: var(--scena-line);
}

.page > main :is(.post-t, .faqrow > button) {
  letter-spacing: -.013em;
  line-height: 1.35;
}

.page > main .post:hover .post-t {
  color: var(--scena-action);
}

body[data-scena-page="reference"] .page > main :is(article, .sec) :is(p, li) {
  text-wrap: pretty;
}

body[data-scena-page="reference"] .page > main :is(article, .sec) :is(p, li) a {
  text-underline-offset: .2em;
}

.page > main :is(input, textarea, select).fld {
  border-color: #bcbec9;
  font-family: var(--scena-type);
}

.page :is(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--scena-focus);
  outline-offset: 3px;
}

.page :is(input, textarea, select).fld:focus-visible {
  border-color: var(--scena-focus) !important;
  outline: 2px solid var(--scena-focus) !important;
  outline-offset: 2px;
  box-shadow: none !important;
}

/* The exported pages contain inline colors. Match solid action fills only. */
.page :is(a[href], button:not([aria-pressed])):is([style*="background: #D8411C"], [style*="background: rgb(216, 65, 28)"]) {
  color: #fff !important;
  background: var(--scena-action) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

.page :is(a[href], button:not([aria-pressed])):is([style*="background: #D8411C"], [style*="background: rgb(216, 65, 28)"]):hover {
  background: var(--scena-action-hover) !important;
  box-shadow: none !important;
  transform: none;
}

.hv .page > header .sec .wrap a[style*="border: 1px solid rgba(255, 255, 255, 0.24)"] {
  border-radius: 6px !important;
}

/* Keep consent choices equally visible and compact on narrow screens. */
section[role="region"]:has([data-ck="ckOpen"]) {
  max-block-size: min(65vh, 520px);
  overflow: auto;
  border-radius: 6px !important;
  box-shadow: 0 6px 20px -12px rgb(23 24 28 / 30%) !important;
}

section[role="region"] :is([data-ck^="ckRejectAll#"], [data-ck^="ckAcceptAll#"]) {
  min-block-size: 44px !important;
  background: #fff !important;
  color: var(--scena-ink) !important;
  box-shadow: none !important;
}

section[role="region"] :is([data-ck^="ckRejectAll#"], [data-ck^="ckAcceptAll#"]):hover {
  background: var(--scena-canvas) !important;
}

@media (max-width: 599px) {
  section[role="region"]:has([data-ck="ckOpen"]) > div:has(> [data-ck="ckOpen"]) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px !important;
  }

  section[role="region"] [data-ck="ckOpen"] {
    grid-column: 1 / -1;
    justify-self: start;
  }

  section[role="region"] :is([data-ck^="ckRejectAll#"], [data-ck^="ckAcceptAll#"]) {
    padding-inline: 6px !important;
    white-space: normal !important;
  }
}

@media (min-width: 1024px) and (max-height: 820px) {
  .hv .page > header h1 {
    font-size: clamp(2.75rem, 4.3vw, 3.6rem) !important;
  }
}

@media (max-width: 599px) {
  :root {
    --scena-heading: clamp(1.45rem, 1.14rem + 1.45vw, 1.85rem);
  }

  .hv .page > header h1 {
    max-inline-size: min(100%, 24ch) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page :is(a, button):hover {
    transform: none;
  }
}