/* Acabamento editorial: preserva estrutura, artes e paleta da DTC. */
:root {
  --finish-rule: rgba(164, 81, 42, .18);
  --finish-edge: rgba(20, 42, 55, .10);
  --finish-caption: .8125rem;
  --finish-body: .9375rem;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hub-row {
  position: relative;
  border-top: 0;
  padding-block: 46px 50px;
}

/* O divisor se dissolve nas margens sem criar novas caixas. */
.hub-row::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--finish-rule) 20%, var(--finish-rule) 80%, transparent);
  pointer-events: none;
}

.hub-banner + .hub-row::before { display: none; }
.hub-banner + .hub-row { padding-block-start: 26px; }

/* Fade curto apenas nas extremidades; nenhuma alteração no arquivo da arte. */
.hub-banner picture img {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.5%, #000 98.5%, transparent), linear-gradient(#000 96%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 1.5%, #000 98.5%, transparent), linear-gradient(#000 96%, transparent);
  mask-composite: intersect;
}

.library-intro > img {
  -webkit-mask-image: linear-gradient(90deg, #000 97%, transparent);
  mask-image: linear-gradient(90deg, #000 97%, transparent);
}

.row-heading { gap: 32px; margin-block-end: 28px; }
.row-heading h2, .library-copy h2,
.welcome-card h3, .path-card h3, .library-entry h3 {
  text-wrap: balance;
  font-kerning: normal;
}

.row-heading h2 { line-height: 1.2; }
.row-heading > p, .row-description, .row-footnote,
.library-copy > p:not(.eyebrow), .welcome-card p:not(.eyebrow),
.path-card p:not(.eyebrow), .library-entry p {
  text-wrap: pretty;
  overflow-wrap: break-word;
}

.library-copy > p:not(.eyebrow) {
  font-size: var(--finish-body);
  line-height: 1.65;
}

.welcome-card p:not(.eyebrow), .path-card p:not(.eyebrow),
.row-heading > p, .row-description, .library-entry p {
  font-size: .875rem;
  line-height: 1.65;
}

.card-action, .all-link, .library-modules-label,
.library-modules .module-card p, .row-footnote {
  font-size: var(--finish-caption);
  line-height: 1.6;
}

.all-link { white-space: normal; }
.eyebrow { font-size: .75rem; letter-spacing: .13em; }
.state { font-size: .75rem; line-height: 1.5; }
.library-text-cover small { font-size: .6875rem; letter-spacing: .12em; }
.module-card h3 { text-wrap: balance; }
.module-card img { border-radius: 2px; }

/* Filete discreto no cartão escuro; o foco de teclado mantém seu contorno. */
.path-card {
  position: relative;
  box-shadow: inset 0 0 0 1px var(--finish-edge);
}
.path-card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(226, 172, 131, .35), transparent);
  pointer-events: none;
}

.card-action { text-underline-offset: .25em; }
a:hover .card-action { text-decoration: underline; text-decoration-thickness: 1px; }

@container library (max-width:719px) {
  .library-intro > img {
    -webkit-mask-image: linear-gradient(#000 97%, transparent);
    mask-image: linear-gradient(#000 97%, transparent);
  }
}

@media (max-width:600px) {
  .hub-row { padding-block: 34px 38px; }
  .hub-banner + .hub-row { padding-block-start: 20px; }
  .row-heading { gap: 16px; margin-block-end: 24px; }
  .hub-banner picture img {
    -webkit-mask-image: linear-gradient(#000 98%, transparent);
    mask-image: linear-gradient(#000 98%, transparent);
  }
}

@media (prefers-contrast: more) {
  .hub-banner picture img, .library-intro > img {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .hub-row::before { background: var(--line); }
}