/* Praxon Partners design system, based on mockup 1F Silencio.
   Light capitals held still in the middle of the frame. Full-screen bands of ivory and graphite.
   Everything centred, with a lot of air. Controls are underlined and have no frame. */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--prx-layout-header) + var(--prx-space-5));
  scrollbar-color: var(--prx-line-strong) transparent;
  background: var(--prx-bg);
}
body {
  margin: 0;
  background: var(--prx-bg);
  color: var(--prx-fg);
  font-family: var(--prx-font-sans);
  font-size: var(--prx-size-md);
  line-height: var(--prx-leading-md);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  caret-color: var(--prx-accent);
}
::selection { background: var(--prx-selection); }
img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-weight: 400; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
a, button, input, select, textarea, label, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
table { border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }
code, kbd, pre { font-family: var(--prx-font-mono); font-size: 0.875em; }
[hidden] { display: none !important; }

:focus { outline: none; }
:focus-visible {
  outline: var(--prx-border-focus) solid currentColor;
  outline-offset: 3px;
}

.prx-skip {
  position: fixed;
  top: var(--prx-space-2);
  left: var(--prx-space-2);
  z-index: 100;
  padding: var(--prx-space-3) var(--prx-space-4);
  background: #fff;
  color: #000;
  transform: translateY(-200%);
}
.prx-skip:focus { transform: none; }

.prx-vh {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Type: one family. The voice comes from weight, case and air ---------- */
.t-display {
  font-weight: 300;
  font-size: var(--prx-size-display);
  line-height: var(--prx-leading-display);
  letter-spacing: var(--prx-track-display);
  text-transform: uppercase;
}
.t-h1 {
  font-weight: 300;
  font-size: var(--prx-size-h1);
  line-height: var(--prx-leading-h1);
  letter-spacing: var(--prx-track-statement);
}
.t-h2 {
  font-weight: 300;
  font-size: var(--prx-size-h2);
  line-height: var(--prx-leading-h2);
  letter-spacing: var(--prx-track-heading);
}
.t-h3 {
  font-weight: 300;
  font-size: var(--prx-size-h3);
  line-height: var(--prx-leading-h3);
  letter-spacing: var(--prx-track-heading);
}
.t-h4 { font-size: var(--prx-size-h4); line-height: var(--prx-leading-h4); font-weight: 400; }
.t-lg { font-size: var(--prx-size-lg); line-height: var(--prx-leading-lg); }
.t-sm { font-size: var(--prx-size-sm); line-height: var(--prx-leading-sm); }
.t-xs { font-size: var(--prx-size-xs); line-height: var(--prx-leading-xs); }
.t-caps { font-size: var(--prx-size-xs); line-height: 1.5; letter-spacing: var(--prx-track-caps); text-transform: uppercase; }
.t-muted { color: var(--prx-fg-muted); }
.t-subtle { color: var(--prx-fg-subtle); }
.t-light { font-weight: 300; }
.t-num { font-variant-numeric: tabular-nums lining-nums; }
.t-measure { max-width: var(--prx-layout-measure); }

.link {
  color: var(--prx-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: text-decoration-color var(--prx-dur-fast) ease;
}
@media (hover: hover) and (pointer: fine) { .link:hover { text-decoration-color: currentColor; } }

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: calc(var(--prx-layout-max) + 2 * var(--prx-layout-margin));
  margin-inline: auto;
  padding-inline: max(var(--prx-layout-margin), env(safe-area-inset-left)) max(var(--prx-layout-margin), env(safe-area-inset-right));
}
.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--prx-layout-gutter);
}
@media (min-width: 768px) { .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.section { padding-block: var(--prx-space-section); }

/* ---------- Bands: the structure of 1F. Ivory and graphite, full screen, centred ---------- */
.band {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(6rem, 12vw, 12rem) var(--prx-layout-margin);
  background: var(--prx-bg);
  color: var(--prx-fg);
  text-align: center;
}
.band--ink { background: var(--prx-color-ink); }
:root[data-palette="azul"] .band--ink { background: var(--prx-color-azul-ink); }
.band__title {
  font-size: var(--prx-size-xs);
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: var(--prx-track-caps);
  margin-right: calc(-1 * var(--prx-track-caps));
  text-transform: uppercase;
}
.band__title::after { content: ""; display: block; width: 3rem; height: 1px; margin: 1.5rem auto 0; background: currentColor; }
.band__body { margin-top: clamp(2.5rem, 5vw, 5rem); width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.statement {
  max-width: 18em;
  font-size: var(--prx-size-h1);
  line-height: var(--prx-leading-h1);
  font-weight: 300;
  letter-spacing: var(--prx-track-statement);
}
.note { max-width: 26rem; margin: 2rem auto 0; color: var(--prx-fg-muted); }
.note--wide { max-width: 36rem; }
.legend { max-width: 36rem; margin: 2rem auto 0; font-size: var(--prx-size-sm); line-height: var(--prx-leading-sm); color: var(--prx-fg-muted); }
.legend small { display: block; margin-top: 0.5rem; font-size: inherit; color: var(--prx-fg-subtle); }
/* The role, said by the interface: short labels next to what they explain, never a banner. */
.rolekey { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.125rem 1.25rem; max-width: 46rem; margin: 2rem auto 0; font-size: var(--prx-size-ctl); line-height: 1.5; letter-spacing: 0.02em; color: var(--prx-fg-muted); }
.prov { font-size: var(--prx-size-xs); line-height: 1.4; color: var(--prx-fg-muted); }
/* State of a category or a piece of data: the word says it, the mark only repeats it. */
.docm { display: inline-flex; align-items: center; gap: 0.45em; font-size: var(--prx-size-xs); line-height: 1.4; font-weight: 500; white-space: nowrap; color: var(--prx-fg); }
.docm::before { content: ""; flex: none; width: 0.6em; height: 0.6em; border-radius: 50%; border: 1px solid currentColor; }
.docm--full::before { background: currentColor; }
.docm--part::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
/* Three parties. The asset and the price pass under Praxon, not through it. */
.parties { width: 100%; max-width: 54rem; margin-inline: auto; text-align: center; }
.parties__n { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.parties__n::before { content: ""; position: absolute; left: calc(100% / 6); right: calc(100% / 6); top: 0.3125rem; height: 1px; background: var(--prx-line-strong); }
.parties__i { position: relative; display: grid; justify-items: center; align-content: start; gap: 0.25rem; padding-inline: 0.25rem; }
.parties__i::before { content: ""; width: 0.625rem; height: 0.625rem; margin-bottom: var(--prx-space-2); border-radius: 50%; background: var(--prx-fg); border: 1px solid var(--prx-fg); }
.parties__i--mid::before { background: var(--prx-bg); }
.parties__t { font-size: var(--prx-size-sm); line-height: 1.3; font-weight: 500; }
.parties__d { font-size: var(--prx-size-xs); line-height: 1.4; color: var(--prx-fg-muted); max-width: 12rem; }
.parties__deal { height: 1.75rem; margin: var(--prx-space-3) calc(100% / 6) 0; border: 1px solid var(--prx-fg); border-top: 0; }
.parties__l { margin-top: var(--prx-space-3); font-size: var(--prx-size-md); line-height: 1.35; }
.parties__f { margin-top: 0.25rem; font-size: var(--prx-size-sm); line-height: 1.4; color: var(--prx-fg-muted); }
/* A label that travels with an image: placeholder, illustrative representation. */
.imglabel { position: absolute; left: 0.75rem; bottom: 0.75rem; z-index: 1; max-width: calc(100% - 1.5rem); padding: 0.125rem 0.5rem; background: rgb(0 0 0 / 0.72); color: #fff; font-size: var(--prx-size-ctl); line-height: 1.4; letter-spacing: 0.02em; text-align: left; }
.band__gap { height: clamp(3rem, 6vw, 6rem); }
.band__act { margin-top: 2rem; }
@media (max-width: 760px) { .band { min-height: 86vh; } }

/* A still at full width between bands. */
.bleed { position: relative; background: var(--prx-bg); }
.bleed img { width: 100%; height: 100vh; height: 100svh; object-fit: cover; }
@media (max-width: 760px) { .bleed img { height: 70vh; } }

/* ---------- Icons ---------- */
.i { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; }
.i--fill { fill: currentColor; stroke: none; }

/* ---------- Buttons: no frame, an underline that firms up ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--prx-space-2);
  min-height: var(--prx-layout-target);
  padding: 0 0.25rem;
  background: none;
  color: inherit;
  border: 0;
  border-bottom: var(--prx-border-hair) solid color-mix(in srgb, currentColor 40%, transparent);
  font-size: var(--prx-size-ctl);
  line-height: 1;
  font-weight: 400;
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: border-color var(--prx-dur-fast) ease, opacity var(--prx-dur-instant) ease;
}
.btn:active, .btn.is-active { opacity: 0.68; }
@media (hover: hover) and (pointer: fine) { .btn:not([disabled]):hover { border-bottom-color: currentColor; } }
.btn.is-hover { border-bottom-color: currentColor; }
.btn--2 { color: var(--prx-fg-muted); }
.btn--lg { min-height: 3.25rem; font-size: var(--prx-size-md); }
.btn--sm { min-height: 2.25rem; }
@media (pointer: coarse) { .btn--sm { min-height: var(--prx-layout-target); } }
.btn[disabled], .btn.is-disabled { color: var(--prx-fg-subtle); border-bottom-style: dashed; cursor: not-allowed; }
.btn.is-focus { outline: var(--prx-border-focus) solid currentColor; outline-offset: 3px; }
.btn.is-loading { color: transparent; pointer-events: none; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 0.875rem; height: 0.875rem;
  border: 1px solid var(--prx-fg);
  border-top-color: transparent;
  border-radius: 50%;
  animation: prx-spin 700ms linear infinite;
}
@keyframes prx-spin { to { transform: rotate(360deg); } }

.iconbtn {
  display: inline-grid;
  place-items: center;
  width: var(--prx-layout-target);
  height: var(--prx-layout-target);
  transition: opacity var(--prx-dur-fast) ease;
}
.iconbtn:active { opacity: 0.68; }
@media (hover: hover) and (pointer: fine) { .iconbtn:hover { opacity: 0.68; } }

/* ---------- Fields: a line to write on ---------- */
.field { display: grid; gap: var(--prx-space-2); }
.field__label { font-size: var(--prx-size-sm); line-height: var(--prx-leading-sm); font-weight: 500; }
.field__help { font-size: var(--prx-size-sm); line-height: var(--prx-leading-sm); color: var(--prx-fg-muted); }
.field__error { display: flex; gap: var(--prx-space-2); align-items: flex-start; font-size: var(--prx-size-sm); line-height: var(--prx-leading-sm); color: var(--prx-bad); }
.field__error .i { width: 1rem; height: 1rem; margin-top: 0.125rem; }
.input {
  width: 100%;
  min-height: 3rem;
  padding: 0.625rem 0;
  background: none;
  color: var(--prx-fg);
  border: 0;
  border-bottom: var(--prx-border-hair) solid var(--prx-line-strong);
  border-radius: 0;
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color var(--prx-dur-fast) ease, box-shadow var(--prx-dur-fast) ease;
}
.input::placeholder { color: var(--prx-fg-subtle); opacity: 1; }
textarea.input { min-height: 7rem; resize: vertical; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-size: 5px 5px; background-position: calc(100% - 9px) 55%, calc(100% - 4px) 55%; background-repeat: no-repeat; padding-right: 2rem; }
@media (hover: hover) and (pointer: fine) { .input:hover:not(:disabled):not(:focus) { border-color: var(--prx-fg); } }
.input:focus-visible, .input.is-focus { outline: none; border-color: var(--prx-focus); box-shadow: 0 1px 0 0 var(--prx-focus); }
.input.is-hover { border-color: var(--prx-fg); }
.input.is-error { border-color: var(--prx-bad); box-shadow: 0 1px 0 0 var(--prx-bad); }
.input:disabled { color: var(--prx-fg-subtle); border-bottom-style: dashed; cursor: not-allowed; }

.check { display: inline-flex; align-items: flex-start; gap: var(--prx-space-3); min-height: var(--prx-layout-target); padding-block: 0.625rem; cursor: pointer; }
.check input { appearance: none; flex: none; width: 1.25rem; height: 1.25rem; margin: 0.125rem 0 0; border: var(--prx-border-hair) solid var(--prx-line-strong); background: var(--prx-field-bg); display: grid; place-items: center; cursor: pointer; transition: border-color var(--prx-dur-fast) ease, background-color var(--prx-dur-fast) ease; }
.check input[type="radio"] { border-radius: 50%; }
.check input::after { content: ""; width: 0.625rem; height: 0.625rem; background: var(--prx-mark); opacity: 0; transform: scale(0.8); transition: opacity var(--prx-dur-fast) ease, transform var(--prx-dur-fast) var(--prx-ease-out); }
.check input[type="radio"]::after { border-radius: 50%; }
.check input:checked { border-color: var(--prx-fg); }
.check input:checked::after { opacity: 1; transform: none; }

.switch { display: inline-flex; align-items: center; gap: var(--prx-space-3); min-height: var(--prx-layout-target); cursor: pointer; }
.switch input { appearance: none; position: relative; flex: none; width: 2.75rem; height: 1.5rem; margin: 0; border-radius: var(--prx-radius-pill); background: var(--prx-line-strong); cursor: pointer; transition: background-color var(--prx-dur-fast) ease; }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: #fff; transition: transform var(--prx-dur-base) var(--prx-ease-out); }
.switch input:checked { background: var(--prx-mark); }
.switch input:checked::after { background: var(--prx-bg); transform: translateX(1.25rem); }

/* ---------- Status tags: state is always written, never colour alone ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 1.5rem;
  padding: 0.125rem 0.5rem;
  background: var(--prx-bg-muted);
  color: var(--prx-fg);
  font-size: var(--prx-size-xs);
  line-height: 1.34;
  font-weight: 500;
}
.tag--ok { background: var(--prx-ok-bg); color: var(--prx-ok); }
.tag--warn { background: var(--prx-warn-bg); color: var(--prx-warn); }
.tag--bad { background: var(--prx-bad-bg); color: var(--prx-bad); }
.tag--accent { background: var(--prx-accent-tint); color: var(--prx-accent-strong); }
.tag--ink { background: var(--prx-bg-inverse); color: var(--prx-fg-inverse); }

/* ---------- Segmented control ---------- */
.seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--prx-bg-muted); }
.seg__opt { position: relative; display: inline-flex; }
.seg__opt input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.seg__opt span { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; min-height: 2.25rem; min-width: 2.25rem; padding: 0 0.625rem; font-size: 0.8125rem; font-weight: 400; color: var(--prx-fg-muted); transition: background-color var(--prx-dur-fast) ease, color var(--prx-dur-fast) ease; }
.seg__opt input:checked + span { background: var(--prx-bg); color: var(--prx-fg); }
@media (hover: hover) and (pointer: fine) { .seg__opt input:not(:checked):hover + span { color: var(--prx-fg); } }
.seg__opt input:focus-visible + span { outline: var(--prx-border-focus) solid currentColor; outline-offset: 1px; }

/* ---------- Tabs: capitals of the menu, with a travelling hairline ---------- */
.tabs { display: flex; justify-content: safe center; gap: var(--prx-space-6); position: relative; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; min-width: var(--prx-layout-target); min-height: var(--prx-layout-target); padding: 0.5rem 0; white-space: nowrap; font-size: var(--prx-size-xs); font-weight: 400; letter-spacing: var(--prx-track-caps); text-transform: uppercase; color: var(--prx-fg-muted); transition: color var(--prx-dur-fast) ease; }
.tab[aria-selected="true"] { color: var(--prx-fg); }
@media (hover: hover) and (pointer: fine) { .tab:hover { color: var(--prx-fg); } }
.tabs__ink { position: absolute; left: 0; bottom: 0; height: 1px; width: 1px; background: var(--prx-mark); transform-origin: 0 0; transition: transform var(--prx-dur-base) var(--prx-ease-in-out); pointer-events: none; }

/* ---------- Cards: an image and a caption ---------- */
.card { position: relative; display: block; }
.card__media { display: block; position: relative; overflow: hidden; background: var(--prx-bg-muted); aspect-ratio: 16 / 10; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__edge { position: absolute; inset: auto 0 0 0; height: 1px; background: var(--prx-mark); transform: scaleX(0); transform-origin: left; transition: transform var(--prx-dur-base) var(--prx-ease-out); }
.card__body { padding-top: var(--prx-space-4); display: grid; gap: var(--prx-space-1); }
.card__title { font-size: var(--prx-size-lg); line-height: 1.3; font-weight: 300; }
.card__text { color: var(--prx-fg-muted); font-size: var(--prx-size-sm); line-height: var(--prx-leading-sm); }
@media (hover: hover) and (pointer: fine) {
  a.card:hover .card__edge, .card.is-hover .card__edge { transform: none; }
}
.card.is-hover .card__edge { transform: none; }
a.card:focus-visible { outline-offset: 6px; }
a.card:focus-visible .card__edge { transform: none; }
.card--panel { background: var(--prx-bg-subtle); padding: var(--prx-space-5); }
.card--panel .card__body { padding-top: 0; }

/* ---------- Dialog: native, for the few moments that need protected focus ---------- */
.dialog {
  width: min(32rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: var(--prx-space-6);
  background: var(--prx-bg-raised);
  color: var(--prx-fg);
  border: 0;
  box-shadow: var(--prx-shadow-3);
  opacity: 1;
  transform: none;
  overscroll-behavior: contain;
  transition: opacity var(--prx-dur-base) var(--prx-ease-out), transform var(--prx-dur-base) var(--prx-ease-out), overlay var(--prx-dur-base) allow-discrete, display var(--prx-dur-base) allow-discrete;
}
.dialog:not([open]) { opacity: 0; transform: translateY(4px); }
.dialog::backdrop { background: rgb(22 22 23 / 0.55); transition: background-color var(--prx-dur-base) ease, overlay var(--prx-dur-base) allow-discrete, display var(--prx-dur-base) allow-discrete; }
@starting-style {
  .dialog[open] { opacity: 0; transform: translateY(8px) scale(0.985); }
  .dialog[open]::backdrop { background: rgb(22 22 23 / 0); }
}
.dialog h2 { font-size: var(--prx-size-h4); line-height: var(--prx-leading-h4); font-weight: 300; }
.dialog p { margin-top: var(--prx-space-3); color: var(--prx-fg-muted); }
.dialog__actions { display: flex; flex-wrap: wrap; gap: var(--prx-space-3); margin-top: var(--prx-space-5); }

/* ---------- Theme control ---------- */
.theme-ctl .seg__opt span { padding: 0 0.5rem; }
@media (pointer: coarse) { .seg__opt span { min-height: var(--prx-layout-target); min-width: var(--prx-layout-target); } }
.theme-ctl .i { width: 1rem; height: 1rem; }

/* ---------- Mark and name ---------- */
.mark { display: inline-block; color: currentColor; }
.mark svg { width: 100%; height: auto; }
.brandlink { display: inline-flex; align-items: center; min-height: var(--prx-layout-target); }
.brandlink span { font-size: 1rem; line-height: 1; font-weight: 300; letter-spacing: var(--prx-track-brand); margin-right: calc(-1 * var(--prx-track-brand)); white-space: nowrap; }

/* ---------- Lanes: what is shown and to whom. Labels: a piece, as in a museum ---------- */
.lanes { width: 100%; max-width: 64rem; display: grid; gap: var(--prx-space-7); text-align: center; }
@media (min-width: 900px) { .lanes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--prx-space-7); } }
.lane { display: grid; gap: var(--prx-space-4); align-content: start; }
.lane__t { font-size: var(--prx-size-xs); line-height: 1.5; font-weight: 500; letter-spacing: var(--prx-track-caps); text-transform: uppercase; }
.lane__l { display: grid; }
.lane__l li { padding-block: 0.75rem; border-top: var(--prx-border-hair) solid var(--prx-line); font-size: var(--prx-size-sm); line-height: var(--prx-leading-sm); color: var(--prx-fg-muted); }
.lane__l li:last-child { border-bottom: var(--prx-border-hair) solid var(--prx-line); }
.piece { display: grid; gap: var(--prx-space-2); align-content: start; justify-items: center; text-align: center; }
.piece img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 66% 50%; background: var(--prx-bg-subtle); margin-bottom: var(--prx-space-3); }
.piece__t { font-size: var(--prx-size-xs); line-height: 1.5; font-weight: 500; letter-spacing: var(--prx-track-caps); text-transform: uppercase; }
.piece__f { max-width: 22rem; }

/* ---------- Ficha: three levels of disclosure ---------- */
.spec { display: grid; width: 100%; max-width: 40rem; text-align: left; }
.spec__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--prx-space-4); padding-block: 0.8125rem; border-top: var(--prx-border-hair) solid var(--prx-line); }
.spec__row:last-child { border-bottom: var(--prx-border-hair) solid var(--prx-line); }
.spec__row dt { color: var(--prx-fg-muted); font-size: var(--prx-size-sm); line-height: var(--prx-leading-md); }
.spec__row dd { font-size: var(--prx-size-sm); line-height: var(--prx-leading-md); font-variant-numeric: tabular-nums lining-nums; display: flex; flex-wrap: wrap; gap: var(--prx-space-2); align-items: center; }
.redact { display: inline-block; width: var(--w, 9ch); height: 0.95em; background: var(--prx-fg); vertical-align: -0.1em; }

/* ---------- Vehicles: one system, two ways of showing a unit. See Vehículos in the manual ---------- */
.vcards { width: 100%; max-width: 76rem; display: grid; gap: var(--prx-space-7) var(--prx-layout-gutter); text-align: left; }
@media (min-width: 900px) { .vcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vcards--3 { max-width: 88rem; }
@media (min-width: 900px) { .vcards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vcard { display: grid; gap: var(--prx-space-3); align-content: start; min-width: 0; }
.vmedia { position: relative; aspect-ratio: 16 / 9; overflow: hidden; display: grid; place-items: center; padding: 2.75rem 1rem; text-align: center; font-size: var(--prx-size-ctl); line-height: 1.4; }
.vmedia--photo { background: repeating-linear-gradient(135deg, var(--prx-line) 0 1px, transparent 1px 14px), var(--prx-bg-muted); color: var(--prx-fg-muted); }
/* Empty studio: floor, horizon and nothing else. It is also the neutral alternative. */
.vmedia--studio { background: linear-gradient(to bottom, transparent 70%, rgb(255 255 255 / 0.3) 70%, rgb(255 255 255 / 0.3) calc(70% + 1px), transparent calc(70% + 1px)), radial-gradient(70% 46% at 50% 84%, #2b2b2c 0, #151516 62%, #0c0c0d 100%); color: #fff; }
.vmedia__tag { position: absolute; left: 0.75rem; top: 0.75rem; }
.vmedia .tag:not(.tag--ink) { background: var(--prx-bg); color: var(--prx-fg); }
.vmedia--studio .tag--ink { background: #fff; color: #161617; }
.vmedia__label { position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.625rem; text-align: left; }
.vcard__t { font-weight: 300; font-size: var(--prx-size-h4); line-height: var(--prx-leading-h4); letter-spacing: var(--prx-track-heading); }
.vcard__s { color: var(--prx-fg-muted); font-size: var(--prx-size-sm); line-height: var(--prx-leading-sm); }
.vcard .spec { max-width: none; }
.vrec .vmedia { aspect-ratio: 3 / 2; }

/* ---------- Hero: film at full bleed, one title in the middle, controls at the foot ---------- */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: clip;
  background: #000;
  color: #fff;
  text-align: center;
}
.hero__media, .hero__layer { position: absolute; inset: 0; }
.hero__media { z-index: var(--prx-z-media); }
.hero__layer { opacity: 0; transition: opacity var(--prx-dur-slow) var(--prx-ease-media); }
.hero__layer.is-active { opacity: 1; }
.hero__layer img, .hero__layer video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); filter: grayscale(1) brightness(0.86) contrast(0.96); }
.hero__layer video { opacity: 0; transition: opacity var(--prx-dur-media) var(--prx-ease-media); }
.hero__layer.is-playing video { opacity: 1; }
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: var(--prx-z-scrim);
  pointer-events: none;
  background:
    radial-gradient(ellipse 72% 34% at 50% 48%, rgb(0 0 0 / 0.46), rgb(0 0 0 / 0) 100%),
    linear-gradient(to bottom, rgb(0 0 0 / 0.55) 0, rgb(0 0 0 / 0) 22%, rgb(0 0 0 / 0) 66%, rgb(0 0 0 / 0.78) 100%);
}
/* Close-ups of the classic print pass bright curves behind the title: measured on every shot. */
.hero--classic .hero__scrim {
  background:
    radial-gradient(ellipse 72% 34% at 50% 48%, rgb(0 0 0 / 0.62), rgb(0 0 0 / 0) 100%),
    linear-gradient(to bottom, rgb(0 0 0 / 0.55) 0, rgb(0 0 0 / 0) 22%, rgb(0 0 0 / 0) 66%, rgb(0 0 0 / 0.78) 100%);
}
/* The blended layer costs a repaint per video frame, so it only exists in Azul. */
.hero__scrim::after { content: none; position: absolute; inset: 0; background: var(--prx-tint); mix-blend-mode: color; opacity: 0.55; }
:root[data-palette="azul"] .hero__scrim::after { content: ""; }
.hero__body {
  position: relative;
  z-index: var(--prx-z-content);
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--prx-layout-header);
}
.hero__center { margin-block: auto; display: grid; justify-items: center; gap: var(--prx-space-5); }
.hero__title { position: relative; color: #fff; }
.hero__title--long { font-size: min(5.6vw, 15vh); }
/* A wireframe has no film: the same title, in a shorter dark band. */
.hero--wf { min-height: 58vh; min-height: 58svh; }
.line { display: inline-block; }
@media (max-width: 760px) {
  :root { --prx-size-display: min(13vw, 10vh); }
  .hero__title--long { font-size: min(9vw, 8vh); }
  .line { display: block; }
}
.hero__foot { position: relative; display: grid; justify-items: center; gap: var(--prx-space-2); padding-bottom: max(clamp(0.75rem, 1.8vh, 1.5rem), env(safe-area-inset-bottom)); }
.hero__note { max-width: 40rem; font-size: var(--prx-size-ctl); line-height: 1.4; letter-spacing: 0.02em; color: #fff; }
.concept-chip { display: block; max-width: 40rem; font-size: var(--prx-size-ctl); line-height: 1.4; letter-spacing: 0.02em; color: #fff; }

.media-ctl { display: inline-flex; align-items: center; gap: var(--prx-space-1); }
.media-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--prx-layout-target);
  min-width: var(--prx-layout-target);
  padding: 0 0.25rem;
  border-bottom: var(--prx-border-hair) solid rgb(255 255 255 / 0.4);
  background: none;
  color: #fff;
  font-size: var(--prx-size-ctl);
  line-height: 1;
  font-weight: 400;
  transition: border-color var(--prx-dur-fast) ease;
}
.media-btn .i { width: 0.75rem; height: 0.75rem; }
@media (hover: hover) and (pointer: fine) { .media-btn:hover { border-bottom-color: #fff; } }
.media-btn:focus-visible { outline-color: #fff; }
/* Light controls on the demo samples of the manual. */
.media-btn--ink { color: var(--prx-fg); border-bottom-color: color-mix(in srgb, currentColor 40%, transparent); }

/* The hero arrives slowly, once per visit. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-rise) .hero__media { animation: prx-dawn var(--prx-dur-hero-film) ease-out both; }
  html:not(.no-rise) .hero__title { animation: prx-exhale var(--prx-dur-hero) var(--prx-ease-exhale) 100ms both; }
  html:not(.no-rise) .hero__foot, html:not(.no-rise) .site-header { animation: prx-dawn var(--prx-dur-hero-chrome) linear var(--prx-dur-hero-chrome-delay) both; }
  @keyframes prx-dawn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes prx-exhale { from { opacity: 0; letter-spacing: -0.02em; } to { opacity: 1; } }
}

/* Each white-studio image has a real dark render. Only the one for the current ground is shown or loaded. */
.img-d { display: none; }
[data-theme="dark"] .img-d, .on-ink .img-d { display: block; }
[data-theme="dark"] .img-l, .on-ink .img-l { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .img-d { display: block; }
  :root:not([data-theme="light"]) .img-l { display: none; }
}
/* White studios melt into the ivory of the page instead of standing out as a paler box. */
.img-l { mix-blend-mode: multiply; }
/* Mono: no colour in any image. Azul keeps the navy of the renders. */
:root:not([data-palette="azul"]) main img:not(.keep-color) { filter: grayscale(1); }

/* ---------- Reduced motion: remove travel, keep the state changes ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .dialog, .tabs__ink { transition-property: opacity, color, background-color, box-shadow !important; }
  .card__edge { transition: none !important; }
}
.is-reduced *, .is-reduced *::before, .is-reduced *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }

/* ---------- Forced colours and high contrast ---------- */
@media (forced-colors: active) {
  .tag, .seg__opt span, .input { border: 1px solid ButtonText; }
  .btn, .media-btn { border-bottom: 1px solid ButtonText; }
  .card__edge, .tabs__ink, .band__title::after { background: Highlight; forced-color-adjust: none; }
  .seg__opt input:checked + span { background: Highlight; color: HighlightText; }
  .redact { background: CanvasText; forced-color-adjust: none; }
}
@media (prefers-contrast: more) {
  :root { --prx-fg-muted: var(--prx-fg); --prx-fg-subtle: var(--prx-fg); --prx-line: var(--prx-line-strong); }
}

@media print {
  .prx-skip, .media-ctl, video { display: none !important; }
}