.hx-arts:not(#hx_) {
--ar-accent: var( --hx-accent, var( --helix-plum, #764452 ) );
--ar-ink:    var( --helix-ink, #1C1C1C );
--ar-muted:  #6E6862;
--ar-line:   #E8DFD2;
--ar-tint:   var( --hx-tint, var( --helix-cream, #F6F1EA ) );
--ar-card:   #fff;
--ar-ease:   cubic-bezier( .2, .8, .2, 1 );
max-width: 1240px;
margin: 0 auto;
padding: clamp( 28px, 5vw, 64px ) clamp( 16px, 3vw, 40px ) clamp( 48px, 7vw, 96px );
color: var( --ar-ink );
font-family: inherit;
}
.hx-arts:not(#hx_) *, .hx-arts:not(#hx_) *::before, .hx-arts:not(#hx_) *::after { box-sizing: border-box; } .hx-arts__hero:not(#hx_) { max-width: 760px; margin: 0 0 clamp( 28px, 4vw, 48px ); }
.hx-arts__eyebrow:not(#hx_) {
margin: 0 0 12px;
font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
color: var( --ar-accent );
}
.hx-arts__title:not(#hx_) {
margin: 0 0 14px;
font-size: clamp( 34px, 5vw, 56px ); line-height: 1.05; font-weight: 800; letter-spacing: -.02em;
color: var( --ar-ink );
}
.hx-arts__lead:not(#hx_) { margin: 0; font-size: clamp( 16px, 1.6vw, 19px ); line-height: 1.6; color: var( --ar-muted ); } .hx-arts__list:not(#hx_) {
display: grid;
grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
gap: clamp( 16px, 2.2vw, 28px );
}
.hx-arts__card:not(#hx_) { min-width: 0; }
.hx-arts__link:not(#hx_) {
display: flex; flex-direction: column; height: 100%;
background: var( --ar-card );
border: 1px solid var( --ar-line );
border-radius: 20px;
overflow: hidden;
color: inherit; text-decoration: none;
transition: transform .35s var( --ar-ease ), box-shadow .35s var( --ar-ease ), border-color .35s;
}
.hx-arts__link:hover:not(#hx_), .hx-arts__link:focus-visible:not(#hx_) {
transform: translateY( -3px );
border-color: #C6B2AE; border-color: color-mix( in srgb, var( --ar-accent ) 30%, var( --ar-line ) );
box-shadow: 0 18px 40px -22px rgba( 43, 33, 30, .35 );
}
.hx-arts__link:focus-visible:not(#hx_) { outline: 2px solid var( --ar-accent ); outline-offset: 3px; }
.hx-arts__img:not(#hx_) { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var( --ar-tint ); }
.hx-arts__img:not(#hx_) img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform .7s var( --ar-ease );
}
.hx-arts__link:hover:not(#hx_) .hx-arts__img img { transform: scale( 1.04 ); }
.hx-arts__noimg:not(#hx_) {
position: absolute; inset: 0;
background: repeating-linear-gradient( 90deg, #E9E0DB 0 14px, var( --ar-tint ) 14px 22px ); background: repeating-linear-gradient( 90deg, color-mix( in srgb, var( --ar-accent ) 10%, var( --ar-tint ) ) 0 14px, var( --ar-tint ) 14px 22px );
}
.hx-arts__body:not(#hx_) { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 20px 22px 22px; }
.hx-arts__meta:not(#hx_) { font-size: 13px; color: var( --ar-muted ); }
.hx-arts__h:not(#hx_) {
margin: 0;
font-size: 20px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em;
color: var( --ar-ink );
transition: color .25s;
}
.hx-arts__link:hover:not(#hx_) .hx-arts__h { color: var( --ar-accent ); }
.hx-arts__text:not(#hx_) { font-size: 15px; line-height: 1.6; color: var( --ar-muted ); }
.hx-arts__more:not(#hx_) {
display: inline-flex; align-items: center; gap: 8px;
margin-top: auto; padding-top: 6px;
font-size: 14px; font-weight: 700; color: var( --ar-accent );
}
.hx-arts__more:not(#hx_) svg { transition: transform .3s var( --ar-ease ); }
.hx-arts__link:hover:not(#hx_) .hx-arts__more svg { transform: translateX( 4px ); } .hx-arts__card--lead:not(#hx_) { grid-column: 1 / -1; }
.hx-arts__card--lead:not(#hx_) .hx-arts__link { flex-direction: row; }
.hx-arts__card--lead:not(#hx_) .hx-arts__img { flex: 0 0 56%; aspect-ratio: auto; min-height: 360px; }
.hx-arts__card--lead:not(#hx_) .hx-arts__body { justify-content: center; gap: 14px; padding: clamp( 24px, 3.5vw, 48px ); }
.hx-arts__card--lead:not(#hx_) .hx-arts__h { font-size: clamp( 24px, 2.6vw, 34px ); line-height: 1.15; }
.hx-arts__card--lead:not(#hx_) .hx-arts__text { font-size: 16px; }
.hx-arts__card--lead:not(#hx_) .hx-arts__more { margin-top: 8px; }
.hx-arts__empty:not(#hx_) { padding: 32px; border-radius: 20px; background: var( --ar-tint ); color: var( --ar-muted ); }
.hx-arts__empty:not(#hx_) a { color: var( --ar-accent ); } .hx-arts__cta:not(#hx_) {
display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
margin-top: clamp( 36px, 5vw, 64px );
padding: clamp( 24px, 3.5vw, 40px );
border-radius: 24px;
background: var( --ar-tint );
}
.hx-arts__cta-h:not(#hx_) { margin: 0 0 6px; font-size: clamp( 20px, 2.2vw, 26px ); font-weight: 800; color: var( --ar-ink ); }
.hx-arts__cta-p:not(#hx_) { margin: 0; max-width: 560px; font-size: 15px; line-height: 1.6; color: var( --ar-muted ); }
.hx-arts__cta-btns:not(#hx_) { display: flex; gap: 10px; flex-wrap: wrap; }
.hx-arts__btn:not(#hx_) {
display: inline-flex; align-items: center; justify-content: center;
min-height: 48px; padding: 0 22px; border-radius: 999px;
background: var( --ar-accent ); color: #fff; border: 1px solid var( --ar-accent );
font-size: 15px; font-weight: 700; text-decoration: none;
transition: background .25s, color .25s;
}
.hx-arts__btn:hover:not(#hx_) { background: #643A46; background: color-mix( in srgb, var( --ar-accent ) 85%, #000 ); color: #fff; }
.hx-arts__btn--ghost:not(#hx_) { background: transparent; color: var( --ar-accent ); }
.hx-arts__btn--ghost:hover:not(#hx_) { background: var( --ar-accent ); color: #fff; } @media ( max-width: 1024px ) {
.hx-arts__list:not(#hx_) { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}
@media ( max-width: 860px ) {
.hx-arts__card--lead:not(#hx_) .hx-arts__link { flex-direction: column; }
.hx-arts__card--lead:not(#hx_) .hx-arts__img { flex: none; aspect-ratio: 16 / 10; min-height: 0; }
}
@media ( max-width: 640px ) {
.hx-arts__list:not(#hx_) { grid-template-columns: 1fr; }
.hx-arts__body:not(#hx_) { padding: 18px; }
.hx-arts__cta-btns:not(#hx_), .hx-arts__btn:not(#hx_) { width: 100%; }
}
@media ( prefers-reduced-motion: reduce ) {
.hx-arts__link:not(#hx_), .hx-arts__img:not(#hx_) img, .hx-arts__more:not(#hx_) svg { transition: none; }
.hx-arts__link:hover:not(#hx_) { transform: none; }
} html.hx-dark:not(#hx_) .hx-arts { --ar-ink: #F2EDE6; --ar-muted: #B9B0A6; --ar-line: #3A322E; --ar-card: #221C1A; --ar-tint: #2B2421; } @media ( min-width: 641px ) {
.hx-arts__list:has( > .hx-arts__card:nth-child( 2 ):last-child ):not(#hx_) { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
.hx-arts__list:has( > .hx-arts__card:nth-child( 2 ):last-child ):not(#hx_) .hx-arts__card--lead { grid-column: auto; }
.hx-arts__list:has( > .hx-arts__card:nth-child( 2 ):last-child ):not(#hx_) .hx-arts__card--lead .hx-arts__link { flex-direction: column; }
.hx-arts__list:has( > .hx-arts__card:nth-child( 2 ):last-child ):not(#hx_) .hx-arts__card--lead .hx-arts__img { flex: none; aspect-ratio: 4 / 3; min-height: 0; }
.hx-arts__list:has( > .hx-arts__card:nth-child( 2 ):last-child ):not(#hx_) .hx-arts__card--lead .hx-arts__body { justify-content: flex-start; gap: 10px; padding: 20px 22px 22px; }
.hx-arts__list:has( > .hx-arts__card:nth-child( 2 ):last-child ):not(#hx_) .hx-arts__h,
.hx-arts__list:has( > .hx-arts__card:nth-child( 2 ):last-child ):not(#hx_) .hx-arts__card--lead .hx-arts__h { font-size: clamp( 20px, 2vw, 24px ); }
.hx-arts__list:has( > .hx-arts__card:nth-child( 2 ):last-child ):not(#hx_) .hx-arts__card--lead .hx-arts__text { font-size: 15px; }
.hx-arts__list:has( > .hx-arts__card:nth-child( 2 ):last-child ):not(#hx_) .hx-arts__card--lead .hx-arts__more { margin-top: auto; }
}