body > main.home-main > section.home-critiques-category { border-top-color: var(--color-border); } body > main > section > header > h2 > a, body > main.home-main:has(> section.home-spotlight > div.spotlight > article) > aside.home-watch > header > h2 > a, body > main.home-main > section.home-collections.collections-section > div > article > h3 > a { color: var(--color-heading); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; } body > main > section > header > h2 > a:is(:hover, :focus-visible), body > main.home-main:has(> section.home-spotlight > div.spotlight > article) > aside.home-watch > header > h2 > a:is(:hover, :focus-visible), body > main.home-main > section.home-collections.collections-section > div > article > h3 > a:is(:hover, :focus-visible) { color: var(--color-link-hover); } body > main > section > div.spotlight { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--space-6); margin-top: var(--space-4); } body > main > section > div.spotlight { align-items: start; overflow: hidden; overflow: clip; } body > main > section > div.spotlight > article { display: none; grid-column: 1; grid-row: 1; } body > main > section > div.spotlight > article:first-of-type { display: block; } body > main > section > div.spotlight:has(> aside > ol > li:is(:hover, :focus-within)) > article { display: none; } body > main > section > div.spotlight:has(> aside > ol > li:nth-child(1):is(:hover, :focus-within)) > article:nth-of-type(1), body > main > section > div.spotlight:has(> aside > ol > li:nth-child(2):is(:hover, :focus-within)) > article:nth-of-type(2), body > main > section > div.spotlight:has(> aside > ol > li:nth-child(3):is(:hover, :focus-within)) > article:nth-of-type(3), body > main > section > div.spotlight:has(> aside > ol > li:nth-child(4):is(:hover, :focus-within)) > article:nth-of-type(4), body > main > section > div.spotlight:has(> aside > ol > li:nth-child(5):is(:hover, :focus-within)) > article:nth-of-type(5), body > main > section > div.spotlight:has(> aside > ol > li:nth-child(6):is(:hover, :focus-within)) > article:nth-of-type(6), body > main > section > div.spotlight:has(> aside > ol > li:nth-child(7):is(:hover, :focus-within)) > article:nth-of-type(7), body > main > section > div.spotlight:has(> aside > ol > li:nth-child(8):is(:hover, :focus-within)) > article:nth-of-type(8) { display: block; } body > main > section > div.spotlight.spotlight-aside-first { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); } body > main > section > div.spotlight > aside { grid-column: 2; } body > main > section > div.spotlight.spotlight-aside-first > aside:first-child { grid-column: 1; } body > main > section > div.spotlight.spotlight-aside-first > article { grid-column: 2; } body > main > section > div.spotlight > article { margin-top: 0; padding-top: 0; border-top: 0; } body > main > section > div.spotlight > article > a { text-decoration: none; } body > main > section > div.spotlight > article figure { margin-top: 0; min-height: 21rem; border: 1px solid var(--color-border); background: linear-gradient(150deg, rgba(118, 167, 215, 0.18) 0%, rgba(93, 134, 173, 0.12) 50%, rgba(195, 208, 223, 0.1) 100%); } body > main > section > div.spotlight > article figure img { width: 100%; height: 100%; object-fit: cover; } body > main > section > div.spotlight > article h3 { margin-top: var(--space-4); font-size: clamp(1.65rem, 3.2vw, 3rem); text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.05; } body > main > section > div.spotlight > article > p:nth-of-type(1) { font-size: 1.14rem; max-width: none; } body > main > section > div.spotlight > article > p:nth-of-type(2) { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: 0.86rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-family: var(--font-heading); } body > main > section > div.spotlight > aside { margin-top: 0; border-left: 1px solid var(--color-border-strong); padding-left: var(--space-6); } body > main > section > div.spotlight > aside > h3 { margin-top: 0; font-size: 0.96rem; text-transform: uppercase; letter-spacing: 0.13em; color: var(--color-text-muted); } body > main > section > div.spotlight > aside > h3 + ol { margin-top: var(--space-3); } body > main > section > div.spotlight > aside > ol { list-style: none; margin-top: 0; display: flex; flex-direction: column; gap: var(--space-4); } body > main > section > div.spotlight > aside > ol > li { border-top: 1px solid var(--color-border); padding-top: var(--space-2); } body > main > section > div.spotlight > aside > ol > li { position: relative; padding-left: var(--space-3); } body > main > section > div.spotlight > aside > ol { gap: 0; } body > main > section > div.spotlight > aside > ol > li::before { content: ""; position: absolute; inset-block: 0.05rem 0.05rem; inset-inline-start: 0; width: var(--border-width-regular); background: transparent; } body > main > section > div.spotlight > aside > ol > li:first-child::before, body > main > section > div.spotlight > aside > ol > li:is(:hover, :focus-within)::before { background: var(--color-accent-1); } body > main > section > div.spotlight:has(> aside > ol > li:not(:first-child):is(:hover, :focus-within)) > aside > ol > li:first-child::before { background: transparent; } body > main > section > div.spotlight > aside > ol > li > a { display: flex; flex-direction: column; gap: var(--space-3); padding-block: var(--space-2); cursor: pointer; position: relative; } body > main > section > div.spotlight > aside > ol > li > a::before { content: ""; position: absolute; inset-block: -100vh; inset-inline-start: -62rem; inset-inline-end: 100%; pointer-events: none; } body > main > section > div.spotlight.spotlight-aside-first > aside > ol > li > a::before { inset-inline-start: 100%; inset-inline-end: -62rem; } body > main > section > div.spotlight > aside > ol > li:is(:hover, :focus-within) > a::before { pointer-events: auto; } body > main > section > div.spotlight > aside > ol > li > a > span:first-child { display: block; } body > main > section > div.spotlight > aside > ol > li > a > span:last-child { font-size: 0.86rem; color: var(--color-text-muted); display: flex; flex-wrap: wrap; gap: var(--space-1); text-transform: uppercase; letter-spacing: 0.04em; font-family: var(--font-heading); } body > main > section > div.spotlight > aside > ol > li:first-child { border-top: 0; padding-top: 0; } body > main > section > div.spotlight > aside > ol > li > a, body > main.home-main > section.home-rubrics > div > article > ul > li > a { text-decoration: none; color: var(--color-heading); font-family: var(--font-heading); line-height: 1.15; letter-spacing: 0.01em; } body > main > section > div.spotlight > aside > ol > li > a { font-size: 1.36rem; font-weight: 400; } body > main > section > div.spotlight > article > a > h3 { transition: color 0.16s ease; } body > main > section > div.spotlight > article:is(:hover, :focus-within) > a > h3 { color: var(--color-link-hover); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; } body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li article > a:is(:hover, :focus-visible) > h3, body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li article > header > h3 > a:is(:hover, :focus-visible), body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li article:has(> header > a:is(:hover, :focus-visible)) > header > h3 > a { color: var(--color-link-hover); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; } body > main > section > div.spotlight > article:is(:hover, :focus-within) > a > h3, body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li article > a:is(:hover, :focus-visible) > h3, body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li article > header > h3 > a:is(:hover, :focus-visible), body > main > section > div.spotlight > aside > ol > li > a:is(:hover, :focus-visible), body > main.home-main > section.home-rubrics > div > article > h3 > a:is(:hover, :focus-visible), body > main.home-main > section.home-rubrics > div > article > ul > li > a:is(:hover, :focus-visible), body > main.home-main:has(> section.home-spotlight > div.spotlight > article) > aside.home-watch > div > article > div > h3 > a:is(:hover, :focus-visible) { color: var(--color-link-hover); } body > main > section > div.spotlight:has(> aside > ol > li:nth-child(1):is(:hover, :focus-within)) > article:nth-of-type(1) > a > h3, body > main > section > div.spotlight:has(> aside > ol > li:nth-child(2):is(:hover, :focus-within)) > article:nth-of-type(2) > a > h3, body > main > section > div.spotlight:has(> aside > ol > li:nth-child(3):is(:hover, :focus-within)) > article:nth-of-type(3) > a > h3, body > main > section > div.spotlight:has(> aside > ol > li:nth-child(4):is(:hover, :focus-within)) > article:nth-of-type(4) > a > h3, body > main > section > div.spotlight:has(> aside > ol > li:nth-child(5):is(:hover, :focus-within)) > article:nth-of-type(5) > a > h3, body > main > section > div.spotlight:has(> aside > ol > li:nth-child(6):is(:hover, :focus-within)) > article:nth-of-type(6) > a > h3, body > main > section > div.spotlight:has(> aside > ol > li:nth-child(7):is(:hover, :focus-within)) > article:nth-of-type(7) > a > h3, body > main > section > div.spotlight:has(> aside > ol > li:nth-child(8):is(:hover, :focus-within)) > article:nth-of-type(8) > a > h3 { color: var(--color-link-hover); } body > main > section > div.spotlight > aside > ol > li > p { margin-top: var(--space-1); font-size: 0.86rem; color: var(--color-text-muted); display: flex; flex-wrap: wrap; gap: var(--space-1); text-transform: uppercase; letter-spacing: 0.04em; font-family: var(--font-heading); } body > main > section > div.spotlight > aside:first-child { border-left: 0; border-right: 1px solid var(--color-border-strong); padding-left: 0; padding-right: var(--space-4); } body > main.home-main > section.home-books > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 22rem)); justify-content: center; gap: var(--space-5); margin-top: var(--space-3); } body > main.home-main > section.home-books > header > p { margin-top: var(--space-2); width: 100%; border-left: var(--border-width-regular) solid var(--color-accent-2); padding: 0.62rem 0.9rem; background: linear-gradient(90deg, rgba(93, 134, 173, 0.16) 0%, rgba(93, 134, 173, 0.04) 100%); color: var(--color-heading); font-size: clamp(1.08rem, 0.98rem + 0.45vw, 1.28rem); font-weight: 400; line-height: 1.3; text-align: center; } body > main.home-main > section.home-books > div > section { margin-top: 0; width: 100%; max-width: 22rem; } body > main.home-main > section.home-books > div > section > article { display: flex; flex-direction: column; margin-top: 0; border-top: var(--border-width-regular) solid var(--color-border-strong); padding-top: var(--space-3); background: var(--color-surface-soft); padding-inline: var(--space-3); padding-bottom: var(--space-3); } body > main.home-main > section.home-books > div > section:nth-child(2n+1) > article { border-top-color: var(--color-accent-2); } body > main.home-main > section.home-books > div > section:nth-child(2n) > article { border-top-color: var(--color-accent-3); } body > main.home-main > section.home-books > div > section figure { margin-top: 0; width: min(13rem, 100%); align-self: center; aspect-ratio: 2 / 3; border: 1px solid var(--color-border); background: rgba(255, 255, 255, 0.02); min-height: 0; overflow: hidden; } body > main.home-main > section.home-books > div > section figure img { width: 100%; height: 100%; object-fit: cover; } body > main.home-main > section.home-books > div > section h2 { font-size: clamp(1.12rem, 1.8vw, 1.38rem); margin-top: var(--space-3); line-height: 1.2; text-align: center; } body > main.home-main > section.home-books > div > section p { margin-top: 0; font-size: 1rem; } body > main.home-main > section.home-books > div > section p:last-child { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-3); } body > main.home-main > section.home-books > div > section p:last-child > a.ui-button { width: 100%; min-height: 2.35rem; border-color: color-mix(in srgb, var(--color-link-external) 58%, var(--color-border-strong)); background: linear-gradient( 180deg, color-mix(in srgb, var(--color-link-external) 38%, var(--color-background-alt)) 0%, color-mix(in srgb, var(--color-link-external) 12%, var(--color-background-alt)) 100% ); } body > main.home-main > section.home-books > div > section p:last-child > a.ui-button:is(:hover, :focus-visible) { border-color: color-mix(in srgb, var(--color-link-external-hover) 70%, var(--color-border-strong)); background: linear-gradient( 180deg, color-mix(in srgb, var(--color-link-external-hover) 44%, var(--color-background-alt)) 0%, color-mix(in srgb, var(--color-link-external) 18%, var(--color-background-alt)) 100% ); } body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: row dense; gap: var(--space-6); } body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list { --articles-deep-flow-gap: 0.78rem; } body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list article { border-top: 0; padding-top: 0; } body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li article > header > a { color: inherit; text-decoration: none; } body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li article > header > p { margin-top: var(--articles-deep-flow-gap); font-size: 0.84rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-muted); } body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li article > header > p > a { color: inherit; text-decoration: none; font-family: var(--font-heading); } body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li article > header > p > a:is(:hover, :focus-visible) { color: var(--color-link-hover); } body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li article > header > h3 { margin-top: var(--articles-deep-flow-gap); } body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li article h3 { font-weight: 400; } body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li article > header:has(> p) > h3 { margin-top: calc(var(--articles-deep-flow-gap) * 0.4); } body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li article > p:nth-of-type(1) { margin-top: var(--articles-deep-flow-gap); font-size: 1.14rem; } body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li article > p:last-child { margin-top: var(--articles-deep-flow-gap); display: flex; flex-wrap: wrap; gap: var(--space-1); font-size: 0.86rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-family: var(--font-heading); } body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li article > p:last-child > a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; } body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li article > p:last-child > a:is(:hover, :focus-visible) { color: inherit; filter: brightness(1.28); } body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li { grid-column: span 3; } body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+1) { grid-column: 1 / span 3; } body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+2), body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+4) { grid-column: 4 / span 3; } body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+3), body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+5) { grid-column: 7 / span 6; } body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+3) { grid-column: 1 / span 3; } body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+5) { grid-row: span 2; } body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+6) { grid-column: 1 / span 6; grid-row: span 2; } body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+7), body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+9) { grid-column: 7 / span 3; } body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+8), body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+10) { grid-column: 10 / span 3; } body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+5) article figure, body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+6) article figure { min-height: 19rem; } body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+1) article figure, body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+2) article figure, body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+3) article figure, body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+4) article figure, body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+7) article figure, body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+8) article figure, body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+9) article figure, body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+10) article figure { min-height: 9rem; } body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+5) article h3, body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+6) article h3 { font-size: clamp(1.46rem, 2.45vw, 2.05rem); } body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+1) article h3, body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+2) article h3, body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+3) article h3, body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+4) article h3, body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+7) article h3, body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+8) article h3, body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+9) article h3, body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+10) article h3 { font-size: 1.36rem; } body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+1) article > p:last-child, body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+2) article > p:last-child, body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+3) article > p:last-child, body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+4) article > p:last-child, body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+7) article > p:last-child, body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+8) article > p:last-child, body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+9) article > p:last-child, body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+10) article > p:last-child { margin-top: var(--space-1); } body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+1) article > p:nth-of-type(1), body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+2) article > p:nth-of-type(1), body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+3) article > p:nth-of-type(1), body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+4) article > p:nth-of-type(1), body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+7) article > p:nth-of-type(1), body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+8) article > p:nth-of-type(1), body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+9) article > p:nth-of-type(1), body:has(> main.home-main > section.home-spotlight > div.spotlight > article) > main.home-main > section.home-deep > nav.articles-list > ol > li:nth-child(10n+10) article > p:nth-of-type(1) { display: none; } body > main.home-main > section.home-rubrics > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-3); } body > main.home-main > section.home-rubrics > div > article { margin-top: 0; padding-top: var(--space-3); border-top: var(--border-width-regular) solid var(--color-border-strong); background: var(--color-surface-soft); padding-inline: var(--space-3); padding-bottom: var(--space-3); } body > main.home-main > section.home-rubrics > div > article:nth-child(3n+1) { border-top-color: var(--color-accent-1); } body > main.home-main > section.home-rubrics > div > article:nth-child(3n+2) { border-top-color: var(--color-accent-2); } body > main.home-main > section.home-rubrics > div > article:nth-child(3n+3) { border-top-color: var(--color-accent-3); } body > main.home-main > section.home-rubrics > div > article > header { margin-top: 0; display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); } body > main.home-main > section.home-rubrics > div > article > header > h3 { margin-top: 0; min-width: 0; flex: 1 1 auto; } body > main.home-main > section.home-rubrics > div > article > header > h3 > a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; text-transform: uppercase; letter-spacing: 0.05em; font-size: 1.13rem; } body > main.home-main > section.home-rubrics > div > article > header > h3 > a:is(:hover, :focus-visible) { color: var(--color-link-hover); } body > main.home-main > section.home-rubrics > div > article > header > p { margin-top: 0; flex: 0 0 auto; font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-muted); white-space: nowrap; } body > main.home-main > section.home-rubrics > div > article > ul { list-style: none; padding-left: 0; } body > main.home-main > section.home-rubrics > div > article > ul > li { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); align-items: baseline; border-top: 1px solid var(--color-border); padding-top: var(--space-2); margin-top: var(--space-2); } body > main.home-main > section.home-rubrics > div > article > ul > li > a { font-size: 1.08rem; } body > main.home-main > section.home-rubrics > div > article > ul > li > a:hover { text-decoration: underline; } body > main.home-main > section.home-rubrics > div > article > ul > li > p { grid-column: 1 / -1; margin-top: 0; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); } body > main.home-main > section.home-rubrics > div > article > ul > li > p > a { color: inherit; text-decoration: none; font-family: var(--font-heading); } body > main.home-main > section.home-rubrics > div > article > ul > li > p > a:is(:hover, :focus-visible) { color: var(--color-link-hover); } body > main.home-main > section.home-rubrics > div > article > ul > li > time { font-size: 0.86rem; white-space: nowrap; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); font-family: var(--font-heading); } body > main.home-main:has(> section.home-spotlight > div.spotlight > article) > aside.home-watch { border-top-color: var(--color-accent-2); } body > main.home-main:has(> section.home-spotlight > div.spotlight > article) > aside.home-watch > header { margin-top: 0; margin-bottom: var(--space-3); } body > main.home-main:has(> section.home-spotlight > div.spotlight > article) > aside.home-watch > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } body > main.home-main:has(> section.home-spotlight > div.spotlight > article) > aside.home-watch > div > article { margin-top: 0; border: 1px solid var(--color-border); padding: var(--space-3); background: linear-gradient(160deg, rgba(118, 167, 215, 0.1) 0%, rgba(118, 167, 215, 0.02) 28%, rgba(93, 134, 173, 0.1) 100%); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; } body > main.home-main:has(> section.home-spotlight > div.spotlight > article) > aside.home-watch > div > article > a { display: block; text-decoration: none; color: var(--color-heading); } body > main.home-main:has(> section.home-spotlight > div.spotlight > article) > aside.home-watch > div > article > a > figure { margin-top: 0; min-height: 0; border: 1px solid var(--color-border); background: rgba(0, 0, 0, 0.22); overflow: hidden; height: auto; } body > main.home-main:has(> section.home-spotlight > div.spotlight > article) > aside.home-watch > div > article > a > figure img { width: auto; max-width: 100%; height: auto; display: block; } body > main.home-main:has(> section.home-spotlight > div.spotlight > article) > aside.home-watch > div > article > div { display: grid; align-content: start; gap: var(--space-2); } body > main.home-main:has(> section.home-spotlight > div.spotlight > article) > aside.home-watch > div > article > div > h3 { margin-top: 0; font-size: 1.08rem; line-height: 1.2; text-transform: none; } body > main.home-main:has(> section.home-spotlight > div.spotlight > article) > aside.home-watch > div > article > div > h3 > a { text-decoration: none; color: var(--color-heading); } body > main.home-main:has(> section.home-spotlight > div.spotlight > article) > aside.home-watch > div > article > div > h3 > a:is(:hover, :focus-visible), body > main.home-main:has(> section.home-spotlight > div.spotlight > article) > aside.home-watch > div > article:has(> a:is(:hover, :focus-visible)) > div > h3 > a { color: var(--color-link-hover); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; } body > main.home-main:has(> section.home-spotlight > div.spotlight > article) > aside.home-watch > div > article > div > p { margin-top: 0; font-size: 0.93rem; line-height: 1.45; color: var(--color-text); } body > main.home-main:has(> section.home-spotlight > div.spotlight > article) > aside.home-watch > div > article > div > footer { margin-top: 0; } body > main.home-main:has(> section.home-spotlight > div.spotlight > article) > aside.home-watch > div > article > div > footer > p { margin-top: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; font-size: 0.86rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); font-family: var(--font-heading); } body > main.home-main:has(> section.home-spotlight > div.spotlight > article) > aside.home-watch > div > article > div > footer > p + p { margin-top: 0.2rem; } body > main.home-main:has(> section.home-spotlight > div.spotlight > article) > aside.home-watch > div > article > div > footer > p > a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; } body > main.home-main:has(> section.home-spotlight > div.spotlight > article) > aside.home-watch > div > article > div > footer > p > a:is(:hover, :focus-visible) { color: var(--color-link-hover); } body > main.home-main:has(> section.home-spotlight > div.spotlight > article) > aside.home-watch > div > article > div > footer > p > strong { border: 1px solid var(--color-border); padding: 0.2rem 0.48rem; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--color-heading); background: rgba(29, 45, 64, 0.32); } body > main.home-main:has(> section.home-spotlight > div.spotlight > article) > aside.home-watch > div > article > div > footer > p > strong[data-state="ok"] { border-color: rgba(118, 167, 215, 0.6); color: #b8d8f8; background: rgba(48, 84, 122, 0.28); } body > main.home-main:has(> section.home-spotlight > div.spotlight > article) > aside.home-watch > div > article > div > footer > p > strong[data-state="warn"] { border-color: rgba(212, 172, 102, 0.7); color: #f2d59e; background: rgba(110, 78, 24, 0.32); box-shadow: inset 0 0 0 1px rgba(246, 214, 155, 0.12); } body > main.home-main:has(> section.home-spotlight > div.spotlight > article) > aside.home-watch > div > article > div > footer > p > strong[data-state="dead"] { border-color: rgba(219, 126, 147, 0.72); color: #ffd4df; background: rgba(124, 39, 62, 0.36); box-shadow: inset 0 0 0 1px rgba(255, 212, 223, 0.14); } body > main.home-main:has(> section.home-spotlight > div.spotlight > article) > aside.home-watch > div > article > div > footer > p > strong:is([data-state="warn"], [data-state="dead"]) { cursor: help; } body > main.home-main > section.home-collections.collections-section > div { margin-top: var(--space-3); display: grid; gap: var(--space-3); min-width: 0; } body > main.home-main > section.home-collections.collections-section > div > article { margin-top: 0; border-top: 1px solid var(--color-border); padding-top: var(--space-2); width: 100%; min-width: 0; overflow-x: hidden; } body > main.home-main > section.home-collections.collections-section > div > article > h3 { margin-top: 0; font-size: clamp(1.04rem, 1.35vw, 1.18rem); text-transform: uppercase; letter-spacing: 0.03em; } body > main.home-main > section.home-collections.collections-section > div > article > h3 > a:is(:hover, :focus-visible) { color: var(--color-link-hover); } body > main.home-main > section.home-collections.collections-section > div > article > ul { list-style: none; margin-top: var(--space-2); margin-inline: 0; padding-left: 0; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; display: flex; flex-wrap: nowrap; gap: var(--space-1); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; padding-bottom: 0.2rem; scrollbar-width: thin; } body > main.home-main > section.home-collections.collections-section > div > article > ul > li { flex: 0 0 auto; margin-top: 0; } body > main.home-main > section.home-collections.collections-section > div > article > ul > li > a { display: block; text-decoration: none; } body > main.home-main > section.home-collections.collections-section > div > article > ul > li > a > figure { margin-top: 0; width: max-content; border: 1px solid var(--color-border); background: linear-gradient(145deg, rgba(118, 167, 215, 0.12) 0%, rgba(93, 134, 173, 0.09) 100%); overflow: hidden; } body > main.home-main > section.home-collections.collections-section > div > article > ul > li > a > figure img { width: auto; height: 128px; max-width: none; display: block; } body > main.home-main > section.home-collections.collections-section > div > article > ul > li > a:is(:hover, :focus-visible) > figure { border-color: var(--color-link-hover); } body > main.home-main > section.home-collections.collections-section > div > article > p { margin-top: var(--space-1); display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: 0.8rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; } body > main.home-main > section.home-collections.collections-section > div > article > p > a { text-transform: none; letter-spacing: 0; color: var(--color-text); text-decoration: none; border: 1px solid var(--color-border); padding: 0.1rem 0.4rem; font-size: 0.84rem; line-height: 1.2; } body > main.home-main > section.home-collections.collections-section > div > article > p > a:is(:hover, :focus-visible) { color: var(--color-link-hover); border-color: var(--color-link-hover); } /* Le carrousel des collections ne doit pas élargir le viewport mobile. */ html:has(body > main.home-main > section.home-collections.collections-section), body:has(> main.home-main > section.home-collections.collections-section) { overflow-x: clip; }