/*! Hits and Clips Magazine — hcm-archive.css générée par assets/css/build.mjs (archive.css, artists.css, releases.css, search.css, newsletter-archive.css, about.css) : ne pas éditer, modifier assets/css/src/. */
body.hcm-listing {
background-color: var(--hcm-bg);
}
body.hcm-listing .site.container {
background-color: transparent;
}
body.hcm-listing .site-content {
display: block;
padding: 0;
}
body.hcm-listing .site-content .content-area {
float: none;
width: 100%;
}
body.hcm-listing .site-main {
margin: 0;
}
.hcm-arch {
box-sizing: border-box;
max-width: var(--hcm-wide);
margin: 0 auto;
padding: var(--hcm-s5) var(--hcm-gutter) var(--hcm-s7);
}
.hcm-arch__head {
margin: 0 0 var(--hcm-s5);
padding: var(--hcm-s5) var(--hcm-s4);
border: 1px solid var(--hcm-line);
border-radius: var(--hcm-r-card);
background-color: var(--hcm-surface);
}
@media (min-width: 768px) {
.hcm-arch__head {
padding: var(--hcm-s6) 40px;
}
}
.hcm-arch__head > :last-child {
margin-bottom: 0;
}
.hcm-arch__head .hcm-kicker {
margin: 0 0 var(--hcm-s2);
}
.hcm-arch .hcm-arch__title {
margin: 0;
color: var(--hcm-ink);
font-family: var(--hcm-font-head);
font-size: calc(var(--hcm-fs-h1) * 1.2);
font-weight: 700;
line-height: 1.15;
overflow-wrap: break-word;
text-wrap: balance;
}
.hcm-arch__intro {
max-width: var(--hcm-read);
margin: var(--hcm-s3) 0 0;
color: var(--hcm-text);
font-size: 1rem;
line-height: 1.6;
}
.hcm-arch__intro p {
margin: 0 0 var(--hcm-s2);
}
.hcm-arch__intro > :last-child {
margin-bottom: 0;
}
.hcm-arch__intro a,
.hcm-arch__more {
color: var(--hcm-accent-dark);
font-weight: 600;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}
.hcm-arch__intro a:hover,
.hcm-arch__more:hover {
color: var(--hcm-ink);
}
.hcm-arch__meta {
margin: var(--hcm-s3) 0 0;
color: var(--hcm-muted);
font-size: var(--hcm-fs-small);
font-weight: 600;
}
.hcm-arch__form {
max-width: 560px;
margin: var(--hcm-s4) 0 0;
}
.hcm-arch__home {
margin: var(--hcm-s5) 0 0;
}
.hcm-arch__head--author {
display: flex;
align-items: flex-start;
gap: var(--hcm-s5);
}
.hcm-arch__avatar {
flex: none;
width: 96px;
height: 96px;
border-radius: 50%;
object-fit: cover;
background-color: var(--hcm-soft);
}
@media (min-width: 768px) {
.hcm-arch__avatar {
width: 120px;
height: 120px;
}
}
.hcm-arch__who {
min-width: 0;
}
.hcm-arch__bio {
max-width: var(--hcm-read);
margin: var(--hcm-s3) 0 0;
color: var(--hcm-text);
font-size: 1rem;
line-height: 1.6;
}
@media (max-width: 559px) {
.hcm-arch__head--author {
display: grid;
grid-template-columns: 72px minmax(0, 1fr);
column-gap: var(--hcm-s4);
align-items: center;
}
.hcm-arch__head--author .hcm-arch__who {
display: contents;
}
.hcm-arch__head--author .hcm-arch__avatar {
grid-row: 1 / span 2;
width: 72px;
height: 72px;
}
.hcm-arch__head--author .hcm-kicker {
grid-column: 2;
align-self: end;
margin: 0 0 var(--hcm-s1);
}
.hcm-arch__head--author .hcm-arch__title {
grid-column: 2;
align-self: start;
}
.hcm-arch__head--author .hcm-arch__bio,
.hcm-arch__head--author .hcm-arch__pills,
.hcm-arch__head--author .hcm-arch__meta {
grid-column: 1 / -1;
}
}
body.hcm-listing--category[class*="hcm-cat-"] .hcm-arch__head {
--hcm-motif: none;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
box-sizing: border-box;
min-height: 220px;
overflow: hidden;
isolation: isolate;
border: 0;
background-color: var(--hcm-page-cat);
background-image: linear-gradient(115deg, var(--hcm-page-cat) 30%, color-mix(in srgb, var(--hcm-page-cat) 70%, #000));
box-shadow: 0 20px 40px -28px color-mix(in srgb, var(--hcm-page-cat) 70%, #000);
color: var(--hcm-on-accent);
}
body.hcm-listing--category[class*="hcm-cat-"] .hcm-arch__head::before {
content: "";
position: absolute;
z-index: -1;
top: 50%;
right: -56px;
width: 220px;
height: 220px;
background: var(--hcm-motif) center / contain no-repeat;
transform: translateY(-50%) rotate(-8deg);
}
@media (min-width: 768px) {
body.hcm-listing--category[class*="hcm-cat-"] .hcm-arch__head {
min-height: 260px;
}
body.hcm-listing--category[class*="hcm-cat-"] .hcm-arch__head::before {
right: 24px;
width: 300px;
height: 300px;
}
body.hcm-listing--category[class*="hcm-cat-"] .hcm-arch__head > * {
max-width: min(var(--hcm-read), 64%);
}
}
@media (min-width: 1024px) {
body.hcm-listing--category[class*="hcm-cat-"] .hcm-arch__head::before {
right: 56px;
width: 340px;
height: 340px;
}
}
body.hcm-listing--category[class*="hcm-cat-"] .hcm-arch__head .hcm-kicker {
color: var(--hcm-on-accent);
letter-spacing: 0.14em;
}
body.hcm-listing--category[class*="hcm-cat-"] .hcm-arch .hcm-arch__title {
color: var(--hcm-on-accent);
font-size: clamp(2rem, 1.35rem + 2.6vw, 3.375rem);
letter-spacing: -0.02em;
line-height: 1.05;
}
body.hcm-listing--category[class*="hcm-cat-"] .hcm-arch__head :is(.hcm-arch__intro, .hcm-arch__meta),
body.hcm-listing--category[class*="hcm-cat-"] .hcm-arch__head .hcm-arch__intro a,
body.hcm-listing--category[class*="hcm-cat-"] .hcm-arch__head .hcm-arch__more {
color: var(--hcm-on-accent);
}
body.hcm-listing--category[class*="hcm-cat-"] .hcm-arch__head .hcm-arch__intro a:hover,
body.hcm-listing--category[class*="hcm-cat-"] .hcm-arch__head .hcm-arch__more:hover {
text-decoration-thickness: 2px;
}
body.hcm-listing--category[class*="hcm-cat-"] .hcm-arch__head .hcm-pill {
border-color: rgba(255, 255, 255, 0.45);
background-color: rgba(0, 0, 0, 0.2);
color: var(--hcm-on-accent);
}
body.hcm-listing.hcm-cat-actu .hcm-arch__head {
--hcm-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 246 160'%3E%3Cg fill='%23000' fill-opacity='.2'%3E%3Crect x='6' y='63' width='9' height='34' rx='4.5'/%3E%3Crect x='21' y='45' width='9' height='70' rx='4.5'/%3E%3Crect x='36' y='56' width='9' height='48' rx='4.5'/%3E%3Crect x='51' y='28' width='9' height='104' rx='4.5'/%3E%3Crect x='66' y='47' width='9' height='66' rx='4.5'/%3E%3Crect x='81' y='14' width='9' height='132' rx='4.5'/%3E%3Crect x='96' y='34' width='9' height='92' rx='4.5'/%3E%3Crect x='111' y='5' width='9' height='150' rx='4.5'/%3E%3Crect x='126' y='25' width='9' height='110' rx='4.5'/%3E%3Crect x='141' y='42' width='9' height='76' rx='4.5'/%3E%3Crect x='156' y='18' width='9' height='124' rx='4.5'/%3E%3Crect x='171' y='51' width='9' height='58' rx='4.5'/%3E%3Crect x='186' y='36' width='9' height='88' rx='4.5'/%3E%3Crect x='201' y='60' width='9' height='40' rx='4.5'/%3E%3Crect x='216' y='48' width='9' height='64' rx='4.5'/%3E%3Crect x='231' y='66' width='9' height='28' rx='4.5'/%3E%3C/g%3E%3Cpath d='M0 80h246' stroke='%23000' stroke-opacity='.18' stroke-width='2'/%3E%3C/svg%3E");
}
body.hcm-listing.hcm-cat-k-pop .hcm-arch__head {
--hcm-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cg fill='%23000'%3E%3Cpath fill-opacity='.2' d='M132 28C145.4 98.6 145.4 98.6 216 112C145.4 125.4 145.4 125.4 132 196C118.6 125.4 118.6 125.4 48 112C118.6 98.6 118.6 98.6 132 28Z'/%3E%3Cpath fill-opacity='.18' d='M58 134C63.8 164.2 63.8 164.2 94 170C63.8 175.8 63.8 175.8 58 206C52.2 175.8 52.2 175.8 22 170C52.2 164.2 52.2 164.2 58 134Z'/%3E%3Cpath fill-opacity='.2' d='M196 14C200.8 39.2 200.8 39.2 226 44C200.8 48.8 200.8 48.8 196 74C191.2 48.8 191.2 48.8 166 44C191.2 39.2 191.2 39.2 196 14Z'/%3E%3Cpath fill-opacity='.16' d='M206 152C208.9 167.1 208.9 167.1 224 170C208.9 172.9 208.9 172.9 206 188C203.1 172.9 203.1 172.9 188 170C203.1 167.1 203.1 167.1 206 152Z'/%3E%3Cpath fill-opacity='.16' d='M70 18C72.6 31.4 72.6 31.4 86 34C72.6 36.6 72.6 36.6 70 50C67.4 36.6 67.4 36.6 54 34C67.4 31.4 67.4 31.4 70 18Z'/%3E%3Ccircle cx='40' cy='60' r='5' fill-opacity='.22'/%3E%3Ccircle cx='200' cy='210' r='6' fill-opacity='.2'/%3E%3Ccircle cx='96' cy='214' r='4' fill-opacity='.2'/%3E%3Ccircle cx='214' cy='112' r='4' fill-opacity='.2'/%3E%3C/g%3E%3C/svg%3E");
}
body.hcm-listing.hcm-cat-pop-culture .hcm-arch__head {
--hcm-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 240'%3E%3Cdefs%3E%3Cpattern id='d' width='14' height='14' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='7' cy='7' r='4.2'/%3E%3C/pattern%3E%3CradialGradient id='g' cx='.62' cy='.5' r='.6'%3E%3Cstop offset='.35' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cmask id='m'%3E%3Crect width='260' height='240' fill='url(%23g)'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='260' height='240' fill='url(%23d)' fill-opacity='.24' mask='url(%23m)'/%3E%3Cpolygon points='150 8 164.4 47.4 192.9 16.5 191.1 58.5 229.2 40.8 211.5 78.9 253.5 77.1 222.6 105.6 262 120 222.6 134.4 253.5 162.9 211.5 161.1 229.2 199.2 191.1 181.5 192.9 223.5 164.4 192.6 150 232 135.6 192.6 107.1 223.5 108.9 181.5 70.8 199.2 88.5 161.1 46.5 162.9 77.4 134.4 38 120 77.4 105.6 46.5 77.1 88.5 78.9 70.8 40.8 108.9 58.5 107.1 16.5 135.6 47.4' fill='%23000' fill-opacity='.16'/%3E%3C/svg%3E");
}
body.hcm-listing.hcm-cat-playlist .hcm-arch__head {
--hcm-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Ccircle cx='120' cy='120' r='112' fill='%23000' fill-opacity='.2'/%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.22' stroke-width='1.5'%3E%3Ccircle cx='120' cy='120' r='100'/%3E%3Ccircle cx='120' cy='120' r='90'/%3E%3Ccircle cx='120' cy='120' r='80'/%3E%3Ccircle cx='120' cy='120' r='70'/%3E%3Ccircle cx='120' cy='120' r='60'/%3E%3Ccircle cx='120' cy='120' r='50'/%3E%3C/g%3E%3Ccircle cx='120' cy='120' r='34' fill='%23000' fill-opacity='.2'/%3E%3Ccircle cx='120' cy='120' r='5' fill='%23000' fill-opacity='.35'/%3E%3Cpath d='M120 26a94 94 0 0 1 81 47' fill='none' stroke='%23000' stroke-opacity='.25' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
}
body.hcm-listing.hcm-cat-nostalgie .hcm-arch__head {
--hcm-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 180'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.24' stroke-width='7' stroke-linejoin='round'%3E%3Crect x='10' y='12' width='240' height='156' rx='16'/%3E%3Crect x='48' y='46' width='164' height='64' rx='32'/%3E%3Cpath d='M60 168l14-34h112l14 34'/%3E%3C/g%3E%3Cg fill='%23000' fill-opacity='.22'%3E%3Ccircle cx='90' cy='78' r='20'/%3E%3Ccircle cx='170' cy='78' r='20'/%3E%3Crect x='10' y='12' width='240' height='24' rx='12'/%3E%3C/g%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.3' stroke-width='4'%3E%3Ccircle cx='90' cy='78' r='8'/%3E%3Ccircle cx='170' cy='78' r='8'/%3E%3C/g%3E%3C/svg%3E");
}
body.hcm-listing--category[class*="hcm-cat-"] .hcm-arch__grid .hcm-arch__card:hover {
border-color: color-mix(in srgb, var(--hcm-cat) 45%, transparent);
}
.hcm-arch__pills {
display: flex;
flex-wrap: wrap;
gap: 14px var(--hcm-s2);
margin: var(--hcm-s4) 0 0;
padding: 0;
list-style: none;
}
.hcm-arch__pills li {
margin: 0;
}
.hcm-arch__pills .hcm-pill {
position: relative;
min-height: 32px;
box-sizing: border-box;
}
.hcm-arch__pills .hcm-pill::before {
content: "";
position: absolute;
inset: -7px -2px;
}
.hcm-arch__pills .hcm-pill[aria-current="page"] {
border-color: var(--hcm-cat, var(--hcm-accent));
color: var(--hcm-cat-dark, var(--hcm-accent-dark));
}
.hcm-arch > .hcm-arch__pills {
margin: 0 0 var(--hcm-s5);
}
.hcm-arch__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--hcm-s5);
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 600px) {
.hcm-arch__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.hcm-arch__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.hcm-arch__grid .hcm-arch__card {
margin: 0;
border: 1px solid var(--hcm-line);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.hcm-arch__grid .hcm-arch__card:hover {
border-color: color-mix(in srgb, var(--hcm-ink) 16%, transparent);
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.hcm-arch__card .hcm-card__body {
flex: 1 1 auto;
padding: var(--hcm-s4) var(--hcm-s4) 18px;
}
.hcm-arch__grid .hcm-card--noimg {
align-self: start;
}
.hcm-arch .hcm-card__title {
font-size: 1.125rem;
font-weight: 600;
line-height: 1.35;
overflow-wrap: break-word;
text-wrap: pretty;
}
.hcm-arch__card .hcm-card__meta {
margin-top: auto;
padding-top: var(--hcm-s1);
}
.hcm-pagination {
margin: var(--hcm-s6) 0 0;
}
.hcm-pagination ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--hcm-s2);
margin: 0;
padding: 0;
list-style: none;
}
.hcm-pagination li {
margin: 0;
}
.hcm-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
box-sizing: border-box;
min-width: var(--hcm-tap);
min-height: var(--hcm-tap);
padding: 0 var(--hcm-s3);
border: 1px solid var(--hcm-line);
border-radius: var(--hcm-r-btn);
background-color: var(--hcm-surface);
color: var(--hcm-ink);
font-family: var(--hcm-font-head);
font-size: 0.9375rem;
font-weight: 600;
line-height: 1;
text-decoration: none;
}
.hcm-pagination a.page-numbers:hover,
.hcm-pagination a.page-numbers:focus-visible {
border-color: var(--hcm-cat, var(--hcm-accent));
color: var(--hcm-cat-dark, var(--hcm-accent-dark));
}
.hcm-pagination .page-numbers.current {
border-color: var(--hcm-cat, var(--hcm-accent));
background-color: var(--hcm-cat, var(--hcm-accent));
color: var(--hcm-on-accent);
}
.hcm-pagination .page-numbers.dots {
min-width: 0;
padding: 0 2px;
border-color: transparent;
background-color: transparent;
color: var(--hcm-muted);
}
@media (max-width: 479px) {
.hcm-pagination__label {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
}
.hcm-arch__about,
.hcm-arch__related,
.hcm-arch__latest {
margin: var(--hcm-s7) 0 0;
}
.hcm-arch__about .hcm-section-title,
.hcm-arch__related .hcm-section-title,
.hcm-arch__latest .hcm-section-title {
margin-top: 0;
}
.hcm-arch__about-text {
max-width: var(--hcm-read);
padding: var(--hcm-s5) var(--hcm-s4);
border: 1px solid var(--hcm-line);
border-radius: var(--hcm-r-card);
background-color: var(--hcm-surface);
font-size: 1rem;
line-height: 1.65;
overflow-wrap: break-word;
}
@media (min-width: 768px) {
.hcm-arch__about-text {
padding: var(--hcm-s6) 40px;
}
}
.hcm-arch__about-text > :first-child {
margin-top: 0;
}
.hcm-arch__about-text > :last-child {
margin-bottom: 0;
}
.hcm-arch__about-text h2,
.hcm-arch__about-text h3 {
margin: 1.4em 0 0.5em;
font-size: var(--hcm-fs-h3);
font-weight: 600;
line-height: 1.3;
}
.hcm-arch__about-text p {
margin: 0 0 1em;
}
.hcm-empty {
padding: var(--hcm-s5) var(--hcm-s4);
border: 1px solid var(--hcm-line);
border-left: 4px solid var(--hcm-accent);
border-radius: var(--hcm-r-card);
background-color: var(--hcm-surface);
font-size: 1rem;
}
@media (min-width: 768px) {
.hcm-empty {
padding: var(--hcm-s5) var(--hcm-s6);
}
}
.hcm-empty p {
margin: 0 0 var(--hcm-s2);
}
.hcm-empty .hcm-empty__title {
color: var(--hcm-ink);
font-family: var(--hcm-font-head);
font-size: 1.125rem;
font-weight: 700;
}
.hcm-frise__legend {
margin: 0 0 var(--hcm-s4);
color: var(--hcm-muted);
font-size: var(--hcm-fs-small);
}
.hcm-frise {
--hcm-frise-rail: 18px;
max-width: 880px;
margin: 0;
padding: 0;
list-style: none;
}
.hcm-frise__item {
position: relative;
margin: 0;
padding: 0 0 var(--hcm-s5) calc(var(--hcm-frise-rail) + var(--hcm-s4));
}
.hcm-frise__item::before {
content: "";
position: absolute;
top: 6px;
bottom: -6px;
left: calc(var(--hcm-frise-rail) / 2 - 1px);
width: 2px;
background-color: var(--hcm-line);
}
.hcm-frise__item:last-child::before {
bottom: auto;
height: 12px;
}
.hcm-frise__item::after {
content: "";
position: absolute;
top: 3px;
left: calc(var(--hcm-frise-rail) / 2 - 6px);
box-sizing: border-box;
width: 12px;
height: 12px;
border: 2px solid var(--hcm-accent);
border-radius: 50%;
background-color: var(--hcm-surface);
}
.hcm-frise__item:first-child::after {
background-color: var(--hcm-accent);
}
.hcm-frise__date {
display: block;
margin: 0 0 var(--hcm-s2);
color: var(--hcm-accent-dark);
font-family: var(--hcm-font-head);
font-size: var(--hcm-fs-meta);
font-weight: 700;
letter-spacing: 0.02em;
line-height: 18px;
}
.hcm-frise__card {
--hcm-frise-thumb: 104px;
flex-direction: row;
align-items: stretch;
border: 1px solid var(--hcm-line);
}
@media (min-width: 600px) {
.hcm-frise__card {
--hcm-frise-thumb: 240px;
}
}
.hcm-frise__card .hcm-card__media {
flex: none;
align-self: flex-start;
width: var(--hcm-frise-thumb);
}
.hcm-frise__card .hcm-card__body {
justify-content: center;
min-width: 0;
padding: var(--hcm-s3) var(--hcm-s4);
}
.hcm-frise .hcm-card__title {
font-size: 0.9375rem;
line-height: 1.3;
}
@media (max-width: 599px) {
.hcm-frise__card .hcm-card__body {
gap: var(--hcm-s1);
padding: 10px var(--hcm-s3);
}
.hcm-frise__card .hcm-badges {
left: 4px;
top: 4px;
}
.hcm-frise__card .hcm-badge + .hcm-badge,
.hcm-frise__card .hcm-card__tracks {
display: none;
}
.hcm-frise__card .hcm-badge {
height: 22px;
justify-content: center;
padding: 0;
width: 22px;
}
.hcm-frise__card .hcm-badge__label {
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
}
@media (min-width: 600px) {
.hcm-frise .hcm-card__title {
font-size: 1.1875rem;
line-height: 1.35;
}
}
.hcm-arch__head--404 .hcm-arch__pills {
margin-top: var(--hcm-s5);
}
body.hcm-page {
--hcm-page-pad: 8px;
--hcm-card-pad: 12px;
background-color: var(--hcm-bg);
}
@media (min-width: 768px) {
body.hcm-page {
--hcm-page-pad: var(--hcm-gutter);
--hcm-card-pad: 40px;
}
}
body.hcm-page .site.container {
background-color: transparent;
}
body.hcm-page .site-content {
display: block;
padding: var(--hcm-s4) var(--hcm-page-pad) var(--hcm-s6);
}
body.hcm-page .site-content .content-area {
float: none;
width: 100%;
max-width: calc(var(--hcm-read) + 2 * var(--hcm-card-pad));
margin-inline: auto;
}
body.hcm-page .site-main {
margin: 0;
}
body.hcm-page .inside-article {
padding: max(var(--hcm-card-pad), var(--hcm-s5)) var(--hcm-card-pad) var(--hcm-card-pad);
background-color: var(--hcm-surface);
}
body.hcm-page .entry-header {
margin: 0 0 var(--hcm-s5);
padding: 0 0 var(--hcm-s4);
border-bottom: 1px solid var(--hcm-line);
}
body.hcm-page .entry-header .entry-title {
margin: 0;
color: var(--hcm-ink);
font-size: var(--hcm-fs-h1);
font-weight: 600;
line-height: 1.2;
overflow-wrap: break-word;
}
body.hcm-page .entry-content:not(:first-child) {
margin-top: 0;
}
body.hcm-page .entry-content {
overflow-wrap: break-word;
}
body.hcm-page .entry-content > :last-child {
margin-bottom: 0;
}
body.hcm-page .entry-content h2 {
margin: 1.6em 0 0.6em;
font-size: var(--hcm-fs-h2);
font-weight: 500;
line-height: 1.3;
}
body.hcm-page .entry-content h3 {
margin: 1.4em 0 0.5em;
font-size: var(--hcm-fs-h3);
font-weight: 500;
line-height: 1.3;
}
body.hcm-page .entry-content ul,
body.hcm-page .entry-content ol {
margin: 0 0 1.5em;
padding-left: 20px;
}
body.hcm-page .entry-content li {
margin: 0 0 0.4em;
}
body.hcm-page .entry-content table {
display: block;
max-width: 100%;
overflow-x: auto;
border-collapse: collapse;
font-size: 0.9em;
}
body.hcm-page .entry-content th,
body.hcm-page .entry-content td {
padding: 0.6em 0.9em;
border: 1px solid var(--hcm-line);
text-align: left;
vertical-align: top;
}
body.hcm-page .authors-list {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--hcm-s4);
margin: 0;
}
body.hcm-page .authors-list .author-box {
flex-direction: row;
align-items: flex-start;
gap: var(--hcm-s4);
margin: 0;
padding: var(--hcm-s4);
border: 1px solid var(--hcm-line);
border-radius: var(--hcm-r-card);
}
body.hcm-page .authors-list .author-box .avatar {
flex: none;
margin: 0;
}
body.hcm-page .authors-list .author-box .avatar img {
width: 72px;
height: 72px;
object-fit: cover;
}
@media (min-width: 768px) {
body.hcm-page .authors-list .author-box .avatar img {
width: 100px;
height: 100px;
}
}
body.hcm-page .authors-list .author-box h4 {
margin: 0;
font-size: 1.125rem;
font-weight: 600;
}
body.hcm-page .authors-list .author-box h4 a {
position: relative;
color: var(--hcm-accent-dark);
text-decoration: none;
}
body.hcm-page .authors-list .author-box h4 a::before {
content: "";
position: absolute;
inset: -14px 0 -8px;
}
body.hcm-page .authors-list .author-box h4 a:hover {
text-decoration: underline;
}
body.hcm-page .authors-list .author-box p {
font-size: var(--hcm-fs-small);
line-height: 1.55;
}
body.hcm-page .entry-content form label {
color: var(--hcm-ink);
font-size: var(--hcm-fs-small);
font-weight: 600;
}
body.hcm-page .entry-content form input[type="email"],
body.hcm-page .entry-content form input[type="text"],
body.hcm-page .entry-content form textarea {
box-sizing: border-box;
width: 100%;
max-width: 100%;
min-height: 48px;
margin-top: 6px;
padding: 10px 14px;
border: 1px solid var(--hcm-muted);
border-radius: 8px;
background-color: var(--hcm-surface);
color: var(--hcm-ink);
font-family: var(--hcm-font-body);
font-size: 16px;
}
body.hcm-page .entry-content form input[type="email"]:focus,
body.hcm-page .entry-content form input[type="text"]:focus,
body.hcm-page .entry-content form textarea:focus {
border-color: var(--hcm-accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--hcm-accent) 22%, transparent);
outline: none;
}
body.hcm-page .entry-content form input[type="submit"] {
min-height: var(--hcm-tap);
padding: 11px 22px;
border: 0;
border-radius: var(--hcm-r-btn);
background-color: var(--hcm-accent);
color: var(--hcm-on-accent);
font-family: var(--hcm-font-head);
font-size: 0.9375rem;
font-weight: 700;
cursor: pointer;
}
body.hcm-page .entry-content form input[type="submit"]:hover,
body.hcm-page .entry-content form input[type="submit"]:focus-visible {
background-color: var(--hcm-accent-dark);
color: var(--hcm-on-accent);
}
.hcm-artists {
background-color: var(--hcm-surface);
}
.hcm-artist {
align-items: start;
display: grid;
gap: var(--hcm-s4);
grid-template-columns: 72px minmax(0, 1fr);
}
.hcm-artist + .hcm-artist {
border-top: 1px solid var(--hcm-line);
margin-top: var(--hcm-s4);
padding-top: var(--hcm-s4);
}
.hcm-artist__photo {
aspect-ratio: 1;
background-color: var(--hcm-soft);
border-radius: 50%;
display: block;
height: 72px;
object-fit: cover;
width: 72px;
}
.hcm-artist__body {
display: flex;
flex-direction: column;
gap: var(--hcm-s1);
min-width: 0;
}
.hcm-artist__name {
color: var(--hcm-ink);
font-family: var(--hcm-font-head);
font-size: 1.125rem;
font-weight: 700;
line-height: 1.25;
overflow-wrap: anywhere;
}
.hcm-artist__facts {
color: var(--hcm-muted);
font-size: var(--hcm-fs-small);
font-weight: 600;
line-height: 1.4;
}
.hcm-artist__album {
color: var(--hcm-text);
font-size: var(--hcm-fs-small);
line-height: 1.4;
}
.hcm-artist__album cite,
.hcm-artist-head__facts cite {
color: var(--hcm-ink);
font-style: italic;
font-weight: 600;
}
.hcm-artist__links {
display: flex;
flex-wrap: wrap;
gap: 14px var(--hcm-s2);
list-style: none;
margin: 6px 0 2px;
padding: 0;
}
.hcm-artist__links li {
margin: 0;
}
.hcm-artist-link,
.hcm-artist-link:visited {
box-sizing: border-box;
font-size: 0.8125rem;
gap: 6px;
min-height: 32px;
position: relative;
}
.hcm-artist-link::before {
content: "";
inset: -7px -2px;
position: absolute;
}
.hcm-artist-link .hcm-icon {
height: 16px;
width: 16px;
}
.hcm-artist__more,
.hcm-artist__more:visited {
align-self: flex-start;
color: var(--hcm-accent-dark);
display: inline-block;
font-family: var(--hcm-font-head);
font-size: var(--hcm-fs-small);
font-weight: 700;
line-height: 20px;
padding: 12px 0;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}
.hcm-artist__more:hover,
.hcm-artist__more:focus-visible {
color: var(--hcm-ink);
}
@media (max-width: 479px) {
.hcm-artist {
gap: var(--hcm-s3);
grid-template-columns: 56px minmax(0, 1fr);
}
.hcm-artist__photo {
height: 56px;
width: 56px;
}
}
.hcm-artist-head__photo {
aspect-ratio: 1;
}
.hcm-artist-head__facts {
color: var(--hcm-text);
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.5;
margin: var(--hcm-s2) 0 0;
}
.hcm-artist-head__links {
margin-top: var(--hcm-s4);
}
@media (max-width: 559px) {
.hcm-arch__head--artist .hcm-artist-head__facts,
.hcm-arch__head--artist .hcm-arch__intro {
grid-column: 1 / -1;
}
}
.hcm-arch--artist .hcm-week {
margin: var(--hcm-s7) 0 0;
max-width: var(--hcm-read);
}
.hcm-artist-initials {
align-items: center;
background-color: var(--hcm-accent-dark);
border-radius: 50%;
box-sizing: border-box;
color: var(--hcm-on-accent);
display: flex;
flex: none;
font-family: var(--hcm-font-head);
font-size: 1.25rem;
font-weight: 700;
justify-content: center;
letter-spacing: 0.02em;
line-height: 1;
}
.hcm-arch__avatar.hcm-artist-initials {
font-size: 2rem;
}
.hcm-relh__top {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--hcm-s2) var(--hcm-s4);
justify-content: space-between;
margin: 0 0 var(--hcm-s2);
}
.hcm-arch__head.hcm-relh .hcm-kicker {
margin: 0;
}
.hcm-relh__week {
color: var(--hcm-muted);
}
.hcm-relh__dates {
color: var(--hcm-ink);
display: block;
font-family: var(--hcm-font-head);
font-size: 1.0625rem;
font-weight: 600;
letter-spacing: normal;
line-height: 1.35;
margin: var(--hcm-s2) 0 0;
}
.hcm-relh__dates::first-letter {
text-transform: uppercase;
}
.hcm-relh__chapo {
color: var(--hcm-ink);
font-size: 1.0625rem;
}
.hcm-relh__sum {
color: var(--hcm-text);
font-size: 0.9375rem;
line-height: 1.55;
}
.hcm-rel-nav {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--hcm-s2) var(--hcm-s3);
justify-content: space-between;
}
.hcm-rel-nav__step,
.hcm-rel-nav__step:visited,
.hcm-rel-nav__now,
.hcm-rel-nav__now:visited {
align-items: center;
background-color: var(--hcm-surface);
border: 1px solid var(--hcm-line);
border-radius: var(--hcm-r-btn);
box-sizing: border-box;
color: var(--hcm-ink);
display: inline-flex;
font-family: var(--hcm-font-head);
gap: 8px;
min-height: var(--hcm-tap);
padding: 6px 14px;
text-decoration: none;
}
.hcm-rel-nav__now {
font-size: var(--hcm-fs-small);
font-weight: 700;
}
.hcm-rel-nav__step:hover,
.hcm-rel-nav__step:focus-visible,
.hcm-rel-nav__now:hover,
.hcm-rel-nav__now:focus-visible {
border-color: var(--hcm-accent);
color: var(--hcm-accent-dark);
}
.hcm-rel-nav__arrow.hcm-icon {
height: 18px;
width: 18px;
}
.hcm-rel-nav__text {
display: flex;
flex-direction: column;
gap: 2px;
line-height: 1.2;
}
.hcm-rel-nav__label {
font-size: var(--hcm-fs-small);
font-weight: 700;
}
.hcm-rel-nav__dates {
color: var(--hcm-muted);
font-size: 0.75rem;
font-weight: 600;
}
.hcm-rel-nav--top {
gap: var(--hcm-s2);
justify-content: flex-start;
}
.hcm-rel-nav--top .hcm-rel-nav__step,
.hcm-rel-nav--top .hcm-rel-nav__now {
padding: 4px 10px;
}
.hcm-rel-nav--top .hcm-rel-nav__label {
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.hcm-rel-nav--top .hcm-rel-nav__dates {
color: var(--hcm-ink);
font-size: var(--hcm-fs-meta);
font-weight: 700;
}
.hcm-rel-nav--bottom {
margin: var(--hcm-s7) 0 0;
}
.hcm-rel-nav--bottom .hcm-rel-nav__step--next {
margin-left: auto;
text-align: right;
}
@media (max-width: 379px) {
.hcm-rel-nav--bottom .hcm-rel-nav__label {
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
}
.hcm-relstrip {
margin: 0 0 var(--hcm-s4);
}
.hcm-relstrip__list {
display: grid;
gap: 4px;
grid-template-columns: repeat(7, minmax(0, 1fr));
list-style: none;
margin: 0;
padding: 0;
}
.hcm-relstrip__day {
margin: 0;
min-width: 0;
}
.hcm-relstrip__a {
align-items: center;
background-color: var(--hcm-surface);
border: 1px solid var(--hcm-line);
border-radius: 10px;
box-sizing: border-box;
color: var(--hcm-ink);
display: flex;
flex-direction: column;
gap: 2px;
height: 100%;
justify-content: center;
min-height: 66px;
padding: 6px 2px;
text-align: center;
text-decoration: none;
}
a.hcm-relstrip__a:hover,
a.hcm-relstrip__a:focus-visible {
border-color: var(--hcm-accent);
color: var(--hcm-accent-dark);
}
.hcm-relstrip__dow {
color: var(--hcm-muted);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.05em;
line-height: 1.2;
text-transform: uppercase;
}
.hcm-relstrip__num {
font-family: var(--hcm-font-head);
font-size: 1.125rem;
font-weight: 700;
line-height: 1.1;
white-space: nowrap;
}
.hcm-relstrip__count {
background-color: color-mix(in srgb, var(--hcm-accent) 9%, var(--hcm-surface));
border-radius: var(--hcm-r-pill);
box-sizing: border-box;
color: var(--hcm-accent-dark);
font-size: 0.6875rem;
font-weight: 700;
line-height: 1.5;
min-width: 20px;
padding: 0 5px;
}
.is-empty .hcm-relstrip__a {
background-color: transparent;
border-style: dashed;
}
.is-empty .hcm-relstrip__count {
background-color: transparent;
color: var(--hcm-muted);
}
.is-today .hcm-relstrip__a {
background-color: var(--hcm-ink);
border-color: var(--hcm-ink);
color: var(--hcm-on-accent);
}
.is-today .hcm-relstrip__dow {
color: color-mix(in srgb, var(--hcm-on-accent) 78%, var(--hcm-ink));
}
.is-today .hcm-relstrip__count {
background-color: var(--hcm-accent);
color: var(--hcm-on-accent);
}
.is-today a.hcm-relstrip__a:hover,
.is-today a.hcm-relstrip__a:focus-visible {
border-color: var(--hcm-accent);
color: var(--hcm-on-accent);
}
@media (min-width: 768px) {
.hcm-relstrip__list {
gap: var(--hcm-s2);
}
.hcm-relstrip__a {
min-height: 76px;
}
.hcm-relstrip__num {
font-size: 1.375rem;
}
}
.hcm-relf {
margin: 0 0 var(--hcm-s5);
}
.hcm-relf__list {
display: flex;
flex-wrap: wrap;
gap: var(--hcm-s2);
list-style: none;
margin: 0;
padding: 0;
}
.hcm-relf__list > li {
margin: 0;
}
.hcm-relf__a,
.hcm-relf__a:visited {
align-items: center;
background-color: var(--hcm-surface);
border: 1px solid var(--hcm-line);
border-radius: var(--hcm-r-pill);
box-sizing: border-box;
color: var(--hcm-ink);
display: inline-flex;
font-family: var(--hcm-font-head);
font-size: var(--hcm-fs-small);
font-weight: 600;
gap: var(--hcm-s2);
min-height: 40px;
padding: 4px 6px 4px 14px;
position: relative;
text-decoration: none;
white-space: nowrap;
}
.hcm-relf__a::before {
content: "";
inset: -2px 0;
position: absolute;
}
.hcm-relf__n {
background-color: var(--hcm-soft);
border-radius: var(--hcm-r-pill);
color: var(--hcm-text);
font-family: var(--hcm-font-body);
font-size: 0.75rem;
font-weight: 700;
line-height: 1.5;
min-width: 26px;
padding: 2px 8px;
text-align: center;
box-sizing: border-box;
}
a.hcm-relf__a:hover,
a.hcm-relf__a:focus-visible {
border-color: var(--hcm-accent);
color: var(--hcm-accent-dark);
}
.hcm-relf__a.is-on,
.hcm-relf__a.is-on:visited,
a.hcm-relf__a.is-on:hover,
a.hcm-relf__a.is-on:focus-visible {
background-color: var(--hcm-ink);
border-color: var(--hcm-ink);
color: var(--hcm-on-accent);
}
.hcm-relf__a.is-on .hcm-relf__n {
background-color: rgba(255, 255, 255, 0.16);
color: var(--hcm-on-accent);
}
.hcm-relf__list > .hcm-relf__extra {
margin-left: auto;
}
.hcm-relf__a--kpop,
.hcm-relf__a--kpop:visited {
border-color: var(--hcm-c-k-pop);
color: var(--hcm-c-k-pop-dark);
}
a.hcm-relf__a--kpop:hover,
a.hcm-relf__a--kpop:focus-visible {
background-color: var(--hcm-c-k-pop);
border-color: var(--hcm-c-k-pop);
color: var(--hcm-on-accent);
}
.hcm-relsel {
background-color: var(--hcm-ink);
background-image: radial-gradient(120% 90% at 100% 0%, rgba(215, 24, 42, 0.28), transparent 60%);
border-radius: 16px;
color: var(--hcm-on-accent);
margin: 0 0 var(--hcm-s7);
padding: 20px var(--hcm-s4) var(--hcm-s2);
}
.hcm-relsel__head {
margin: 0 0 var(--hcm-s4);
}
.hcm-arch .hcm-relsel__h {
color: var(--hcm-on-accent);
font-family: var(--hcm-font-head);
font-size: 1.375rem;
font-weight: 700;
line-height: 1.2;
margin: 0;
}
.hcm-relsel__sub {
color: rgba(255, 255, 255, 0.78);
font-size: var(--hcm-fs-small);
line-height: 1.45;
margin: var(--hcm-s1) 0 0;
}
.hcm-relsel__lead {
display: grid;
gap: var(--hcm-s4);
}
.hcm-relsel__cover {
aspect-ratio: 1;
background-color: #1e293b;
border-radius: 10px;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
overflow: hidden;
}
.hcm-relsel__img {
display: block;
height: 100%;
object-fit: cover;
width: 100%;
}
.hcm-relsel__cover .hcm-relmono {
font-size: 4rem;
}
.hcm-relsel__body {
display: flex;
flex-direction: column;
gap: var(--hcm-s2);
min-width: 0;
}
.hcm-relsel__body p {
margin: 0;
}
.hcm-relsel__meta {
align-items: center;
color: rgba(255, 255, 255, 0.78);
display: flex;
flex-wrap: wrap;
font-size: var(--hcm-fs-meta);
font-weight: 600;
gap: 4px 10px;
}
.hcm-relsel__pick {
align-items: center;
color: #ffd166;
display: inline-flex;
font-weight: 700;
gap: 5px;
}
.hcm-relsel__pick .hcm-icon {
height: 15px;
width: 15px;
}
.hcm-relsel__type {
color: var(--hcm-c-actu-bright, #ff5364);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.hcm-arch .hcm-relsel__title {
color: var(--hcm-on-accent);
font-family: var(--hcm-font-head);
font-size: 1.5rem;
font-weight: 700;
line-height: 1.15;
margin: 0;
overflow-wrap: anywhere;
text-wrap: balance;
}
.hcm-relsel__artist {
font-size: 1.0625rem;
font-weight: 600;
}
.hcm-relsel__artist-link,
.hcm-relsel__artist-link:visited,
.hcm-relsel__more,
.hcm-relsel__more:visited,
.hcm-relsel .hcm-relread,
.hcm-relsel .hcm-relread:visited {
color: var(--hcm-on-accent);
text-decoration: underline;
text-decoration-color: rgba(255, 255, 255, 0.45);
text-underline-offset: 0.2em;
}
.hcm-relsel__artist-link:hover,
.hcm-relsel__artist-link:focus-visible,
.hcm-relsel__more:hover,
.hcm-relsel__more:focus-visible,
.hcm-relsel .hcm-relread:hover,
.hcm-relsel .hcm-relread:focus-visible {
color: #ffd166;
text-decoration-color: currentColor;
}
.hcm-relsel__note {
color: rgba(255, 255, 255, 0.85);
font-size: 0.9375rem;
line-height: 1.5;
}
.hcm-relsel__links {
align-items: center;
display: flex;
flex-wrap: wrap;
font-size: var(--hcm-fs-meta);
font-weight: 700;
gap: 0 var(--hcm-s5);
}
.hcm-relsel__links:empty {
display: none;
}
.hcm-relsel__more {
align-items: center;
display: inline-flex;
min-height: var(--hcm-tap);
}
.hcm-relsel .hcm-listen__a,
.hcm-relsel .hcm-listen__a:visited {
color: var(--hcm-on-accent);
}
.hcm-relsel .hcm-listen__dot {
background-color: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.22);
}
.hcm-relsel .hcm-listen__a:focus-visible .hcm-listen__dot {
outline-color: var(--hcm-on-accent);
}
.hcm-relsel .hcm-relbadge {
background-color: rgba(255, 255, 255, 0.14);
color: var(--hcm-on-accent);
}
.hcm-relsel .hcm-relbadge--today {
background-color: var(--hcm-accent);
}
.hcm-relsel__rows {
display: grid;
list-style: none;
margin: var(--hcm-s4) 0 0;
padding: 0;
}
.hcm-relsel .hcm-rr {
--hcm-rr-thumb: 72px;
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.hcm-relsel .hcm-rr__thumb {
background-color: #1e293b;
}
.hcm-relsel .hcm-rr__meta {
color: rgba(255, 255, 255, 0.72);
}
.hcm-relsel .hcm-rr__type {
color: var(--hcm-c-actu-bright, #ff5364);
}
.hcm-relsel .hcm-rr .hcm-rr__title {
color: var(--hcm-on-accent);
}
.hcm-relsel .hcm-rr__artist {
color: rgba(255, 255, 255, 0.85);
}
.hcm-relsel .hcm-rr__artist-link,
.hcm-relsel .hcm-rr__artist-link:visited {
color: var(--hcm-on-accent);
}
.hcm-relsel .hcm-rr__artist-link:hover,
.hcm-relsel .hcm-rr__artist-link:focus-visible {
color: #ffd166;
}
@media (min-width: 600px) {
.hcm-relsel .hcm-rr {
--hcm-rr-thumb: 88px;
}
}
@media (min-width: 768px) {
.hcm-relsel {
padding: 28px 32px var(--hcm-s3);
}
.hcm-arch .hcm-relsel__h {
font-size: 1.625rem;
}
.hcm-relsel__lead {
align-items: center;
gap: 28px;
grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
}
.hcm-arch .hcm-relsel__title {
font-size: 1.75rem;
}
.hcm-relsel__rows {
column-gap: var(--hcm-s6);
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: var(--hcm-s5);
}
}
@media (min-width: 1024px) {
.hcm-relsel__lead {
grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
gap: 40px;
}
.hcm-arch .hcm-relsel__title {
font-size: 2.125rem;
}
}
.hcm-reldays {
display: grid;
gap: var(--hcm-s7);
}
.hcm-relday {
min-width: 0;
scroll-margin-top: var(--hcm-s4);
}
.hcm-relday,
.hcm-rellive,
.hcm-relnext {
contain-intrinsic-size: auto 1100px;
content-visibility: auto;
}
.hcm-relday__head {
align-items: baseline;
border-top: 3px solid var(--hcm-ink);
display: flex;
flex-wrap: wrap;
gap: var(--hcm-s1) var(--hcm-s3);
margin: 0 0 var(--hcm-s4);
padding: var(--hcm-s3) 0 0;
}
.hcm-relday.is-today .hcm-relday__head {
border-top-color: var(--hcm-accent);
}
.hcm-arch .hcm-relday__title {
color: var(--hcm-ink);
font-family: var(--hcm-font-head);
font-size: 1.375rem;
font-weight: 700;
line-height: 1.2;
margin: 0;
}
.hcm-relday__name {
color: var(--hcm-accent-dark);
}
.hcm-relday__head .hcm-relbadge {
align-self: center;
}
.hcm-relday__count {
color: var(--hcm-muted);
font-size: var(--hcm-fs-small);
font-weight: 600;
margin: 0 0 0 auto;
}
.hcm-relgrid {
display: grid;
gap: var(--hcm-s5) var(--hcm-s3);
grid-template-columns: repeat(2, minmax(0, 1fr));
list-style: none;
margin: 0;
padding: 0;
}
@media (min-width: 600px) {
.hcm-relgrid {
column-gap: var(--hcm-s4);
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 900px) {
.hcm-relgrid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (min-width: 1200px) {
.hcm-relgrid {
column-gap: var(--hcm-s5);
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
.hcm-rc {
display: flex;
flex-direction: column;
margin: 0;
min-width: 0;
scroll-margin-top: var(--hcm-s4);
}
.hcm-rc__cover {
aspect-ratio: 1;
background-color: var(--hcm-soft);
border-radius: 8px;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 6px 16px rgba(15, 23, 42, 0.1);
overflow: hidden;
position: relative;
}
.hcm-rc__img {
display: block;
height: 100%;
object-fit: cover;
width: 100%;
}
.hcm-rc__cover .hcm-relmono {
font-size: 2.5rem;
}
.hcm-rc__star {
align-items: center;
background-color: var(--hcm-accent);
border-radius: 50%;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
color: #ffd166;
display: flex;
height: 28px;
justify-content: center;
left: 6px;
position: absolute;
top: 6px;
width: 28px;
}
.hcm-rc__star .hcm-icon {
height: 15px;
width: 15px;
}
.hcm-rc:target .hcm-rc__cover {
outline: 3px solid var(--hcm-accent);
outline-offset: 3px;
}
.hcm-rc__body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
padding: 10px 0 0;
}
.hcm-rc__body p {
margin: 0;
}
.hcm-rc__meta {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 2px 6px;
line-height: 1.4;
}
.hcm-rc__type {
color: var(--hcm-type, var(--hcm-muted));
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.hcm-arch .hcm-rc__title {
color: var(--hcm-ink);
display: -webkit-box;
font-family: var(--hcm-font-head);
font-size: 0.9375rem;
font-weight: 700;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
line-height: 1.3;
margin: 0;
overflow: hidden;
overflow-wrap: anywhere;
}
.hcm-rc__artist {
font-size: var(--hcm-fs-small);
font-weight: 600;
line-height: 1.35;
overflow-wrap: anywhere;
}
.hcm-rc__artist-link,
.hcm-rc__artist-link:visited {
color: var(--hcm-accent-dark);
text-decoration: none;
}
.hcm-rc__artist-link,
.hcm-rl__artist-link,
.hcm-relsel__artist-link {
display: inline-block;
min-width: 24px;
padding: 3px 0;
}
.hcm-rc__artist-link:hover,
.hcm-rc__artist-link:focus-visible {
color: var(--hcm-ink);
text-decoration: underline;
text-underline-offset: 0.15em;
}
.hcm-rc__note {
color: var(--hcm-muted);
display: -webkit-box;
font-size: var(--hcm-fs-meta);
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 1.4;
overflow: hidden;
}
.hcm-rc .hcm-listen {
margin-top: 2px;
}
.hcm-rellist {
column-gap: var(--hcm-s6);
display: grid;
list-style: none;
margin: 0;
padding: 0;
}
.hcm-relgrid + .hcm-rellist {
margin-top: var(--hcm-s5);
}
.hcm-rellist > .hcm-rr {
border-top: 1px solid var(--hcm-line);
}
@media (min-width: 900px) {
.hcm-rellist {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.hcm-rr:target .hcm-rr__thumb {
outline: 3px solid var(--hcm-accent);
outline-offset: 2px;
}
.hcm-relmore {
margin: var(--hcm-s5) 0 0;
}
.hcm-relmore__sum {
align-items: center;
background-color: var(--hcm-surface);
border: 1px solid var(--hcm-line);
border-radius: var(--hcm-r-btn);
box-sizing: border-box;
color: var(--hcm-ink);
cursor: pointer;
display: flex;
font-family: var(--hcm-font-head);
font-size: var(--hcm-fs-small);
font-weight: 700;
gap: var(--hcm-s2);
justify-content: center;
list-style: none;
min-height: var(--hcm-tap);
padding: 8px 16px;
text-align: center;
}
.hcm-relmore__sum::-webkit-details-marker {
display: none;
}
.hcm-relmore__sum:hover {
border-color: var(--hcm-accent);
color: var(--hcm-accent-dark);
}
.hcm-relmore__sum:focus-visible {
outline: 2px solid var(--hcm-accent);
outline-offset: 2px;
}
.hcm-relmore__chev.hcm-icon {
height: 18px;
width: 18px;
}
.hcm-relmore__open,
.hcm-relmore[open] .hcm-relmore__closed {
display: none;
}
.hcm-relmore[open] .hcm-relmore__open {
display: inline;
}
.hcm-relmore[open] .hcm-relmore__chev {
transform: rotate(180deg);
}
.hcm-relmore__body {
padding: var(--hcm-s5) 0 0;
}
@media (max-width: 599px) {
.hcm-relmore__day {
display: none;
}
}
.hcm-relday__live {
align-items: flex-start;
background-color: var(--hcm-surface);
border: 1px solid var(--hcm-line);
border-radius: var(--hcm-r-btn);
color: var(--hcm-text);
display: flex;
font-size: var(--hcm-fs-small);
gap: var(--hcm-s2);
line-height: 1.6;
margin: var(--hcm-s5) 0 0;
padding: 8px 12px;
}
.hcm-relday__live .hcm-icon {
color: var(--hcm-c-nostalgie-dark, #8c3f00);
height: 18px;
margin-top: 3px;
width: 18px;
}
.hcm-relday__live a {
color: var(--hcm-accent-dark);
font-weight: 700;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}
.hcm-relday__city {
color: var(--hcm-muted);
}
.hcm-rellive,
.hcm-relnext,
.hcm-relnl {
margin: var(--hcm-s7) 0 0;
}
.hcm-rellive:first-child {
margin-top: 0;
}
.hcm-rellive__head {
align-items: baseline;
border-top: 3px solid var(--hcm-ink);
display: flex;
flex-wrap: wrap;
gap: 0 var(--hcm-s4);
margin: 0 0 var(--hcm-s4);
padding: var(--hcm-s3) 0 0;
}
.hcm-arch .hcm-rellive__h,
.hcm-arch .hcm-relnext__h {
color: var(--hcm-ink);
font-family: var(--hcm-font-head);
font-size: 1.375rem;
font-weight: 700;
line-height: 1.2;
margin: 0;
}
.hcm-rellive__sub {
color: var(--hcm-muted);
flex: 1 1 auto;
font-size: var(--hcm-fs-small);
margin: 0;
}
.hcm-rellive__ics,
.hcm-rellive__ics:visited {
align-items: center;
color: var(--hcm-accent-dark);
display: inline-flex;
font-family: var(--hcm-font-head);
font-size: var(--hcm-fs-meta);
font-weight: 700;
gap: 6px;
min-height: var(--hcm-tap);
text-decoration: none;
}
.hcm-rellive__ics:hover,
.hcm-rellive__ics:focus-visible {
color: var(--hcm-ink);
text-decoration: underline;
}
.hcm-rellive__ics .hcm-icon {
height: 18px;
width: 18px;
}
.hcm-rellive__list {
display: grid;
gap: var(--hcm-s4);
list-style: none;
margin: 0;
padding: 0;
}
@media (min-width: 900px) {
.hcm-rellive__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.hcm-rl {
background-color: var(--hcm-surface);
border: 1px solid var(--hcm-line);
border-radius: var(--hcm-r-card);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
display: grid;
grid-template-columns: 64px minmax(0, 1fr);
margin: 0;
min-width: 0;
overflow: hidden;
scroll-margin-top: var(--hcm-s4);
}
.hcm-rl:target {
border-color: var(--hcm-accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--hcm-accent) 18%, transparent);
}
.hcm-rl__date {
align-items: center;
background-color: var(--hcm-ink);
color: var(--hcm-on-accent);
display: flex;
flex-direction: column;
padding: var(--hcm-s4) 4px;
position: relative;
text-align: center;
}
.hcm-rl--tournee .hcm-rl__date {
background-color: var(--hcm-accent-dark);
}
.hcm-rl__date::after {
border-right: 2px dashed var(--hcm-line);
bottom: 8px;
content: "";
position: absolute;
right: -1px;
top: 8px;
}
.hcm-rl__date time {
display: flex;
flex-direction: column;
gap: 2px;
}
.hcm-rl__dow {
color: rgba(255, 255, 255, 0.8);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.hcm-rl__day {
font-family: var(--hcm-font-head);
font-size: 1.75rem;
font-weight: 700;
line-height: 1;
}
.hcm-rl__mon {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
}
.hcm-rl__until {
border-top: 1px solid rgba(255, 255, 255, 0.3);
font-size: 0.6875rem;
font-weight: 700;
line-height: 1.3;
margin-top: var(--hcm-s2);
padding-top: var(--hcm-s2);
}
.hcm-rl__main {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
padding: 14px 14px 10px 16px;
}
.hcm-rl__main p {
margin: 0;
}
.hcm-rl__head {
align-items: center;
display: grid;
gap: var(--hcm-s3);
grid-template-columns: 56px minmax(0, 1fr);
}
.hcm-rl__photo {
aspect-ratio: 1;
background-color: var(--hcm-soft);
border-radius: 50%;
box-shadow: 0 0 0 2px var(--hcm-surface), 0 0 0 3px var(--hcm-line);
overflow: hidden;
width: 56px;
}
.hcm-rl__img {
display: block;
height: 100%;
object-fit: cover;
width: 100%;
}
.hcm-rl__photo .hcm-relmono {
font-size: 1.125rem;
}
.hcm-rl__id {
min-width: 0;
}
.hcm-rl__meta {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 2px 6px;
line-height: 1.4;
}
.hcm-rl__type {
color: var(--hcm-c-nostalgie-dark, #8c3f00);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.hcm-arch .hcm-rl__title {
color: var(--hcm-ink);
font-family: var(--hcm-font-head);
font-size: 1rem;
font-weight: 700;
line-height: 1.3;
margin: 1px 0 0;
overflow-wrap: anywhere;
}
.hcm-rl__artist {
font-size: var(--hcm-fs-small);
font-weight: 600;
overflow-wrap: anywhere;
}
.hcm-rl__artist-link,
.hcm-rl__artist-link:visited {
color: var(--hcm-accent-dark);
text-decoration: none;
}
.hcm-rl__artist-link:hover,
.hcm-rl__artist-link:focus-visible {
color: var(--hcm-ink);
text-decoration: underline;
}
.hcm-rl__where {
color: var(--hcm-ink);
font-size: var(--hcm-fs-small);
font-weight: 600;
line-height: 1.4;
overflow-wrap: anywhere;
}
.hcm-rl__facts,
.hcm-rl__note {
color: var(--hcm-text);
font-size: var(--hcm-fs-meta);
line-height: 1.45;
}
.hcm-rl__actions {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--hcm-s2) var(--hcm-s3);
margin-top: 4px;
}
.hcm-rl__actions .hcm-btn {
font-size: var(--hcm-fs-meta);
gap: 6px;
}
.hcm-rl__actions .hcm-icon {
height: 16px;
width: 16px;
}
.hcm-rl__more,
.hcm-rl__more:visited {
align-items: center;
color: var(--hcm-accent-dark);
display: inline-flex;
font-size: var(--hcm-fs-meta);
font-weight: 700;
min-height: var(--hcm-tap);
text-decoration: none;
}
.hcm-rl__more:hover,
.hcm-rl__more:focus-visible {
color: var(--hcm-ink);
text-decoration: underline;
}
@media (max-width: 479px) {
.hcm-rl__ics-pre {
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.hcm-rl__ics-word {
text-transform: capitalize;
}
}
@media (min-width: 480px) {
.hcm-rl {
grid-template-columns: 76px minmax(0, 1fr);
}
.hcm-rl__head {
grid-template-columns: 64px minmax(0, 1fr);
}
.hcm-rl__photo {
width: 64px;
}
.hcm-rl__day {
font-size: 2rem;
}
}
.hcm-relnext {
background-color: var(--hcm-surface);
border: 1px solid var(--hcm-line);
border-radius: var(--hcm-r-card);
padding: 20px var(--hcm-s4) var(--hcm-s2);
}
.hcm-relnext__head {
align-items: baseline;
display: flex;
flex-wrap: wrap;
gap: 2px var(--hcm-s3);
margin: 0 0 var(--hcm-s4);
}
.hcm-relnext__sub {
color: var(--hcm-muted);
font-size: var(--hcm-fs-small);
font-weight: 600;
margin: 0;
}
.hcm-relnext__list {
display: grid;
gap: var(--hcm-s4) var(--hcm-s3);
grid-template-columns: repeat(3, minmax(0, 1fr));
list-style: none;
margin: 0;
padding: 0;
}
@media (min-width: 900px) {
.hcm-relnext {
padding: 24px 28px var(--hcm-s2);
}
.hcm-relnext__list {
column-gap: var(--hcm-s4);
grid-template-columns: repeat(6, minmax(0, 1fr));
}
}
.hcm-relnext__item {
margin: 0;
min-width: 0;
}
.hcm-relnext__a,
.hcm-relnext__a:visited {
color: var(--hcm-ink);
display: flex;
flex-direction: column;
gap: 2px;
text-decoration: none;
}
.hcm-relnext__cover {
aspect-ratio: 1;
background-color: var(--hcm-soft);
border-radius: 8px;
display: block;
margin: 0 0 6px;
overflow: hidden;
}
.hcm-relnext__img {
display: block;
height: 100%;
object-fit: cover;
width: 100%;
}
.hcm-relnext__when {
color: var(--hcm-accent-dark);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.hcm-relnext__title {
display: -webkit-box;
font-family: var(--hcm-font-head);
font-size: var(--hcm-fs-meta);
font-weight: 700;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 1.3;
overflow: hidden;
overflow-wrap: anywhere;
}
.hcm-relnext__artist {
color: var(--hcm-text);
font-size: 0.75rem;
overflow-wrap: anywhere;
}
.hcm-relnext__a:hover .hcm-relnext__title,
.hcm-relnext__a:focus-visible .hcm-relnext__title {
color: var(--hcm-accent-dark);
text-decoration: underline;
}
.hcm-relnext__more,
.hcm-relnext__more:visited {
align-items: center;
color: var(--hcm-accent-dark);
display: inline-flex;
font-family: var(--hcm-font-head);
font-size: var(--hcm-fs-small);
font-weight: 700;
gap: 4px;
margin: var(--hcm-s2) 0 0;
min-height: var(--hcm-tap);
text-decoration: none;
}
.hcm-relnext__more .hcm-icon {
height: 16px;
width: 16px;
}
.hcm-relnext__more:hover,
.hcm-relnext__more:focus-visible {
color: var(--hcm-ink);
text-decoration: underline;
}
.hcm-relnl {
background-color: color-mix(in srgb, var(--hcm-accent) 5%, var(--hcm-surface));
border: 1px solid color-mix(in srgb, var(--hcm-accent) 20%, var(--hcm-line));
border-left: 4px solid var(--hcm-accent);
border-radius: var(--hcm-r-card);
display: grid;
gap: var(--hcm-s3) var(--hcm-s6);
padding: 20px var(--hcm-s4);
}
.hcm-arch .hcm-relnl__h {
color: var(--hcm-ink);
font-family: var(--hcm-font-head);
font-size: 1.25rem;
font-weight: 700;
line-height: 1.25;
margin: 0 0 var(--hcm-s1);
}
.hcm-relnl__desc {
color: var(--hcm-text);
font-size: 0.9375rem;
line-height: 1.5;
margin: 0;
}
@media (min-width: 900px) {
.hcm-relnl {
align-items: center;
grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
padding: 28px 32px;
}
}
.hcm-relfoot {
border-top: 1px solid var(--hcm-line);
margin: var(--hcm-s6) 0 0;
padding: var(--hcm-s3) 0 0;
}
.hcm-rel-credits {
color: var(--hcm-muted);
font-size: var(--hcm-fs-meta);
line-height: 1.5;
margin: 0;
}
@media (max-width: 379px) {
.hcm-relgrid {
column-gap: 10px;
}
.hcm-relstrip__list {
gap: 3px;
}
.hcm-relstrip__num {
font-size: 1rem;
}
.hcm-relf__a,
.hcm-relf__a:visited {
padding-left: 12px;
}
}
.hcm-arch--kpop .hcm-relsel {
background-image: radial-gradient(120% 90% at 100% 0%, rgba(199, 23, 122, 0.34), transparent 60%);
}
.hcm-kpopcta,
.hcm-kpopcta:visited {
background-color: var(--hcm-ink);
background-image: radial-gradient(120% 140% at 100% 0%, rgba(199, 23, 122, 0.5), transparent 62%);
border-radius: 16px;
box-sizing: border-box;
color: var(--hcm-on-accent);
display: grid;
gap: 4px;
margin: 0 0 var(--hcm-s5);
padding: var(--hcm-s4) var(--hcm-s5);
text-decoration: none;
}
.hcm-kpopcta__kicker {
color: var(--hcm-c-k-pop-bright);
font-family: var(--hcm-font-head);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.hcm-kpopcta__title {
font-family: var(--hcm-font-head);
font-size: 1.375rem;
font-weight: 700;
line-height: 1.2;
}
.hcm-kpopcta__meta {
color: rgba(255, 255, 255, 0.82);
font-size: var(--hcm-fs-small);
}
a.hcm-kpopcta:hover .hcm-kpopcta__title,
a.hcm-kpopcta:focus-visible .hcm-kpopcta__title {
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 0.18em;
}
.hcm-sfilters {
margin: var(--hcm-s4) 0 0;
}
.hcm-arch__head .hcm-sfilters__list {
margin: 0;
}
.hcm-sfilter {
gap: var(--hcm-s2);
}
.hcm-sfilter__count {
align-items: center;
background-color: var(--hcm-soft);
border-radius: var(--hcm-r-pill);
box-sizing: border-box;
color: var(--hcm-muted);
display: inline-flex;
font-size: 0.75rem;
font-weight: 700;
height: 20px;
justify-content: center;
min-width: 22px;
padding: 0 6px;
}
.hcm-arch__pills .hcm-sfilter[aria-current="page"] {
background-color: var(--hcm-accent);
border-color: var(--hcm-accent);
color: var(--hcm-on-accent);
}
.hcm-sfilter[aria-current="page"] .hcm-sfilter__count {
background-color: color-mix(in srgb, #000 22%, transparent);
color: var(--hcm-on-accent);
}
.hcm-smatches {
margin: 0 0 var(--hcm-s5);
}
.hcm-arch .hcm-smatches__title {
color: var(--hcm-muted);
font-family: var(--hcm-font-head);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
line-height: 1.3;
margin: 0 0 var(--hcm-s3);
text-transform: uppercase;
}
.hcm-smatches__list {
display: grid;
gap: var(--hcm-s3);
grid-template-columns: minmax(0, 1fr);
list-style: none;
margin: 0;
padding: 0;
}
@media (min-width: 600px) {
.hcm-smatches__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.hcm-smatches__list {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.hcm-smatch {
margin: 0;
}
.hcm-smatch__link,
.hcm-smatch__link:visited {
align-items: center;
background-color: var(--hcm-surface);
border: 1px solid var(--hcm-line);
border-radius: var(--hcm-r-card);
box-sizing: border-box;
color: var(--hcm-ink);
display: flex;
gap: var(--hcm-s3);
height: 100%;
min-height: 72px;
padding: var(--hcm-s3) 14px;
text-decoration: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.hcm-smatch__link:hover,
.hcm-smatch__link:focus-visible {
border-color: var(--hcm-accent);
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.07);
}
.hcm-smatch__photo {
aspect-ratio: 1;
border-radius: 50%;
display: block;
flex: none;
height: 48px;
object-fit: cover;
width: 48px;
}
.hcm-smatch__photo.hcm-artist-initials {
font-size: 1rem;
}
.hcm-smatch__icon {
align-items: center;
background-color: color-mix(in srgb, var(--hcm-accent) 8%, var(--hcm-surface));
border-radius: var(--hcm-r-card);
color: var(--hcm-accent-dark);
display: flex;
flex: none;
height: 48px;
justify-content: center;
width: 48px;
}
.hcm-smatch__icon .hcm-icon {
height: 24px;
width: 24px;
}
.hcm-smatch__text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.hcm-smatch__name {
font-family: var(--hcm-font-head);
font-size: 1rem;
font-weight: 700;
line-height: 1.25;
overflow-wrap: anywhere;
}
.hcm-smatch__link:hover .hcm-smatch__name,
.hcm-smatch__link:focus-visible .hcm-smatch__name {
color: var(--hcm-accent-dark);
}
.hcm-smatch__meta {
color: var(--hcm-muted);
font-size: var(--hcm-fs-meta);
font-weight: 600;
}
mark.hcm-hl {
-webkit-box-decoration-break: clone;
background-color: color-mix(in srgb, var(--hcm-accent) 14%, var(--hcm-surface));
border-radius: 3px;
box-decoration-break: clone;
color: inherit;
padding: 0 0.08em;
}
.hcm-nlpage .hcm-nlpage__archives {
margin: 0 0 var(--hcm-s6);
font-weight: 600;
}
.hcm-nlpage__archives-link,
.hcm-nlpage__archives-link:visited {
position: relative;
color: var(--hcm-accent-dark);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
}
.hcm-nlpage__archives-link:hover,
.hcm-nlpage__archives-link:focus-visible {
color: var(--hcm-ink);
text-decoration-thickness: 2px;
}
.hcm-nlpage__archives-link::after {
content: " →";
}
.hcm-nlpage__archives-link::before {
content: "";
position: absolute;
inset: -11px 0;
}
.hcm-editions .hcm-editions__lead {
margin: 0 0 var(--hcm-s5);
color: var(--hcm-text);
font-size: 1.0625rem;
line-height: 1.6;
}
.hcm-editions__lead a,
.hcm-editions__lead a:visited {
color: var(--hcm-accent-dark);
font-weight: 600;
}
.entry-content .hcm-editions .hcm-editions__list {
display: grid;
gap: var(--hcm-s3);
margin: 0;
padding: 0;
list-style: none;
}
.entry-content .hcm-editions .hcm-edition-card {
position: relative;
display: flex;
align-items: flex-start;
gap: var(--hcm-s4);
margin: 0;
padding: var(--hcm-s4);
border: 1px solid var(--hcm-line);
border-radius: var(--hcm-r-card);
background-color: var(--hcm-surface);
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.hcm-edition-card:hover,
.hcm-edition-card:focus-within {
border-color: var(--hcm-accent);
box-shadow: 0 6px 18px color-mix(in srgb, var(--hcm-ink) 8%, transparent);
}
.hcm-edition-card__num {
display: flex;
flex: none;
flex-direction: column;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 12px;
background-color: var(--hcm-accent);
color: var(--hcm-on-accent);
font-family: var(--hcm-font-head);
font-size: 1.375rem;
font-weight: 800;
line-height: 1;
}
.hcm-edition-card__num span {
margin-bottom: 2px;
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.06em;
}
.hcm-edition-card__body {
flex: 1 1 auto;
min-width: 0;
}
.hcm-editions .hcm-edition-card__meta {
margin: 0 0 var(--hcm-s1);
color: var(--hcm-muted);
font-size: var(--hcm-fs-meta);
font-weight: 600;
}
.entry-content .hcm-editions .hcm-edition-card__title {
margin: 0;
color: var(--hcm-ink);
font-family: var(--hcm-font-head);
font-size: 1.0625rem;
font-weight: 700;
line-height: 1.35;
}
.hcm-edition-card__link,
.hcm-edition-card__link:visited {
color: inherit;
text-decoration: none;
}
.hcm-edition-card__link::after {
content: "";
position: absolute;
inset: 0;
border-radius: var(--hcm-r-card);
}
.hcm-edition-card__link:focus-visible {
outline: none;
}
.hcm-edition-card:has(.hcm-edition-card__link:focus-visible) {
outline: 2px solid var(--hcm-accent);
outline-offset: 2px;
}
.hcm-editions .hcm-edition-card__intro {
display: -webkit-box;
margin: var(--hcm-s2) 0 0;
overflow: hidden;
color: var(--hcm-text);
font-size: 0.9375rem;
line-height: 1.5;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.hcm-edition-card__thumbs {
display: flex;
margin: var(--hcm-s3) 0 0;
padding-left: 8px;
}
.hcm-editions .hcm-edition-card__thumb {
width: 40px;
height: 40px;
margin: 0 0 0 -8px;
border: 2px solid var(--hcm-surface);
border-radius: 50%;
object-fit: cover;
}
.hcm-editions .hcm-editions__empty {
padding: var(--hcm-s5);
border: 1px dashed var(--hcm-line);
border-radius: var(--hcm-r-card);
color: var(--hcm-text);
text-align: center;
}
.entry-content .hcm-editions .hcm-editions__pages ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--hcm-s2);
margin: var(--hcm-s5) 0 0;
padding: 0;
list-style: none;
}
.entry-content .hcm-editions .hcm-editions__pages li {
margin: 0;
}
.hcm-editions__pages .hcm-pill {
justify-content: center;
min-width: var(--hcm-tap);
min-height: var(--hcm-tap);
}
.hcm-edition .hcm-edition__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--hcm-s2);
margin: 0 0 var(--hcm-s4);
color: var(--hcm-muted);
font-size: var(--hcm-fs-small);
font-weight: 600;
}
.hcm-edition__badge {
padding: 3px 10px;
border-radius: var(--hcm-r-pill);
background-color: var(--hcm-accent);
color: var(--hcm-on-accent);
font-family: var(--hcm-font-head);
font-size: 0.8125rem;
font-weight: 800;
}
.hcm-edition__intro {
margin: 0 0 var(--hcm-s5);
color: var(--hcm-ink);
font-size: 1.125rem;
line-height: 1.6;
}
.hcm-edition__empty {
margin: 0 0 var(--hcm-s5);
}
.entry-content .hcm-edition .hcm-edition__toc {
margin: 0 0 var(--hcm-s4);
font-family: var(--hcm-font-head);
font-size: 1.25rem;
font-weight: 700;
}
.entry-content .hcm-edition .hcm-edition__list {
display: grid;
gap: var(--hcm-s4);
margin: 0 0 var(--hcm-s6);
padding: 0;
list-style: none;
counter-reset: hcm-edition;
}
.entry-content .hcm-edition .hcm-edition__item {
margin: 0;
padding: 0 0 var(--hcm-s4);
border-bottom: 1px solid var(--hcm-line);
counter-increment: hcm-edition;
}
.entry-content .hcm-edition .hcm-edition__item:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.hcm-edition__card.hcm-card--row {
--hcm-card-thumb: 112px;
align-items: flex-start;
gap: var(--hcm-s4);
}
@media (min-width: 600px) {
.hcm-edition__card.hcm-card--row {
--hcm-card-thumb: 200px;
}
}
.hcm-edition__card.hcm-card--row .hcm-card__media {
position: relative;
aspect-ratio: 3 / 2;
border-radius: 10px;
}
.hcm-edition__card .hcm-card__media::before {
content: counter(hcm-edition);
position: absolute;
top: 6px;
left: 6px;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
background-color: var(--hcm-accent);
color: var(--hcm-on-accent);
font-family: var(--hcm-font-head);
font-size: 0.8125rem;
font-weight: 800;
}
.hcm-edition__card .hcm-card__media img {
margin: 0;
}
.hcm-edition__card .hcm-card__body {
gap: var(--hcm-s1);
}
.hcm-edition__card .hcm-kicker {
display: block;
}
.entry-content .hcm-edition__card .hcm-card__title {
margin: 0;
font-size: 1.0625rem;
font-weight: 700;
line-height: 1.35;
}
@media (min-width: 600px) {
.entry-content .hcm-edition__card .hcm-card__title {
font-size: 1.1875rem;
}
}
.hcm-edition .hcm-edition__summary {
display: -webkit-box;
margin: 0;
overflow: hidden;
color: var(--hcm-text);
font-size: 0.9375rem;
line-height: 1.5;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
@media (max-width: 599px) {
.hcm-edition .hcm-edition__summary {
display: none;
}
}
.hcm-edition__cta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--hcm-s4);
margin: 0 0 var(--hcm-s5);
padding: 20px var(--hcm-s4);
border: 1px solid var(--hcm-line);
border-left: 4px solid var(--hcm-accent);
border-radius: var(--hcm-r-card);
background-color: var(--hcm-soft);
}
.hcm-edition .hcm-edition__cta-text {
flex: 1 1 280px;
margin: 0;
color: var(--hcm-text);
font-size: 0.9375rem;
line-height: 1.5;
}
.hcm-edition__cta-text strong {
display: block;
color: var(--hcm-ink);
font-family: var(--hcm-font-head);
font-size: 1.0625rem;
}
.hcm-edition__cta .hcm-btn,
.hcm-edition__cta .hcm-btn:visited {
color: var(--hcm-on-accent);
text-decoration: none;
}
.hcm-edition__nav {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--hcm-s3);
padding-top: var(--hcm-s4);
border-top: 1px solid var(--hcm-line);
font-weight: 600;
}
.hcm-edition__nav a,
.hcm-edition__nav a:visited {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: var(--hcm-tap);
color: var(--hcm-accent-dark);
text-decoration: none;
}
.hcm-edition__nav a:hover,
.hcm-edition__nav a:focus-visible {
text-decoration: underline;
}
.hcm-edition__nav-all {
margin: 0 auto;
}
.hcm-about {
--hcm-about-todo: #5c4400;
--hcm-about-todo-bg: #fffbeb;
--hcm-about-todo-line: #c99a00;
color: var(--hcm-text);
}
.hcm-about .hcm-about__editor-note {
margin: 0 0 var(--hcm-s5);
padding: var(--hcm-s3) var(--hcm-s4);
border-radius: 8px;
background-color: var(--hcm-about-todo-bg);
color: var(--hcm-about-todo);
font-size: var(--hcm-fs-small);
}
.entry-content .hcm-about .hcm-about__toc ul {
display: flex;
flex-wrap: wrap;
gap: 14px var(--hcm-s2);
margin: 0 0 var(--hcm-s5);
padding: 0;
list-style: none;
}
.entry-content .hcm-about .hcm-about__toc li {
margin: 0;
}
.hcm-about__toc .hcm-pill {
position: relative;
font-size: 0.875rem;
}
.hcm-about__toc .hcm-pill::before {
content: "";
position: absolute;
inset: -7px -4px;
}
.hcm-about__section {
margin: 0 0 var(--hcm-s6);
scroll-margin-top: var(--hcm-s4);
}
.entry-content .hcm-about .hcm-about__section > h2 {
margin: 0 0 var(--hcm-s3);
color: var(--hcm-ink);
font-size: var(--hcm-fs-h3);
font-weight: 700;
line-height: 1.3;
}
.hcm-about__section p {
margin: 0 0 var(--hcm-s3);
}
.hcm-about__section--mission > p:first-of-type,
.hcm-about__section--mission .hcm-about__todo p {
color: var(--hcm-ink);
font-size: 1.125rem;
line-height: 1.6;
}
.hcm-about__cards {
display: grid;
gap: var(--hcm-s3);
}
@media (min-width: 768px) {
.hcm-about__cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.hcm-about__card {
padding: var(--hcm-s4);
border: 1px solid var(--hcm-line);
border-top: 3px solid var(--hcm-accent);
border-radius: var(--hcm-r-card);
background-color: var(--hcm-surface);
font-size: 0.9375rem;
line-height: 1.55;
scroll-margin-top: var(--hcm-s4);
}
.entry-content .hcm-about .hcm-about__card-title {
margin: 0 0 var(--hcm-s2);
color: var(--hcm-ink);
font-family: var(--hcm-font-head);
font-size: 1.0625rem;
font-weight: 700;
line-height: 1.3;
}
.hcm-about__card > :last-child,
.hcm-about__card .hcm-about__todo > :last-child {
margin-bottom: 0;
}
.hcm-about__section--ia {
padding: 20px var(--hcm-s4);
border: 1px solid var(--hcm-line);
border-left: 4px solid var(--hcm-accent);
border-radius: var(--hcm-r-card);
background-color: var(--hcm-soft);
}
.hcm-about__section--ia > :last-child {
margin-bottom: 0;
}
.hcm-about .hcm-about__todo {
margin: 0;
padding: var(--hcm-s3);
border: 1.5px dashed var(--hcm-about-todo-line);
border-radius: 8px;
background-color: var(--hcm-about-todo-bg);
}
.hcm-about__todo-badge {
display: inline-block;
margin: 0 0 var(--hcm-s2);
padding: 2px 8px;
border-radius: var(--hcm-r-pill);
background-color: var(--hcm-about-todo);
color: var(--hcm-surface);
font-family: var(--hcm-font-head);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.hcm-about .hcm-about__todo p {
margin: 0;
color: var(--hcm-text);
}
.entry-content .hcm-about .hcm-about__team {
display: grid;
gap: var(--hcm-s3);
margin: 0 0 var(--hcm-s3);
padding: 0;
list-style: none;
}
@media (min-width: 768px) {
.entry-content .hcm-about .hcm-about__team {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.entry-content .hcm-about .hcm-about__member {
display: flex;
align-items: flex-start;
gap: var(--hcm-s3);
margin: 0;
padding: var(--hcm-s4);
border: 1px solid var(--hcm-line);
border-radius: var(--hcm-r-card);
}
.hcm-about .hcm-about__avatar {
flex: none;
width: 64px;
height: 64px;
margin: 0;
border-radius: 50%;
object-fit: cover;
}
.hcm-about__member-body {
min-width: 0;
}
.entry-content .hcm-about .hcm-about__name {
margin: 0;
font-family: var(--hcm-font-head);
font-size: 1rem;
font-weight: 700;
line-height: 1.3;
}
.hcm-about__name a,
.hcm-about__name a:visited {
position: relative;
color: var(--hcm-accent-dark);
text-decoration: none;
}
.hcm-about__name a::before {
content: "";
position: absolute;
inset: -15px 0 -11px;
}
.hcm-about__name a:hover,
.hcm-about__name a:focus-visible {
text-decoration: underline;
}
.hcm-about .hcm-about__role {
margin: 2px 0 0;
color: var(--hcm-ink);
font-size: var(--hcm-fs-small);
font-weight: 600;
}
.hcm-about .hcm-about__role--todo {
color: var(--hcm-about-todo);
font-style: italic;
font-weight: 400;
}
.hcm-about .hcm-about__bio {
margin: var(--hcm-s2) 0 0;
font-size: var(--hcm-fs-small);
line-height: 1.5;
}
.hcm-about .hcm-about__count {
margin: var(--hcm-s1) 0 0;
color: var(--hcm-muted);
font-size: var(--hcm-fs-meta);
}
.hcm-about .hcm-about__more a,
.hcm-about .hcm-about__more a:visited {
position: relative;
color: var(--hcm-accent-dark);
font-weight: 600;
}
.hcm-about__more a::before {
content: "";
position: absolute;
inset: -11px 0;
}
.hcm-about__more a::after {
content: " →";
}
.hcm-about .hcm-about__actions {
margin: var(--hcm-s4) 0 0;
}
.hcm-about__actions .hcm-btn,
.hcm-about__actions .hcm-btn:visited {
color: var(--hcm-on-accent);
text-decoration: none;
}
.hcm-about .hcm-about__updated {
margin: 0;
padding-top: var(--hcm-s4);
border-top: 1px solid var(--hcm-line);
color: var(--hcm-muted);
font-size: var(--hcm-fs-meta);
}