/* Google Fontsはprepare-xserver-deploy.mjsのwithFontPreconnectがへ注入する */
:root {
--barzine-black: #0B0711; /* Dub Black */
--barzine-green: #004C45; /* Sound Green */
--barzine-white: #F7F7F2; /* Press White */
--barzine-yellow: #F9E600; /* Selector Yellow */
--barzine-pink: #F20079; /* Flyer Pink */
--barzine-line: #D8D6D0; /* Press Line */
--black: var(--barzine-black);
--black-soft: var(--barzine-black);
--panel: var(--barzine-black);
--panel-soft: var(--barzine-black);
--paper: var(--barzine-white);
--paper-soft: var(--barzine-white);
--ink: var(--barzine-black);
--ink-soft: var(--barzine-black);
--white: var(--barzine-white);
--muted: var(--barzine-line);
--line: var(--barzine-line);
--yellow: var(--barzine-yellow);
--pink: var(--barzine-pink);
--red: var(--barzine-pink);
--red-deep: var(--barzine-pink);
--green: var(--barzine-green);
--green-soft: var(--barzine-line);
--radius: 4px;
--content-max: 1220px;
--page-gutter: clamp(16px, 4vw, 52px);
--font-display: "Archivo Black", "Noto Sans JP", sans-serif;
--font-display-en: "Archivo Black", "Saira Semi Condensed", "M PLUS 1", sans-serif;
--font-ui: "Saira", "M PLUS 1", sans-serif;
--font-body: "M PLUS 1", "Noto Sans JP", sans-serif;
}
* {
box-sizing: border-box;
}
::selection {
background: var(--barzine-pink);
color: var(--barzine-white);
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--black);
color: var(--ink);
font-family: var(--font-body);
line-height: 1.72;
}
body.menu-open {
overflow: hidden;
}
button,
input,
select,
textarea {
font: inherit;
}
button {
cursor: pointer;
}
a {
color: inherit;
text-decoration: none;
}
/* 本文中のテキストリンク: 下線が左から伸びる控えめなホバー。
カード/ボタン型リンクは対象外(/
内のインラインリンクのみ)。
[data-term-summary]は辞書用語リンクの既存ツールチップ演出(ピンク下線常時+ホバーで説明フェードイン)を
持つため、視覚的に重複しないようここでは除外する。 */
p a:not([data-term-summary]),
li a:not([data-term-summary]) {
background-image: linear-gradient(currentColor, currentColor);
background-position: 0 100%;
background-repeat: no-repeat;
background-size: 0% 1px;
transition: background-size 180ms ease, color 180ms ease;
}
@media (hover: hover) {
p a:not([data-term-summary]):hover,
li a:not([data-term-summary]):hover {
background-size: 100% 1px;
color: var(--pink);
}
}
@media (hover: none) {
p a:not([data-term-summary]):active,
li a:not([data-term-summary]):active {
background-size: 100% 1px;
color: var(--pink);
}
}
img {
display: block;
height: 100%;
object-fit: cover;
width: 100%;
}
h1,
h2,
h3,
p {
margin: 0;
}
h1,
h2,
h3,
.rail-card strong {
overflow-wrap: anywhere;
word-break: keep-all;
}
.page-hero p:not(.section-kicker),
.home-lead__body p {
line-break: strict;
overflow-wrap: normal;
text-wrap: pretty;
word-break: normal;
}
h1 {
font-size: clamp(32px, 4.1vw, 54px);
letter-spacing: 0;
line-height: 1.05;
}
h2 {
font-size: clamp(25px, 3vw, 42px);
letter-spacing: 0;
line-height: 1.08;
}
h3 {
font-size: 20px;
letter-spacing: 0;
line-height: 1.28;
}
.site-header {
align-items: center;
background: var(--barzine-black);
box-shadow: 0 18px 48px var(--barzine-black);
color: var(--white);
display: grid;
gap: 18px;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto;
height: auto;
justify-items: center;
left: 0;
padding: 16px clamp(16px, 4vw, 42px) 14px;
position: sticky;
right: 0;
top: 0;
z-index: 50;
}
.brand {
align-items: center;
display: inline-flex;
grid-column: 1;
grid-row: 1;
justify-self: center;
min-width: 0;
position: static;
transform: none;
}
.logo-plate {
align-items: center;
background: transparent;
display: inline-flex;
height: 44px;
justify-content: center;
padding: 0;
width: 194px;
}
.brand-logo {
height: 100%;
object-fit: contain;
opacity: 1;
width: 100%;
}
.main-nav {
align-items: center;
display: flex;
gap: clamp(12px, 1.6vw, 22px);
grid-column: 1;
grid-row: 2;
justify-self: center;
margin-left: 0;
}
.main-nav a {
color: var(--barzine-white);
font-size: 12px;
font-weight: 800;
line-height: 1;
}
.main-nav a:hover {
color: var(--white);
}
.icon-button {
align-items: center;
background: var(--panel);
border: 0;
border-radius: var(--radius);
display: none;
grid-column: 1;
grid-row: 1;
justify-self: start;
height: 42px;
justify-content: center;
padding: 0;
position: relative;
width: 42px;
}
.icon-button span {
background: var(--white);
display: block;
height: 2px;
position: absolute;
width: 18px;
}
.icon-button span:first-child {
transform: translateY(-4px);
}
.icon-button span:last-child {
transform: translateY(4px);
}
.mobile-nav {
background: var(--black-soft);
box-shadow: 0 20px 42px var(--barzine-black);
color: var(--white);
display: none;
left: 0;
padding: 14px 18px 22px;
position: sticky;
right: 0;
top: 82px;
z-index: 45;
}
.mobile-nav a {
display: block;
font-size: 14px;
font-weight: 800;
padding: 13px 0;
}
.mobile-nav.open {
display: block;
}
.hero-shell {
display: grid;
gap: clamp(18px, 2.6vw, 34px);
grid-template-columns: minmax(0, 1fr) 310px;
margin: 0 auto;
max-width: var(--content-max);
min-height: calc(100vh - 82px);
padding: clamp(24px, 4.5vw, 56px) clamp(16px, 4vw, 40px);
}
.hero-card {
background: var(--paper);
color: var(--ink);
display: grid;
grid-template-columns: minmax(260px, 0.62fr) minmax(430px, 1fr);
min-height: 620px;
overflow: hidden;
}
.hero-image {
background: var(--black-soft);
min-height: 340px;
}
.hero-image img {
filter: grayscale(0.38) contrast(1.08);
object-position: left center;
}
.hero-copy {
align-content: center;
display: grid;
gap: 22px;
padding: clamp(30px, 4.8vw, 68px);
}
.home-page {
background: var(--black);
}
.home-manifest {
border-top: 1px solid rgba(247, 247, 242, 0.16);
color: var(--paper);
margin: 0 auto;
max-width: 1320px;
padding: clamp(28px, 4vw, 48px) clamp(16px, 4vw, 40px);
}
.home-manifest h1,
.home-manifest h2 {
color: var(--paper);
font-size: clamp(24px, 2.8vw, 40px);
letter-spacing: 0;
line-height: 1.12;
max-width: 760px;
}
.home-manifest p:not(.section-kicker) {
color: var(--muted);
font-size: clamp(14px, 1.1vw, 17px);
font-weight: 750;
line-height: 1.7;
margin-top: 12px;
max-width: 680px;
}
.home-hero {
display: grid;
gap: clamp(14px, 1.8vw, 20px);
grid-template-columns: minmax(0, 1fr) minmax(260px, 0.28fr);
margin: 0 auto;
max-width: 1320px;
padding: clamp(18px, 3vw, 34px) clamp(16px, 4vw, 40px) clamp(22px, 3.6vw, 42px);
}
.home-lead {
background: var(--paper);
color: var(--ink);
display: grid;
grid-template-columns: minmax(360px, 0.52fr) minmax(360px, 0.48fr);
min-height: clamp(560px, 62vh, 650px);
overflow: hidden;
}
.home-lead__media {
background: var(--black-soft);
min-height: 360px;
overflow: hidden;
}
.home-lead__media img {
filter: grayscale(0.12) contrast(1.05);
}
.home-lead--product .home-lead__media {
background: #1b1c1f;
}
.home-lead--product .home-lead__media img {
filter: none;
object-fit: contain;
padding: clamp(14px, 2vw, 28px);
transform: scale(1.22);
}
.home-lead__body {
align-content: center;
display: grid;
gap: 14px;
padding: clamp(24px, 3vw, 40px);
}
.home-lead__eyebrow {
color: var(--barzine-pink);
font-family: var(--font-ui);
font-size: 13px;
font-weight: 950;
letter-spacing: 0.04em;
margin: 0;
text-transform: uppercase;
}
.home-lead__body h1,
.home-lead__body h2 {
font-size: clamp(26px, 2.15vw, 36px);
line-height: 1.08;
max-width: 520px;
overflow-wrap: break-word;
word-break: normal;
}
.home-lead__body p {
color: var(--ink-soft);
font-size: clamp(15px, 1.25vw, 17px);
font-weight: 750;
line-height: 1.66;
max-width: 520px;
}
.home-lead__source {
border-top: 1px solid var(--barzine-white);
color: var(--barzine-line);
font-size: 11px;
font-weight: 950;
padding-top: 12px;
text-transform: uppercase;
}
.home-rail {
background: var(--barzine-black);
color: var(--white);
display: grid;
grid-template-rows: auto 1fr;
min-height: 560px;
}
.home-rail__head {
align-items: center;
border-bottom: 1px solid var(--barzine-black);
display: flex;
justify-content: space-between;
padding: 16px 18px;
}
.home-rail__head span,
.home-rail__head a,
.home-rail__list span {
color: var(--red);
font-size: 11px;
font-weight: 950;
text-transform: uppercase;
}
.home-rail__head a {
color: var(--barzine-white);
}
.home-rail__list {
display: grid;
}
.home-rail__list a {
border-bottom: 1px solid var(--barzine-black);
display: grid;
gap: 8px;
min-height: 132px;
padding: 18px;
}
.home-rail__list a:hover,
.home-rail__list a:focus-visible {
background: var(--barzine-black);
}
.home-rail__list strong {
font-size: 18px;
line-height: 1.32;
overflow-wrap: anywhere;
}
.home-news-grid {
display: grid;
gap: 18px;
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.today-news-section .top-news-card {
background: var(--black);
}
.today-news-section .top-news-card:hover,
.today-news-section .top-news-card:focus-visible {
background: var(--barzine-black);
}
.top-news-card {
background: var(--panel);
color: var(--white);
display: grid;
grid-template-rows: 168px 1fr;
min-width: 0;
overflow: hidden;
}
.top-news-card:hover,
.top-news-card:focus-visible {
background: var(--barzine-black);
}
.top-news-card__image {
background: var(--barzine-black);
display: block;
overflow: hidden;
}
.top-news-card__image img {
filter: grayscale(0.24) contrast(1.06);
transition: transform 180ms ease;
}
.top-news-card:hover img,
.top-news-card:focus-visible img {
transform: scale(1.025);
}
.top-news-card__body {
display: grid;
gap: 10px;
padding: 16px;
}
.top-news-card small {
color: var(--red);
font-size: 10px;
font-style: normal;
font-weight: 950;
text-transform: uppercase;
}
.top-news-card strong {
font-size: 18px;
line-height: 1.32;
overflow-wrap: anywhere;
}
.top-news-card em {
color: var(--barzine-line);
font-size: 13px;
font-style: normal;
font-weight: 760;
line-height: 1.62;
}
.news-article-page {
background: var(--paper);
color: var(--ink);
padding: 48px max(24px, 6vw) 96px;
}
.news-article {
background: var(--barzine-white);
display: grid;
grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
margin: 0 auto;
max-width: 1180px;
}
.news-article__media {
background: var(--black);
min-height: 420px;
}
.news-article__media img {
filter: grayscale(0.12) contrast(1.04);
height: 100%;
object-fit: cover;
width: 100%;
}
.news-article__body {
display: grid;
gap: 24px;
padding: clamp(28px, 5vw, 72px);
}
.news-article__body h1 {
font-size: clamp(30px, 4.1vw, 58px);
letter-spacing: 0;
line-height: 1.04;
}
.news-article__body .lead,
.news-article__body li {
color: var(--ink);
font-size: clamp(17px, 1.45vw, 21px);
font-weight: 760;
line-height: 1.75;
}
.news-article__body ul {
display: grid;
gap: 12px;
margin: 0;
padding-left: 1.2em;
}
.article-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.audience-grid,
.submit-grid {
display: grid;
gap: 12px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.audience-card,
.submit-card {
background: var(--barzine-white);
color: var(--ink);
cursor: pointer;
display: grid;
gap: 12px;
min-height: 186px;
padding: 22px;
position: relative;
}
.audience-card:hover,
.audience-card:focus-visible,
.submit-card:hover,
.submit-card:focus-visible {
background: var(--barzine-white);
outline: 3px solid var(--barzine-pink);
outline-offset: -3px;
}
.audience-card--inactive {
cursor: default;
}
.audience-card--inactive:hover {
outline: 0;
}
.audience-card::after,
.submit-card::after {
align-self: end;
color: var(--barzine-pink);
content: "→";
font-family: var(--font-display-en);
font-size: 20px;
font-weight: 900;
line-height: 1;
justify-self: start;
}
.audience-card--inactive::after {
content: "";
}
.audience-card:hover::after,
.audience-card:focus-visible::after,
.submit-card:hover::after,
.submit-card:focus-visible::after {
color: var(--barzine-black);
background: var(--barzine-yellow);
padding: 2px 7px;
}
.audience-card span,
.submit-card span,
.scene-feature span,
.scene-mini span {
color: var(--red);
font-size: 11px;
font-weight: 950;
text-transform: uppercase;
}
.audience-card.chill span {
color: var(--green);
}
.audience-card strong,
.submit-card strong {
font-size: 22px;
line-height: 1.22;
}
.audience-card p,
.submit-card p,
.scene-mini p {
color: var(--ink-soft);
font-size: 14px;
font-weight: 760;
line-height: 1.72;
}
.scene-layout {
display: grid;
gap: 18px;
grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
}
.home-daily-grid {
display: grid;
gap: 12px;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-bottom: 18px;
}
.home-daily-card {
background: var(--barzine-white);
color: var(--barzine-black);
display: grid;
gap: 10px;
min-height: 156px;
padding: 22px;
position: relative;
}
.home-daily-card:hover,
.home-daily-card:focus-visible {
outline: 3px solid var(--barzine-pink);
outline-offset: -3px;
}
.home-daily-card span {
color: var(--barzine-pink);
font-size: 11px;
font-weight: 950;
text-transform: uppercase;
}
.home-daily-card strong {
font-size: clamp(24px, 3vw, 38px);
line-height: 1.06;
}
.home-daily-card p {
color: var(--ink-soft);
font-size: 14px;
font-weight: 780;
line-height: 1.62;
}
.home-daily-card small {
align-self: end;
color: var(--barzine-yellow);
font-family: var(--font-display-en);
font-size: 22px;
font-weight: 950;
line-height: 1;
}
.scene-feature {
background: var(--panel);
color: var(--white);
display: grid;
grid-template-columns: minmax(280px, 0.56fr) minmax(0, 0.44fr);
min-height: 430px;
overflow: hidden;
}
.scene-feature__media {
background: var(--barzine-black);
}
.scene-feature__media img {
filter: grayscale(0.1) contrast(1.04);
}
.scene-feature__body {
align-content: center;
display: grid;
gap: 14px;
padding: clamp(24px, 3.6vw, 44px);
}
.scene-feature strong {
font-size: clamp(28px, 3.6vw, 46px);
line-height: 1.08;
}
.scene-feature p {
color: var(--barzine-white);
font-size: 15px;
font-weight: 780;
line-height: 1.78;
}
.scene-stack {
display: grid;
gap: 12px;
}
.scene-mini {
background: var(--barzine-white);
color: var(--ink);
display: grid;
gap: 10px;
min-height: 132px;
padding: 20px;
}
.scene-mini:hover,
.scene-mini:focus-visible {
background: var(--barzine-white);
}
.scene-mini strong {
font-size: 22px;
line-height: 1.2;
}
.deep-cuts-page,
.deep-cut-article-page {
background: var(--barzine-black);
color: var(--barzine-white);
}
.deep-cuts-grid {
display: grid;
gap: 16px;
grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.6fr);
}
.deep-cut-card {
background: var(--barzine-white);
color: var(--ink);
display: grid;
min-height: 460px;
overflow: hidden;
}
.deep-cut-card--feature {
grid-template-columns: minmax(280px, 0.55fr) minmax(0, 0.45fr);
}
.deep-cut-card__image {
background: var(--barzine-black);
min-height: 340px;
}
.deep-cut-card__image img {
filter: grayscale(0.12) contrast(1.04);
}
.deep-cut-card__body {
align-content: center;
display: grid;
gap: 14px;
padding: clamp(22px, 3vw, 42px);
}
.deep-cut-card small,
.deep-cut-tags span,
.deep-cut-track-list span {
font-size: 11px;
font-style: normal;
font-weight: 950;
text-transform: uppercase;
}
.deep-cut-card small {
color: var(--ink);
}
.deep-cut-track-list span {
color: var(--barzine-pink);
}
.deep-cut-card strong {
font-size: clamp(28px, 3.2vw, 46px);
line-height: 1.05;
}
.deep-cut-card em,
.deep-cut-note p {
color: var(--ink-soft);
font-size: 15px;
font-style: normal;
font-weight: 760;
line-height: 1.72;
}
.deep-cut-note {
align-content: end;
background: var(--barzine-white);
color: var(--ink);
display: grid;
gap: 14px;
min-height: 460px;
padding: clamp(22px, 3vw, 34px);
}
.deep-cut-note-link {
border-top: 1px solid var(--barzine-line);
color: var(--ink);
display: block;
font-size: 16px;
font-weight: 950;
line-height: 1.45;
padding-top: 14px;
}
.deep-cut-article {
background: var(--barzine-white);
color: var(--ink);
}
.deep-cut-hero {
display: grid;
grid-template-columns: minmax(280px, 0.48fr) minmax(0, 0.52fr);
min-height: clamp(620px, 72vh, 760px);
}
.deep-cut-hero__image {
background: var(--barzine-black);
min-height: 420px;
}
.deep-cut-hero__image img {
filter: grayscale(0.08) contrast(1.04);
object-position: center top;
}
.deep-cut-hero__copy {
align-content: center;
display: grid;
gap: 18px;
padding: clamp(26px, 5vw, 72px);
}
.deep-cut-hero__copy h1 {
font-size: clamp(40px, 5.4vw, 78px);
line-height: 0.98;
max-width: 760px;
}
.deep-cut-lead {
color: var(--ink-soft);
font-size: clamp(17px, 1.7vw, 22px);
font-weight: 760;
line-height: 1.8;
max-width: 720px;
}
.deep-cut-byline {
color: var(--ink-muted);
font-size: 13px;
font-weight: 900;
letter-spacing: 0;
}
.deep-cut-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.deep-cut-tags span {
align-items: center;
background: var(--barzine-white);
border: 1px solid var(--barzine-line);
color: var(--ink);
display: inline-flex;
justify-content: center;
line-height: 1;
min-height: 32px;
padding: 0 10px;
}
.deep-cut-body {
display: grid;
gap: clamp(22px, 4vw, 48px);
grid-template-columns: minmax(220px, 0.34fr) minmax(0, 0.66fr);
margin: 0 auto;
max-width: 1180px;
padding: clamp(28px, 5vw, 72px) var(--page-gutter) clamp(52px, 7vw, 96px);
}
.deep-cut-sidebar {
align-self: start;
display: grid;
gap: 14px;
position: sticky;
top: 112px;
}
.deep-cut-track,
.deep-cut-track-list {
background: var(--barzine-black);
color: var(--barzine-white);
display: grid;
gap: 12px;
padding: 16px;
}
.deep-cut-track img {
aspect-ratio: 16 / 9;
background: var(--barzine-black);
}
.deep-cut-track__thumb {
display: block;
}
.deep-cut-track__thumb:hover img,
.deep-cut-track__thumb:focus-visible img {
filter: brightness(1.08);
}
.deep-cut-track strong {
font-size: 18px;
line-height: 1.32;
}
.deep-cut-track a,
.deep-cut-sources a {
color: var(--barzine-pink);
font-size: 13px;
font-weight: 900;
}
.deep-cut-track-list a {
border-top: 1px solid rgba(247, 247, 242, 0.18);
display: grid;
gap: 4px;
padding-top: 12px;
}
.deep-cut-track-list__item {
border-top: 1px solid rgba(247, 247, 242, 0.18);
color: var(--barzine-white);
font-size: 14px;
font-weight: 850;
line-height: 1.5;
padding-top: 12px;
}
.deep-cut-track-list strong {
font-size: 15px;
line-height: 1.32;
}
.deep-cut-track-list small {
color: var(--barzine-line);
font-size: 12px;
font-weight: 760;
line-height: 1.56;
}
.deep-cut-persona-list {
background: var(--barzine-white);
color: var(--ink);
display: grid;
gap: 12px;
padding: 16px;
}
.deep-cut-persona-list article {
border-top: 1px solid var(--barzine-line);
display: grid;
gap: 6px;
padding-top: 12px;
}
.deep-cut-persona-list article:first-child {
border-top: 0;
padding-top: 0;
}
.deep-cut-persona-list strong {
color: var(--barzine-pink);
font-size: 13px;
font-weight: 950;
letter-spacing: 0;
text-transform: uppercase;
}
.deep-cut-persona-list p {
color: var(--ink-soft);
font-size: 13px;
font-weight: 760;
line-height: 1.62;
}
.deep-cut-prose {
display: grid;
gap: clamp(26px, 4vw, 46px);
min-width: 0;
width: 100%;
}
.deep-cut-prose section {
border-top: 1px solid var(--barzine-line);
display: grid;
gap: 14px;
padding-top: 22px;
}
.deep-cut-prose section:first-child {
border-top: 0;
padding-top: 0;
}
.deep-cut-prose h2 {
font-size: clamp(23px, 2vw, 31px);
line-height: 1.18;
}
.deep-cut-prose h3 {
color: var(--ink);
font-size: clamp(19px, 1.6vw, 24px);
line-height: 1.28;
}
.deep-cut-prose p {
color: var(--ink-soft);
font-size: clamp(16px, 1.35vw, 18px);
font-weight: 650;
line-height: 1.92;
overflow-wrap: break-word;
}
.deep-cut-prose ul {
display: grid;
gap: 10px;
margin: 0;
padding-left: 1.2em;
}
.deep-cut-prose li {
color: var(--ink-soft);
font-size: clamp(16px, 1.35vw, 18px);
font-weight: 650;
line-height: 1.78;
overflow-wrap: break-word;
}
.deep-cut-dialogue {
display: grid;
gap: 0;
}
.deep-cut-turn {
border-top: 1px solid var(--barzine-line);
display: grid;
gap: 8px;
padding: 18px 0;
}
.deep-cut-turn:first-child {
border-top: 0;
padding-top: 0;
}
.deep-cut-turn:last-child {
padding-bottom: 0;
}
.deep-cut-speaker {
color: var(--barzine-pink);
font-size: 12px;
font-weight: 950;
letter-spacing: 0;
line-height: 1.2;
text-transform: uppercase;
}
.deep-cut-turn--keyy .deep-cut-speaker {
color: var(--barzine-green);
}
.deep-cut-sources a {
border-top: 1px solid var(--barzine-line);
color: var(--ink);
display: block;
padding: 10px 0;
}
.deep-cut-sources ul {
list-style: none;
margin: 0;
padding: 0;
}
.deep-cut-sources li {
border-top: 1px solid var(--barzine-line);
color: var(--ink-soft);
font-size: 14px;
font-weight: 760;
line-height: 1.62;
padding: 12px 0;
}
.deep-cut-sources li a {
border-top: 0;
color: var(--barzine-pink);
display: inline;
overflow-wrap: anywhere;
padding: 0;
word-break: break-word;
}
.deep-cut-related {
border-top: 1px solid var(--barzine-line);
display: grid;
gap: 12px;
padding-top: 22px;
}
.deep-cut-related h2 {
font-size: clamp(24px, 2.6vw, 34px);
}
.deep-cut-related a {
border: 1px solid var(--barzine-line);
color: var(--ink);
display: grid;
gap: 5px;
padding: 14px;
}
.deep-cut-related a:hover,
.deep-cut-related a:focus-visible {
border-color: var(--barzine-pink);
}
.deep-cut-related span {
color: var(--barzine-pink);
font-size: 11px;
font-weight: 950;
letter-spacing: 0;
}
.deep-cut-related strong {
font-size: 15px;
line-height: 1.45;
}
.compact-links .page-link-card {
min-height: 160px;
}
.label-row,
.hero-actions,
.control-row,
.artist-controls {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.artist-controls {
justify-content: flex-end;
max-width: 680px;
}
.badge,
.card-badge,
.status-badge {
align-items: center;
background: var(--red);
color: var(--white);
display: inline-flex;
font-size: 11px;
font-weight: 900;
line-height: 1;
min-height: 28px;
padding: 0 10px;
text-transform: uppercase;
}
.badge.green,
.card-badge.green {
background: var(--green);
}
.badge.red,
.card-badge.red {
background: var(--red-deep);
}
.card-label-row {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.disclosure-badge {
align-items: center;
background: var(--barzine-yellow);
color: var(--black);
display: inline-flex;
font-size: 11px;
font-weight: 950;
line-height: 1;
min-height: 28px;
padding: 0 10px;
text-transform: uppercase;
}
.meta {
color: var(--muted);
font-size: 12px;
font-weight: 800;
}
.text-button,
.chip {
align-items: center;
border: 0;
border-radius: 0;
display: inline-flex;
font-size: 13px;
font-weight: 900;
justify-content: center;
min-height: 40px;
padding: 0 16px;
transition: transform 160ms ease, opacity 160ms ease;
}
.text-button.primary,
.chip.active,
.chip:hover {
background: var(--red);
color: var(--white);
}
@media (hover: hover) {
.text-button:not(.disabled):hover {
transform: translateY(-2px);
}
}
.text-button:not(.disabled):active {
transform: translateY(0);
opacity: 0.85;
}
.text-button.primary.green {
background: var(--green);
color: var(--white);
}
.text-button.secondary {
background: var(--ink);
color: var(--white);
}
.text-button.disabled {
background: var(--barzine-white);
color: var(--ink-soft);
cursor: default;
}
.hero-rail {
display: grid;
gap: 16px;
}
.rail-card {
background: var(--panel);
border: 0;
color: var(--white);
display: grid;
gap: 12px;
min-height: 170px;
padding: 24px 22px;
text-align: left;
}
.rail-card:hover,
.rail-card:focus-visible {
background: var(--barzine-black);
}
.rail-card span,
.section-kicker,
.panel-label,
.cta-card span {
color: var(--red);
font-size: 11px;
font-weight: 950;
letter-spacing: 0;
}
.rail-card strong {
font-size: 20px;
line-height: 1.3;
}
.rail-card.chill span {
color: var(--barzine-line);
}
.section-band {
padding: clamp(38px, 6vw, 78px) clamp(16px, 4vw, 40px);
}
.page-hero {
color: var(--white);
padding: clamp(28px, 4vw, 52px) clamp(16px, 4vw, 40px) clamp(22px, 3vw, 40px);
}
.page-hero > div {
margin: 0 auto;
max-width: var(--content-max);
}
.page-hero p:not(.section-kicker) {
color: var(--muted);
font-size: 17px;
margin-top: 14px;
max-width: 680px;
}
.page-hero.dark {
background: var(--black);
}
.page-hero.light {
background: var(--paper);
color: var(--ink);
}
.page-hero.soft {
background: var(--barzine-white);
color: var(--ink);
}
.page-hero.chill-page {
background: var(--green-soft);
color: var(--barzine-green);
}
.section-band > * {
margin-left: auto;
margin-right: auto;
max-width: var(--content-max);
}
.section-band.dark {
background: var(--black);
color: var(--white);
}
.section-band.light {
background: var(--paper);
color: var(--ink);
}
.section-band.soft {
background: var(--barzine-white);
color: var(--ink);
}
.section-head {
align-items: end;
display: flex;
gap: 22px;
justify-content: space-between;
margin-bottom: 26px;
}
.section-head > div:first-child {
flex-shrink: 0;
}
.history-page-links {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.history-page-links a {
background: var(--barzine-black);
color: var(--barzine-white);
font-size: 13px;
font-weight: 900;
padding: 12px 14px;
text-decoration: none;
}
.history-page-links a:hover,
.history-page-links a:focus-visible {
background: var(--red);
color: var(--white);
}
.history-jp-hiphop-feature {
display: grid;
gap: 24px;
}
.history-jp-hiphop-layout {
display: grid;
gap: 18px;
grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.35fr);
}
.history-jp-hiphop-lead {
background: var(--ink);
color: var(--white);
display: grid;
gap: 14px;
padding: clamp(24px, 4vw, 42px);
}
.history-jp-hiphop-lead h3 {
font-size: clamp(28px, 4vw, 54px);
line-height: 1;
}
.history-jp-hiphop-lead p {
color: var(--barzine-white);
max-width: 620px;
}
.history-jp-hiphop-links {
display: grid;
gap: 10px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.history-jp-hiphop-links a {
background: var(--barzine-white);
color: var(--ink);
display: grid;
gap: 6px;
min-height: 112px;
padding: 18px;
text-decoration: none;
}
.history-jp-hiphop-links a:hover,
.history-jp-hiphop-links a:focus-visible {
background: var(--red);
color: var(--white);
}
.history-jp-hiphop-links span {
color: var(--red);
font-size: 11px;
font-weight: 950;
}
.history-jp-hiphop-links a:hover span,
.history-jp-hiphop-links a:focus-visible span {
color: var(--barzine-yellow);
}
.history-jp-hiphop-links strong {
font-size: clamp(18px, 2vw, 28px);
line-height: 1.1;
}
.chip {
background: var(--barzine-black);
color: var(--barzine-white);
}
.section-band.light .chip,
.section-band.soft .chip {
background: var(--barzine-white);
color: var(--ink);
}
.news-layout {
display: grid;
gap: clamp(20px, 3vw, 38px);
grid-template-columns: 1fr;
}
.daily-brief {
margin-bottom: 22px;
}
.daily-brief:empty {
display: none;
}
.daily-brief__panel {
background: var(--barzine-black);
border-top: 1px solid var(--barzine-black);
color: var(--white);
display: grid;
gap: 18px;
grid-template-columns: minmax(0, 1fr) minmax(280px, 1.2fr);
padding: clamp(18px, 3vw, 28px);
}
.daily-brief__main {
display: grid;
gap: 8px;
}
.daily-brief__main h3 {
font-size: clamp(24px, 3vw, 36px);
line-height: 1.18;
}
.daily-brief__main p:not(.section-kicker),
.daily-brief__desk {
color: var(--barzine-line);
font-size: 13px;
font-weight: 800;
}
.daily-brief__stats {
display: grid;
gap: 8px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.daily-brief__stats span {
background: var(--barzine-black);
color: var(--barzine-line);
display: grid;
font-size: 11px;
font-weight: 950;
gap: 2px;
padding: 12px;
text-transform: uppercase;
}
.daily-brief__stats strong {
color: var(--white);
font-size: 24px;
line-height: 1;
}
.daily-brief__desk {
display: grid;
gap: 8px;
}
.daily-brief__desk span {
color: var(--barzine-yellow);
font-size: 11px;
font-weight: 950;
text-transform: uppercase;
}
.daily-brief__desk a {
border-bottom: 1px solid var(--barzine-black);
color: var(--white);
line-height: 1.35;
padding-bottom: 8px;
}
.daily-brief__local {
border-top: 1px solid color-mix(in srgb, var(--barzine-line) 34%, transparent);
display: grid;
gap: 10px;
grid-column: 1 / -1;
padding-top: 14px;
}
.daily-brief__local span {
color: var(--barzine-yellow);
font-size: 12px;
font-weight: 950;
text-transform: uppercase;
}
.daily-brief__local ul {
display: grid;
gap: 8px;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin: 0;
padding: 0;
}
.daily-brief__local li {
border-left: 3px solid var(--barzine-pink);
color: var(--barzine-white);
font-size: 13px;
font-weight: 850;
line-height: 1.65;
list-style: none;
padding-left: 10px;
}
.artist-youtube-updates {
margin-bottom: clamp(24px, 4vw, 44px);
}
.artist-youtube-updates:empty {
display: none;
}
.youtube-update-grid {
display: grid;
gap: 14px;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.youtube-update-card {
background: var(--barzine-black);
color: var(--barzine-white);
display: grid;
min-height: 100%;
text-decoration: none;
}
.youtube-update-card img {
aspect-ratio: 16 / 9;
background: var(--barzine-black);
display: block;
object-fit: cover;
width: 100%;
}
.youtube-update-card span {
display: grid;
gap: 8px;
padding: 14px;
}
.youtube-update-card small {
color: var(--barzine-yellow);
font-size: 11px;
font-weight: 950;
text-transform: uppercase;
}
.youtube-update-card strong {
font-size: clamp(16px, 1.7vw, 22px);
line-height: 1.2;
}
.page-link-grid {
display: grid;
gap: 18px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.page-link-card {
background: var(--panel);
color: var(--white);
display: grid;
gap: 12px;
min-height: 210px;
padding: 24px;
}
.page-link-card:hover,
.page-link-card:focus-visible {
background: var(--barzine-black);
}
.page-link-card span {
color: var(--red);
font-size: 11px;
font-weight: 950;
}
.page-link-card strong {
font-size: 22px;
line-height: 1.28;
}
.page-link-card p {
color: var(--muted);
font-size: 14px;
}
.page-link-card.chill span {
color: var(--barzine-line);
}
.lesson-stack {
display: grid;
gap: 18px;
}
.lesson-card {
background: var(--panel);
color: var(--white);
display: grid;
gap: 18px;
padding: clamp(22px, 4vw, 48px);
}
.lesson-card h3 {
color: var(--white);
font-size: clamp(28px, 5vw, 56px);
letter-spacing: 0;
line-height: 0.98;
max-width: 920px;
}
.lesson-card p {
color: var(--barzine-white);
font-size: clamp(16px, 2vw, 21px);
line-height: 1.85;
max-width: 900px;
}
.lesson-topic-grid {
margin-top: 10px;
}
.lesson-page-links {
margin-bottom: 24px;
}
.lesson-page-links a[aria-current="page"] {
background: var(--red);
color: var(--white);
}
.lesson-card--compact {
gap: 14px;
padding: clamp(22px, 3vw, 36px);
}
.lesson-card--compact h3 {
font-size: clamp(26px, 3.3vw, 44px);
line-height: 1.05;
}
.lesson-card--compact p {
font-size: clamp(15px, 1.55vw, 18px);
line-height: 1.78;
}
.lesson-card--link {
color: var(--white);
position: relative;
text-decoration: none;
transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.lesson-card--link:hover,
.lesson-card--link:focus-visible {
background: var(--barzine-black);
box-shadow: 0 0 0 3px var(--barzine-pink) inset;
outline: 0;
transform: translateY(-2px);
}
.lesson-card--link:hover .lesson-card__meta b,
.lesson-card--link:focus-visible .lesson-card__meta b {
background: var(--barzine-yellow);
color: var(--barzine-black);
}
.lesson-card a {
color: var(--yellow);
font-weight: 950;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.lesson-card a.lesson-term-link[data-tooltip-open="true"] {
background: var(--barzine-yellow);
color: var(--barzine-black);
outline: 2px solid var(--barzine-yellow);
text-decoration-color: var(--barzine-black);
}
.lesson-card a.lesson-term-link {
cursor: help;
text-decoration-style: dotted;
text-decoration-thickness: 2px;
}
.lesson-card__meta,
.lesson-route {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.lesson-card__meta span,
.lesson-card__meta a,
.lesson-card__meta b,
.lesson-route a,
.lesson-route span {
align-items: center;
background: var(--barzine-black);
color: var(--white);
display: inline-flex;
font-size: 11px;
font-weight: 950;
justify-content: center;
line-height: 1;
min-height: 38px;
padding: 0 12px;
text-decoration: none;
text-transform: uppercase;
}
.lesson-card__meta b {
font-style: normal;
}
.lesson-card__meta span {
background: var(--red);
}
.lesson-route a {
background: var(--barzine-black);
}
.lesson-route span {
background: var(--barzine-line);
color: var(--barzine-black);
}
.lesson-card__meta a:hover,
.lesson-card__meta a:focus-visible,
.lesson-route a:hover,
.lesson-route a:focus-visible {
background: var(--yellow);
color: var(--black);
}
.lesson-term-popover {
background: var(--barzine-black);
border: 1px solid var(--barzine-line);
color: var(--barzine-white);
display: grid;
gap: 8px;
line-height: 1.55;
padding: 14px 16px 16px;
position: fixed;
z-index: 120;
}
.lesson-term-popover[hidden] {
display: none;
}
.lesson-term-popover__meta {
color: var(--yellow);
font-family: var(--font-ui);
font-size: 11px;
font-weight: 900;
letter-spacing: 0.08em;
line-height: 1.2;
text-transform: uppercase;
}
.lesson-term-popover strong {
color: var(--barzine-white);
font-size: 18px;
line-height: 1.25;
}
.lesson-term-popover p,
.lesson-term-popover small {
color: var(--barzine-white);
font-size: 13px;
line-height: 1.55;
}
.lesson-term-popover small {
color: var(--barzine-line);
}
.lesson-term-popover a {
background: var(--yellow);
color: var(--barzine-black);
display: inline-flex;
font-size: 12px;
font-weight: 950;
justify-self: start;
margin-top: 2px;
padding: 6px 10px;
text-decoration: none;
}
.lesson-term-popover__close {
align-items: center;
background: transparent;
border: 0;
color: var(--barzine-white);
display: inline-flex;
font-size: 18px;
font-weight: 950;
height: 28px;
justify-content: center;
padding: 0;
position: absolute;
right: 6px;
top: 4px;
width: 28px;
}
.lesson-landing {
border-left: 4px solid var(--yellow);
color: var(--white) !important;
font-weight: 900;
padding-left: 16px;
}
.lesson-progress {
display: grid;
gap: 10px;
grid-template-columns: repeat(4, minmax(0, 1fr));
margin: 0 0 28px;
}
.lesson-progress a {
background: var(--barzine-black);
color: var(--barzine-white);
display: grid;
gap: 6px;
min-height: 74px;
padding: 14px;
text-decoration: none;
}
.lesson-progress a span {
color: var(--barzine-pink);
font-family: var(--font-display-en);
font-size: 11px;
font-weight: 950;
letter-spacing: 0.04em;
}
.lesson-progress a[aria-current="step"],
.lesson-progress a:hover,
.lesson-progress a:focus-visible {
background: var(--barzine-pink);
color: var(--barzine-white);
outline: 0;
}
.lesson-progress a[aria-current="step"] span,
.lesson-progress a:hover span,
.lesson-progress a:focus-visible span {
color: var(--barzine-yellow);
}
.lesson-progress a.is-read {
box-shadow: inset 0 -5px 0 var(--barzine-green);
}
.lesson-track {
display: grid;
gap: clamp(28px, 4vw, 56px);
}
.lesson-level {
display: grid;
gap: 18px;
}
.lesson-level__head {
align-items: end;
display: grid;
gap: 12px;
grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr);
padding-top: 6px;
}
.lesson-level__head .section-kicker {
grid-column: 1 / -1;
margin: 0;
}
.lesson-level__head h3 {
font-size: clamp(30px, 4.6vw, 68px);
line-height: 0.95;
margin: 0;
}
.lesson-level__head p:not(.section-kicker) {
color: var(--muted);
font-size: clamp(16px, 1.7vw, 22px);
font-weight: 850;
line-height: 1.6;
margin: 0;
}
.lesson-stack--level {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lesson-stack--body {
grid-template-columns: minmax(0, 1fr);
}
.lesson-card--body {
max-width: 1040px;
}
.lesson-card--body h3 {
font-size: clamp(28px, 3vw, 44px);
}
.lesson-card--body p {
max-width: 920px;
}
.lesson-next-step {
align-items: start;
background: var(--barzine-white);
color: var(--barzine-black);
display: grid;
gap: 18px;
grid-template-columns: minmax(160px, 0.32fr) minmax(0, 1fr) auto;
padding: clamp(18px, 3vw, 30px);
}
.lesson-next-step .section-kicker {
color: var(--barzine-pink);
margin: 0 0 6px;
}
.lesson-next-step h4 {
color: var(--barzine-black);
font-size: clamp(24px, 3vw, 40px);
line-height: 1;
margin: 0;
}
.lesson-next-grid {
display: grid;
gap: 12px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lesson-next-grid > div {
display: grid;
gap: 8px;
}
.lesson-next-grid span {
color: var(--barzine-pink);
font-family: var(--font-display-en);
font-size: 11px;
font-weight: 950;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.lesson-next-grid div div {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.lesson-next-step a,
.lesson-next-note,
.lesson-mark-button {
background: var(--barzine-black);
border: 0;
color: var(--barzine-white);
display: inline-flex;
font-family: var(--font-display-en);
font-size: 12px;
font-weight: 950;
min-height: 40px;
padding: 11px 13px;
text-decoration: none;
text-transform: uppercase;
}
.lesson-next-step a:hover,
.lesson-next-step a:focus-visible,
.lesson-mark-button:hover,
.lesson-mark-button:focus-visible {
background: var(--barzine-pink);
color: var(--barzine-white);
outline: 0;
}
.lesson-next-grid .lesson-next-note {
background: var(--barzine-line);
color: var(--barzine-black);
font-family: var(--font-body);
line-height: 1.45;
text-transform: none;
}
.lesson-mark-button {
cursor: pointer;
justify-self: end;
white-space: nowrap;
}
.lesson-mark-button.is-read {
background: var(--barzine-green);
color: var(--barzine-white);
}
@media (max-width: 1100px) {
.lesson-progress,
.lesson-stack--level,
.lesson-next-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lesson-next-step {
grid-template-columns: 1fr;
}
.lesson-mark-button {
justify-self: start;
}
}
@media (max-width: 840px) {
.lesson-progress,
.lesson-level__head,
.lesson-stack--level,
.lesson-next-grid {
grid-template-columns: 1fr;
}
.lesson-progress a {
min-height: 58px;
}
.lesson-level__head h3 {
font-size: 32px;
}
.lesson-level__head p:not(.section-kicker) {
font-size: 15px;
}
}
.card-grid,
.history-grid {
display: grid;
gap: 18px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.content-card,
.history-card,
.term-card,
.event-card {
min-width: 0;
}
.content-card {
background: var(--panel);
border: 0;
color: var(--white);
display: grid;
grid-template-rows: 172px 1fr;
overflow: hidden;
text-align: left;
}
.card-media,
.title-link {
display: block;
}
.title-link:hover,
.title-link:focus-visible {
color: var(--barzine-yellow);
}
.detail-button {
justify-self: start;
margin-top: 2px;
}
.original-title {
color: var(--muted);
font-size: 12px;
}
.editor-note {
background: var(--barzine-white);
color: var(--ink);
font-size: 13px;
font-weight: 850;
padding: 12px;
}
.content-card:hover,
.content-card:focus-visible {
background: var(--barzine-black);
}
.content-card img {
filter: grayscale(0.42) contrast(1.08);
}
.content-card-body {
display: grid;
align-content: start;
gap: 12px;
padding: 18px;
}
.content-card h3 {
display: -webkit-box;
min-height: 5.1em;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
}
.content-card h3,
.term-card h3,
.history-card h3,
.event-card h3 {
overflow-wrap: anywhere;
}
.content-card p,
.term-card p,
.history-card p,
.event-card p,
.notice-box p,
.cta-card p,
.form-note {
color: var(--muted);
font-size: 14px;
}
.event-lineup {
color: var(--ink-soft) !important;
font-weight: 800;
}
.event-status {
background: var(--barzine-black);
color: var(--barzine-yellow);
display: inline-block;
font-size: 11px;
font-weight: 950;
letter-spacing: 0;
margin-bottom: 6px;
padding: 7px 9px;
text-transform: uppercase;
}
.event-review-note {
color: var(--ink-soft) !important;
font-size: 12px !important;
font-weight: 800;
margin-top: 6px;
}
.summary-open {
overflow: hidden;
}
.summary-modal[hidden] {
display: none;
}
.image-modal[hidden] {
display: none;
}
.summary-modal,
.image-modal {
inset: 0;
position: fixed;
z-index: 90;
}
.summary-modal__backdrop,
.image-modal__backdrop {
background: var(--barzine-black);
border: 0;
height: 100%;
inset: 0;
padding: 0;
position: absolute;
width: 100%;
}
.image-modal__sheet {
background: var(--barzine-black);
color: var(--white);
display: grid;
left: 50%;
max-height: min(88vh, 860px);
max-width: min(980px, calc(100vw - 32px));
overflow: hidden;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.image-modal__sheet img {
max-height: 72vh;
}
.image-modal__sheet p {
color: var(--barzine-white);
font-weight: 800;
padding: 18px 20px 20px;
}
.image-modal__close {
align-items: center;
background: var(--red);
border: 0;
color: var(--white);
display: inline-flex;
font-size: 24px;
font-weight: 950;
height: 44px;
justify-content: center;
position: absolute;
right: 12px;
top: 12px;
width: 44px;
z-index: 2;
}
.summary-sheet {
background: var(--paper);
color: var(--ink);
display: grid;
grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.05fr);
left: 50%;
max-height: min(86vh, 820px);
max-width: min(1060px, calc(100vw - 36px));
overflow: hidden;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.summary-sheet__close {
align-items: center;
background: var(--ink);
border: 0;
color: var(--white);
display: inline-flex;
font-size: 24px;
font-weight: 900;
height: 42px;
justify-content: center;
position: absolute;
right: 12px;
top: 12px;
width: 42px;
z-index: 2;
}
.summary-sheet__media {
background: var(--ink);
min-height: 420px;
}
.summary-sheet__body {
display: grid;
gap: 16px;
max-height: min(86vh, 820px);
overflow: auto;
padding: clamp(24px, 4vw, 44px);
}
.summary-sheet__meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.summary-sheet__meta span {
background: var(--barzine-white);
color: var(--ink);
font-size: 11px;
font-weight: 950;
padding: 6px 9px;
}
.summary-sheet__meta .summary-disclosure {
background: var(--barzine-yellow);
color: var(--black);
}
.summary-sheet h3 {
font-size: clamp(24px, 3vw, 42px);
line-height: 1.16;
}
.summary-sheet p,
.summary-sheet li {
color: var(--ink-soft);
}
.summary-sheet ul {
margin: 0;
padding-left: 1.1em;
}
.source-box {
background: var(--barzine-white);
color: var(--ink-soft);
display: grid;
gap: 4px;
font-size: 12px;
padding: 12px;
}
.split-section,
.chill-section {
display: block;
}
.section-media {
align-self: start;
aspect-ratio: 16 / 11;
background: var(--panel);
overflow: hidden;
}
.section-media img {
filter: grayscale(0.24) contrast(1.04);
}
.section-media.compact {
aspect-ratio: 4 / 3;
}
.section-content {
align-self: center;
display: grid;
gap: 22px;
max-width: var(--content-max);
}
.event-list {
display: grid;
gap: 12px;
}
.event-source-block {
display: grid;
gap: 14px;
}
.event-source-grid {
display: grid;
gap: 12px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.event-source-card {
background: var(--barzine-white);
color: var(--ink);
display: grid;
gap: 10px;
min-width: 0;
padding: 16px;
}
.event-source-card small {
color: var(--red);
font-size: 11px;
font-weight: 950;
text-transform: uppercase;
}
.event-source-card h4 {
font-size: 20px;
line-height: 1.1;
overflow-wrap: anywhere;
}
.event-source-card p {
color: var(--muted);
font-size: 12px;
line-height: 1.55;
}
.event-controls {
align-items: end;
display: grid;
gap: 10px;
grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
}
.event-controls label {
min-width: 0;
}
.event-controls select,
.event-controls input {
background: var(--barzine-white);
border: 1px solid var(--barzine-white);
color: var(--ink);
min-height: 46px;
padding: 0 12px;
}
.event-calendar-strip {
display: flex;
gap: 8px;
overflow-x: auto;
padding-bottom: 4px;
}
.event-calendar-strip button {
background: var(--barzine-white);
border: 0;
color: var(--ink);
flex: 0 0 auto;
font-weight: 950;
min-height: 42px;
min-width: 64px;
padding: 0 12px;
}
.event-calendar-strip button.active {
background: var(--red);
color: var(--white);
}
.event-card {
align-items: center;
background: var(--barzine-white);
display: grid;
gap: 16px;
grid-template-columns: 78px minmax(0, 1fr) auto;
padding: 16px 0;
}
.event-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-end;
}
.event-date {
background: var(--ink);
color: var(--white);
display: grid;
font-weight: 950;
min-height: 66px;
place-items: center;
text-align: center;
}
.event-date span {
color: var(--barzine-white);
display: block;
font-size: 12px;
}
.battle-controls {
display: grid;
gap: 12px;
grid-template-columns: minmax(240px, 1.1fr) minmax(220px, 0.9fr);
min-width: min(560px, 100%);
}
.battle-desk {
display: grid;
gap: 18px;
}
.battle-metrics {
display: grid;
gap: 10px;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.battle-metrics span {
background: var(--barzine-black);
color: var(--barzine-line);
display: grid;
font-size: 11px;
font-weight: 950;
gap: 4px;
min-width: 0;
padding: 14px;
text-transform: uppercase;
}
.battle-metrics strong {
color: var(--white);
font-size: clamp(18px, 2vw, 26px);
line-height: 1.05;
overflow-wrap: anywhere;
text-transform: none;
}
.battle-layout {
display: grid;
gap: 18px;
grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
}
.battle-panel {
align-content: start;
background: var(--barzine-black);
color: var(--white);
display: grid;
gap: 16px;
min-width: 0;
padding: clamp(18px, 2.4vw, 26px);
}
.battle-panel--wide {
grid-column: 1 / -1;
}
.battle-panel h2 {
font-size: clamp(22px, 2.5vw, 34px);
}
.battle-panel-head {
align-items: end;
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: space-between;
}
.battle-panel-head > span {
color: var(--barzine-yellow);
font-size: 12px;
font-weight: 950;
text-transform: uppercase;
}
.battle-event-list {
display: grid;
gap: 10px;
}
.battle-info-grid {
display: grid;
gap: 12px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.battle-info-card {
background: var(--barzine-black);
border: 1px solid var(--barzine-black);
display: grid;
gap: 0;
min-width: 0;
overflow: hidden;
}
.battle-info-card__media {
background: var(--barzine-black);
color: var(--white);
display: block;
position: relative;
text-decoration: none;
}
.battle-info-card__media img {
aspect-ratio: 4 / 3;
display: block;
height: auto;
object-fit: cover;
width: 100%;
}
.battle-info-card__media--empty {
align-items: center;
display: flex;
min-height: 190px;
}
.battle-info-card__media span {
background: var(--barzine-black);
bottom: 10px;
color: var(--barzine-yellow);
font-size: 11px;
font-weight: 950;
left: 10px;
line-height: 1;
padding: 7px 8px;
position: absolute;
text-transform: uppercase;
}
.battle-info-card__body {
display: grid;
gap: 12px;
padding: 16px;
}
.battle-info-card__top {
align-items: center;
display: flex;
gap: 8px;
justify-content: space-between;
}
.battle-info-card__top span {
background: var(--barzine-black);
color: var(--barzine-yellow);
font-size: 11px;
font-weight: 950;
line-height: 1;
padding: 7px 8px;
}
.battle-info-card__top small,
.battle-info-card p,
.battle-info-card dt {
color: var(--barzine-line);
font-size: 12px;
font-weight: 850;
}
.battle-info-card h3 {
font-size: 20px;
line-height: 1.2;
}
.battle-info-card dl {
display: grid;
gap: 8px;
margin: 0;
}
.battle-info-card dl div {
display: grid;
gap: 2px;
}
.battle-info-card dd {
font-size: 14px;
font-weight: 950;
margin: 0;
overflow-wrap: anywhere;
}
.battle-info-tags,
.battle-info-links {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.battle-info-tags span,
.battle-info-links a {
background: var(--barzine-black);
color: var(--white);
font-size: 11px;
font-weight: 950;
padding: 8px 9px;
}
.battle-info-links .battle-info-link--ticket,
.battle-info-links .battle-info-link--entry {
background: var(--barzine-yellow);
color: var(--barzine-black);
}
.battle-event-button {
background: var(--barzine-black);
border: 0;
color: var(--white);
display: grid;
gap: 7px;
padding: 14px;
text-align: left;
}
.battle-event-button.active,
.battle-event-button:hover,
.battle-event-button:focus-visible {
background: var(--barzine-black);
}
.battle-event-button span,
.battle-event-button small,
.battle-note {
color: var(--barzine-line);
font-size: 12px;
font-weight: 850;
}
.battle-event-button strong {
font-size: 16px;
line-height: 1.32;
}
.battle-summary-grid {
display: grid;
gap: 10px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.battle-summary-grid span {
background: var(--barzine-black);
display: grid;
gap: 3px;
min-width: 0;
padding: 14px;
}
.battle-summary-grid small {
color: var(--barzine-line);
font-size: 11px;
font-weight: 950;
text-transform: uppercase;
}
.battle-summary-grid strong {
font-size: 15px;
overflow-wrap: anywhere;
}
.battle-event-media {
display: grid;
gap: 10px;
grid-template-columns: minmax(0, 1.1fr) minmax(108px, 0.55fr);
}
.battle-media-card {
background: var(--barzine-black);
color: var(--white);
display: grid;
min-width: 0;
overflow: hidden;
position: relative;
}
.battle-media-card img {
aspect-ratio: 16 / 9;
display: block;
height: 100%;
object-fit: cover;
width: 100%;
}
.battle-media-card--winner img {
aspect-ratio: 1 / 1;
}
.battle-media-card span {
background: var(--barzine-line);
bottom: 8px;
color: var(--white);
font-size: 10px;
font-weight: 950;
left: 8px;
line-height: 1;
padding: 6px 7px;
position: absolute;
text-transform: uppercase;
}
.battle-media-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
grid-column: 1 / -1;
}
.battle-media-links a {
background: var(--barzine-black);
color: var(--white);
font-size: 11px;
font-weight: 950;
padding: 9px 10px;
text-transform: uppercase;
}
.battle-media-links a:hover,
.battle-media-links a:focus-visible {
background: var(--barzine-yellow);
color: var(--barzine-black);
}
.battle-media-links .battle-media-link--youtube {
background: var(--barzine-pink);
}
.battle-media-links .battle-media-link--abema {
background: var(--barzine-green);
}
.battle-table-wrap {
max-width: 100%;
overflow-x: auto;
}
.battle-table-wrap:focus-visible {
outline: 2px solid var(--barzine-yellow);
outline-offset: 3px;
}
.battle-table {
border-collapse: collapse;
min-width: 760px;
width: 100%;
}
.battle-table caption {
caption-side: top;
color: var(--barzine-line);
font-size: 12px;
font-weight: 950;
padding: 0 0 8px;
text-align: left;
text-transform: uppercase;
}
.battle-table th,
.battle-table td {
padding: 13px 12px;
text-align: left;
vertical-align: top;
}
.battle-table th {
color: var(--barzine-line);
font-size: 11px;
font-weight: 950;
text-transform: uppercase;
}
.battle-table tr:nth-child(even) td {
background: var(--barzine-black);
}
.battle-table td {
color: var(--barzine-white);
font-size: 13px;
font-weight: 850;
}
.battle-table-empty td {
color: var(--barzine-line);
}
.table-scroll-hint {
color: var(--barzine-line);
font-size: 12px;
font-weight: 850;
margin: -4px 0 0;
}
.battle-reset-button {
background: var(--barzine-yellow);
border: 0;
color: var(--barzine-black);
cursor: pointer;
font-size: 11px;
font-weight: 950;
min-height: 34px;
padding: 8px 12px;
text-transform: uppercase;
}
.battle-person {
color: var(--white);
font-weight: 950;
}
.battle-person.winner {
color: var(--barzine-yellow);
}
.battle-person.loser {
color: var(--barzine-line);
}
.submit-card {
background: var(--barzine-white);
display: grid;
gap: 16px;
padding: 22px;
}
.form-grid {
display: grid;
gap: 12px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
label {
color: var(--ink-soft);
display: grid;
font-size: 12px;
font-weight: 850;
gap: 6px;
}
input,
select,
textarea {
background: var(--barzine-white);
border: 1px solid var(--barzine-white);
color: var(--ink);
min-height: 42px;
padding: 0 12px;
width: 100%;
}
textarea {
min-height: 142px;
padding: 12px;
resize: vertical;
}
input[type="checkbox"] {
min-height: 0;
width: auto;
}
input[type="radio"] {
min-height: 0;
width: auto;
}
input[type="file"] {
align-items: center;
cursor: pointer;
display: flex;
padding: 9px 12px;
}
.field-note {
color: var(--muted);
font-size: 11px;
font-weight: 800;
line-height: 1.5;
}
.intake-consent {
background: var(--barzine-white);
display: grid;
gap: 8px;
padding: 14px;
}
.intake-consent label {
align-items: start;
display: grid;
gap: 8px;
grid-template-columns: auto minmax(0, 1fr);
}
input:focus,
select:focus,
textarea:focus,
button:focus-visible {
outline: 2px solid var(--red);
outline-offset: 2px;
}
.intake-layout {
align-items: start;
display: grid;
gap: clamp(18px, 3vw, 32px);
grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.65fr);
}
.intake-panel,
.quality-panel {
background: var(--barzine-white);
border-top: 5px solid var(--black);
color: var(--ink);
display: grid;
gap: 18px;
padding: clamp(18px, 3vw, 30px);
}
.quality-panel {
position: sticky;
top: 92px;
}
.intake-panel h2,
.quality-panel h2 {
font-size: clamp(24px, 2.6vw, 38px);
}
.intake-panel p,
.quality-panel p,
.quality-panel li {
color: var(--ink-soft);
font-size: 14px;
}
.intake-channel-grid {
display: grid;
gap: 10px;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.intake-channel-grid label {
background: var(--barzine-white);
border: 1px solid var(--barzine-white);
color: var(--ink);
cursor: pointer;
display: grid;
gap: 6px;
min-height: 128px;
padding: 14px;
position: relative;
}
.intake-channel-grid label:has(input:checked) {
background: var(--ink);
border-color: var(--ink);
color: var(--white);
}
.intake-channel-grid label:has(input:checked) span {
color: var(--barzine-white);
}
.intake-channel-grid input {
opacity: 0;
pointer-events: none;
position: absolute;
}
.intake-channel-grid label::after {
border: 2px solid var(--barzine-line);
border-radius: 999px;
content: "";
height: 14px;
position: absolute;
right: 14px;
top: 14px;
width: 14px;
}
.intake-channel-grid label:has(input:checked)::after {
background: var(--red);
border-color: var(--white);
box-shadow: 0 0 0 3px var(--red);
}
.intake-channel-grid strong {
font-size: 13px;
}
.intake-action-row {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.intake-action-row button,
.intake-action-row a {
background: var(--black);
border: 0;
color: var(--white);
font-size: 13px;
font-weight: 950;
min-height: 44px;
padding: 0 16px;
}
.intake-action-row a {
align-items: center;
display: inline-flex;
}
.intake-output {
background: var(--barzine-black);
color: var(--white);
display: grid;
gap: 8px;
padding: 16px;
}
.intake-output[hidden] {
display: none;
}
.intake-output span {
color: var(--red);
font-size: 11px;
font-weight: 950;
}
.intake-output strong {
font-size: 18px;
line-height: 1.2;
}
.intake-output p {
color: var(--barzine-white);
font-size: 13px;
font-weight: 750;
line-height: 1.7;
margin: 0;
white-space: pre-wrap;
}
.intake-status {
color: var(--red);
font-size: 13px;
font-weight: 900;
}
.quality-list {
display: grid;
gap: 10px;
list-style: none;
margin: 0;
padding: 0;
}
.quality-list li {
border-left: 4px solid var(--red);
display: grid;
gap: 5px;
padding: 4px 0 4px 12px;
}
.quality-list strong {
color: var(--ink);
font-size: 13px;
line-height: 1.35;
}
.quality-list span {
color: var(--ink-soft);
font-size: 13px;
font-weight: 750;
line-height: 1.6;
}
.quality-note {
background: var(--ink);
color: var(--white);
display: grid;
gap: 8px;
padding: 16px;
}
.quality-note strong {
color: var(--red);
font-size: 12px;
font-weight: 950;
}
.quality-note p {
color: var(--barzine-white);
margin: 0;
}
.contact-hero p {
color: var(--barzine-white);
max-width: 54ch;
}
.search-box {
flex: 1 1 220px;
min-width: min(220px, 100%);
}
.section-head > .search-box {
max-width: 520px;
}
.dictionary-section-head .dictionary-lead {
color: var(--muted);
font-size: 14px;
line-height: 1.7;
margin-top: 8px;
max-width: 56ch;
}
.dictionary-layout,
.artist-layout {
display: grid;
gap: clamp(16px, 3vw, 28px);
}
.dictionary-layout {
align-items: start;
grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.3fr);
}
.dictionary-layout--index {
grid-template-columns: 1fr;
}
.artist-layout {
display: block;
}
.term-grid {
display: grid;
gap: 10px;
grid-template-columns: 1fr;
order: 3;
}
.dictionary-layout--index .term-grid {
grid-column: 1 / -1;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.term-detail,
.dictionary-entry,
.legal-note,
.guide-card,
.archive-panel,
.history-detail-panel,
.artist-guide-panel,
.prefecture-card,
.artist-profile-card,
.social-plan article,
.cannabis-angle-grid article,
.cannabis-check-grid article,
.mini-dictionary__grid article {
background: var(--barzine-white);
color: var(--ink);
}
.term-detail {
display: grid;
gap: 18px;
margin-bottom: 18px;
padding: clamp(22px, 3vw, 36px);
order: 4;
position: sticky;
top: 92px;
}
.term-detail h3 {
font-size: clamp(36px, 6vw, 72px);
line-height: 0.95;
}
.term-filter-bar {
display: flex;
flex-wrap: wrap;
gap: 8px;
grid-column: 1 / -1;
order: 1;
}
.term-filter-bar button,
.term-filter-bar a {
background: var(--barzine-white);
border: 0;
color: var(--ink);
cursor: pointer;
display: inline-flex;
align-items: center;
font-weight: 900;
min-height: 36px;
padding: 0 12px;
text-decoration: none;
}
.term-filter-bar button.active,
.term-filter-bar a.active {
background: var(--ink);
color: var(--white);
}
.term-stats {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 8px;
grid-column: 1 / -1;
order: 2;
}
.term-learning-routes {
display: grid;
gap: 10px;
grid-column: 1 / -1;
grid-template-columns: repeat(5, minmax(0, 1fr));
order: 0;
}
.term-learning-routes button,
.term-learning-routes a {
background: var(--barzine-white);
border: 1px solid var(--barzine-white);
color: var(--ink);
cursor: pointer;
display: grid;
gap: 6px;
min-height: 92px;
padding: 14px;
text-align: left;
text-decoration: none;
}
.term-learning-routes span,
.term-learning-routes small {
color: var(--muted);
font-size: 11px;
font-weight: 900;
}
.term-learning-routes strong {
font-size: 16px;
line-height: 1.05;
}
.term-learning-routes button.active,
.term-learning-routes button:hover,
.term-learning-routes button:focus-visible,
.term-learning-routes a.active,
.term-learning-routes a:hover,
.term-learning-routes a:focus-visible {
background: var(--ink);
border-color: var(--ink);
color: var(--white);
}
.term-learning-routes button.active span,
.term-learning-routes button.active small,
.term-learning-routes button:hover span,
.term-learning-routes button:hover small,
.term-learning-routes button:focus-visible span,
.term-learning-routes button:focus-visible small,
.term-learning-routes a.active span,
.term-learning-routes a.active small,
.term-learning-routes a:hover span,
.term-learning-routes a:hover small,
.term-learning-routes a:focus-visible span,
.term-learning-routes a:focus-visible small {
color: var(--barzine-white);
}
.term-stats span,
.term-stats strong {
background: var(--barzine-white);
color: var(--barzine-line);
display: inline-flex;
font-size: 11px;
font-weight: 900;
padding: 7px 10px;
}
.term-stats strong {
background: var(--ink);
color: var(--white);
}
.kana,
.term-short {
color: var(--red);
font-weight: 900;
}
.dictionary-entry__meta,
.metric-row,
.artist-angle-row,
.dictionary-next-actions,
.tag-cloud,
.prefecture-card__cities,
.prefecture-dig-list,
.prefecture-search-links,
.artist-social-links,
.cannabis-source-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.dictionary-entry__meta span,
.metric-row span,
.tag-cloud span,
.tag-cloud button,
.tag-cloud a,
.prefecture-card__cities span,
.prefecture-dig-list span,
.artist-angle-row span {
align-items: center;
background: var(--barzine-white);
border: 0;
color: var(--ink);
display: inline-flex;
font-size: 11px;
font-weight: 900;
justify-content: center;
line-height: 1.1;
min-height: 34px;
padding: 0 10px;
}
.tag-cloud span,
.tag-cloud button,
.tag-cloud a {
background: var(--barzine-black);
color: var(--barzine-white);
}
.tag-cloud a::after,
.tag-cloud button::after {
color: var(--barzine-yellow);
content: " →";
font-family: var(--font-display-en);
font-weight: 950;
}
.tag-cloud button.pending {
background: var(--barzine-white);
color: var(--ink-soft);
}
.tag-cloud a:hover,
.tag-cloud a:focus-visible {
background: var(--barzine-pink);
color: var(--white);
}
.metric-row {
justify-content: flex-end;
}
.dictionary-deep-grid,
.cannabis-check-grid,
.cannabis-angle-grid,
.mini-dictionary__grid {
display: grid;
gap: 12px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.history-detail-grid {
align-items: start;
display: grid;
gap: 12px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dictionary-deep-grid section {
background: var(--barzine-white);
padding: 16px;
}
.dictionary-next-actions a,
.dictionary-next-actions button,
.history-search-seeds a,
.recommend-box a,
.song-link-list a,
.artist-track-list a,
.artist-track-list span,
.artist-social-links a,
.prefecture-search-links a,
.cannabis-source-links a {
background: var(--ink);
border: 0;
color: var(--white);
display: inline-flex;
font-size: 12px;
font-weight: 900;
gap: 6px;
padding: 9px 11px;
text-decoration: none;
}
.dictionary-next-actions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
width: 100%;
}
.dictionary-next-actions .dictionary-next-card {
align-items: start;
background: var(--barzine-white);
border: 1px solid var(--barzine-white);
color: var(--ink);
cursor: pointer;
display: grid;
gap: 7px;
min-height: 116px;
padding: 14px;
text-align: left;
width: 100%;
}
.dictionary-next-actions .dictionary-next-card span {
color: var(--red);
font-size: 11px;
font-weight: 950;
}
.dictionary-next-actions .dictionary-next-card strong {
font-size: 20px;
line-height: 1.08;
overflow-wrap: anywhere;
}
.dictionary-next-actions .dictionary-next-card small,
.dictionary-next-actions .dictionary-next-card p {
color: var(--muted);
font-size: 12px;
font-weight: 800;
line-height: 1.45;
margin: 0;
}
.dictionary-next-actions .dictionary-next-card:hover,
.dictionary-next-actions .dictionary-next-card:focus-visible {
background: var(--ink);
border-color: var(--ink);
color: var(--white);
}
.dictionary-next-actions .dictionary-next-card:hover small,
.dictionary-next-actions .dictionary-next-card:hover p,
.dictionary-next-actions .dictionary-next-card:focus-visible small,
.dictionary-next-actions .dictionary-next-card:focus-visible p {
color: var(--barzine-white);
}
.deep-cut-share {
border-top: 1px solid var(--barzine-line);
margin: clamp(38px, 6vw, 72px) 0 clamp(26px, 4vw, 48px);
padding-top: 18px;
}
.deep-cut-share h2 {
color: var(--barzine-pink);
font-family: var(--font-ui);
font-size: 13px;
font-weight: 950;
letter-spacing: 0;
margin: 0 0 12px;
text-transform: uppercase;
}
.deep-cut-share__actions {
margin-top: 10px;
}
.artist-track-list span {
align-items: flex-start;
flex-direction: column;
}
.term-button {
background: var(--barzine-white);
border: 1px solid var(--barzine-white);
color: var(--ink);
cursor: pointer;
display: grid;
gap: 6px;
min-height: 156px;
padding: 16px;
text-align: left;
text-decoration: none;
}
.term-button.active,
.term-button:hover,
.term-button:focus-visible {
background: var(--ink);
border-color: var(--ink);
color: var(--white);
}
.term-button span {
color: var(--red);
font-size: 11px;
font-weight: 950;
}
.term-button small,
.term-button em,
.term-button p {
color: var(--muted);
font-style: normal;
}
.term-button p {
color: var(--barzine-line);
font-size: 14px;
font-weight: 700;
line-height: 1.6;
margin: 6px 0 0;
}
.term-button b {
align-self: end;
color: var(--red);
font-size: 11px;
font-weight: 950;
margin-top: 8px;
}
.term-button.active small,
.term-button.active em,
.term-button.active p,
.term-button.active b,
.term-button:hover small,
.term-button:hover em,
.term-button:hover p,
.term-button:hover b,
.term-button:focus-visible small,
.term-button:focus-visible em,
.term-button:focus-visible p,
.term-button:focus-visible b {
color: var(--barzine-white);
}
.term-card,
.history-card {
background: var(--barzine-white);
display: grid;
gap: 10px;
padding: 20px;
}
.term-card header,
.history-card header {
align-items: start;
display: flex;
gap: 12px;
justify-content: space-between;
}
.term-card .risk {
color: var(--red);
font-size: 12px;
font-weight: 900;
}
.history-card {
background: var(--panel);
color: var(--white);
min-height: 196px;
}
.history-stack {
--history-accent: var(--red);
--history-panel: var(--barzine-white);
--history-ink: var(--ink);
display: grid;
gap: 22px;
}
.history-stack--paper {
--history-accent: var(--barzine-line);
--history-panel: var(--barzine-white);
}
.history-stack--sleeve {
--history-accent: var(--barzine-green);
--history-panel: var(--barzine-white);
}
.history-stack--zine {
--history-accent: var(--barzine-black);
--history-panel: var(--barzine-white);
}
.history-stack--terminal {
--history-accent: var(--barzine-green);
--history-panel: var(--barzine-white);
}
.history-stack--poster,
.history-stack--japanese-sound {
--history-accent: var(--pink);
--history-panel: var(--barzine-white);
}
.history-stack--modern,
.history-stack--japanese-now {
--history-accent: var(--barzine-green);
--history-panel: var(--barzine-white);
}
.history-stack--japanese-roots,
.history-stack--tokyo,
.history-stack--flyer,
.history-stack--crate,
.history-stack--street,
.history-stack--feed {
--history-accent: var(--pink);
--history-panel: var(--barzine-white);
}
.archive-visual-band,
.cannabis-visual-band {
background: var(--panel);
color: var(--white);
display: grid;
grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1fr);
min-height: 260px;
overflow: hidden;
}
.archive-visual-band img,
.cannabis-visual-band img {
min-height: 260px;
}
.archive-visual-band div,
.cannabis-visual-band div {
align-content: center;
display: grid;
gap: 12px;
padding: clamp(24px, 4vw, 46px);
}
.archive-visual-band span,
.cannabis-visual-band span {
color: var(--barzine-yellow);
font-size: 11px;
font-weight: 950;
}
.archive-visual-band strong,
.cannabis-visual-band strong {
font-size: clamp(24px, 3vw, 40px);
line-height: 1.1;
}
.genre-switch,
.era-strip {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.genre-button,
.era-pill {
background: var(--barzine-black);
border: 0;
color: var(--barzine-white);
display: grid;
gap: 4px;
padding: 14px 16px;
text-align: left;
text-decoration: none;
}
.genre-button.active,
.era-pill.active {
background: var(--history-accent);
color: var(--white);
}
.genre-button span,
.era-pill span {
color: var(--muted);
font-size: 11px;
font-weight: 850;
}
.genre-button.active span,
.era-pill.active span {
color: var(--barzine-white);
}
.history-context-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.history-context-links a {
background: var(--history-panel);
color: var(--ink);
font-size: 12px;
font-weight: 950;
padding: 10px 12px;
text-decoration: none;
}
.history-depth-toggle {
display: none;
}
.history-depth-toggle button {
background: var(--barzine-black);
border: 0;
color: var(--barzine-white);
cursor: pointer;
font: inherit;
font-size: 12px;
font-weight: 950;
padding: 12px 14px;
}
.history-depth-toggle button.active {
background: var(--barzine-yellow);
color: var(--barzine-black);
}
.history-static-summary {
display: grid;
gap: 12px;
grid-template-columns: repeat(4, minmax(0, 1fr));
margin-top: 18px;
}
.history-static-summary article {
background: var(--barzine-white);
color: var(--ink);
display: grid;
gap: 10px;
padding: 18px;
}
.history-static-summary span {
color: var(--pink);
font-size: 11px;
font-weight: 950;
}
.history-static-summary h3 {
font-size: 20px;
line-height: 1.2;
margin: 0;
}
.history-static-summary p {
color: var(--ink-soft);
font-size: 14px;
font-weight: 850;
line-height: 1.7;
margin: 0;
}
.history-static-summary a {
color: var(--barzine-black);
font-size: 13px;
font-weight: 950;
}
.era-feature {
display: grid;
gap: 22px;
}
.era-feature__intro {
background: var(--history-panel);
color: var(--ink);
display: grid;
gap: 14px;
padding: clamp(24px, 4vw, 48px);
}
.era-feature__intro h3 {
font-family: var(--font-display-en);
font-size: clamp(28px, 4.8vw, 66px);
line-height: 1;
}
.era-feature__intro > p:first-child {
color: var(--history-accent);
font-weight: 950;
}
.era-feature__intro strong {
font-size: clamp(22px, 3vw, 34px);
line-height: 1.2;
}
.era-feature__grid,
.artist-guide-grid,
.prefecture-card-grid,
.artist-profile-grid,
.guide-grid,
.social-plan-grid,
.cannabis-history {
display: grid;
align-items: start;
gap: 16px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.archive-panel,
.history-detail-panel,
.artist-guide-panel {
display: grid;
gap: 14px;
padding: 20px;
}
.archive-panel--wide {
grid-column: span 2;
}
.history-era-main {
grid-template-columns: 1fr;
}
.history-era-main .archive-panel,
.history-era-main .archive-panel--wide {
grid-column: 1 / -1;
}
@media (min-width: 768px) {
.history-era-main .archive-panel--wide {
align-items: start;
display: grid;
gap: 22px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.history-era-main .archive-detail {
border-top: 1px solid var(--barzine-line);
padding-top: 18px;
}
.history-era-main .archive-detail:first-child,
.history-era-main .archive-detail:nth-child(2) {
border-top: 0;
padding-top: 0;
}
}
@media (min-width: 900px) {
.history-detail-grid,
.artist-guide-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.history-listen-panel {
align-content: start;
}
.history-listen-panel h4 {
margin: 0;
}
.history-listen-panel p {
font-size: clamp(18px, 2vw, 25px);
font-weight: 850;
line-height: 1.65;
max-width: 980px;
}
.history-stack .archive-panel,
.history-stack .history-detail-panel,
.history-stack .artist-guide-panel {
color: var(--ink);
}
.history-stack .archive-detail p,
.history-stack .archive-detail li,
.history-stack .history-detail-panel p,
.history-stack .history-detail-panel li,
.history-stack .artist-guide-panel p,
.history-stack .artist-guide-panel li {
color: var(--ink-soft);
font-weight: 850;
line-break: strict;
overflow-wrap: normal;
text-wrap: pretty;
word-break: normal;
}
.history-listen-panel .check-list {
columns: 2;
max-width: 760px;
}
.timeline {
display: grid;
gap: 10px;
}
.timeline__row {
display: grid;
gap: 10px;
grid-template-columns: 72px minmax(0, 1fr);
}
.timeline__row span,
.history-search-seeds span,
.heads-pick span {
color: var(--red);
font-size: 11px;
font-weight: 950;
}
.check-list {
margin: 0;
padding-left: 1.1em;
}
.deep-note {
padding-top: 0;
}
.deep-note + .deep-note {
margin-top: 14px;
}
.history-accordion {
align-content: start;
}
.archive-detail {
border-top: 0;
padding-top: 0;
}
.archive-detail:first-child {
border-top: 0;
padding-top: 0;
}
.archive-detail > h4 {
font-size: 15px;
font-weight: 950;
line-height: 1.25;
margin: 0;
}
.archive-detail > *:not(h4) {
margin-top: 12px;
}
.history-detail-panel,
.artist-guide-panel {
grid-column: 1 / -1;
}
.history-long-lead {
border-left: 6px solid var(--history-accent);
display: grid;
gap: 10px;
padding-left: 16px;
}
.history-long-lead p {
color: var(--ink-soft);
font-weight: 850;
line-height: 1.75;
margin: 0;
}
.history-expanded-layer {
display: grid;
gap: 18px;
}
.history-stack,
.era-feature,
.era-feature__intro,
.history-expanded-layer,
.history-read-columns,
.history-read-column,
.history-lineage-panel,
.history-lineage-item,
.history-lineage-item > div,
.history-dispute-panel,
.history-dispute-card,
.history-essential-panel,
.history-essential-disc,
.history-detail-grid,
.history-detail-grid > *,
.history-long-lead,
.archive-detail {
min-width: 0;
max-width: 100%;
}
.history-read-columns,
.history-lineage-panel,
.history-dispute-panel,
.history-essential-panel {
background: var(--barzine-white);
color: var(--ink);
display: grid;
gap: 18px;
padding: clamp(20px, 3vw, 30px);
}
.history-read-columns {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.history-read-column,
.history-lineage-item,
.history-dispute-card {
display: grid;
gap: 12px;
}
.history-read-column h5,
.history-lineage-item h5,
.history-dispute-card h5 {
font-size: clamp(20px, 2vw, 30px);
line-height: 1.2;
margin: 0;
}
.history-read-column > div:first-child > span {
color: var(--ink-soft);
font-size: 12px;
font-weight: 950;
}
.history-read-column p,
.history-lineage-item p,
.history-dispute-card p,
.history-established p {
color: var(--ink-soft);
font-weight: 850;
line-height: 1.8;
margin: 0;
}
.history-lineage-panel > div:last-child,
.history-dispute-panel > div:last-child,
.history-essential-list {
display: grid;
gap: 16px;
}
.history-lineage-item {
border-top: 1px solid var(--barzine-line);
grid-template-columns: 52px minmax(0, 1fr);
padding-top: 16px;
}
.history-lineage-item > span,
.history-essential-disc > span,
.history-established > span,
.history-source-list > span {
color: var(--pink);
font-size: 11px;
font-weight: 950;
}
.history-essential-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.history-essential-disc {
border-top: 1px solid var(--barzine-line);
display: grid;
gap: 12px;
grid-template-columns: 46px minmax(0, 1fr);
padding-top: 16px;
}
.history-essential-disc h5 {
font-size: clamp(18px, 1.8vw, 24px);
line-height: 1.25;
margin: 0;
}
.history-essential-disc p {
color: var(--ink-soft);
font-weight: 850;
line-height: 1.7;
margin: 0;
}
.history-column-tracks {
border-top: 1px solid var(--barzine-line);
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 16px;
padding-top: 16px;
}
.history-column-tracks > span {
color: var(--pink);
flex-basis: 100%;
font-size: 11px;
font-weight: 950;
}
.history-column-track {
align-items: center;
border: 1px solid var(--barzine-line);
border-radius: 8px;
display: flex;
gap: 8px;
overflow: hidden;
padding-right: 10px;
text-decoration: none;
}
.history-column-track img {
display: block;
height: 40px;
object-fit: cover;
width: 56px;
}
.history-column-track span {
color: var(--ink);
font-size: 12px;
font-weight: 850;
}
.history-purchase-links {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.history-purchase-links a {
color: var(--ink-soft);
font-size: 13px;
font-weight: 850;
text-decoration: underline;
}
.history-established,
.history-claim-list {
display: grid;
gap: 8px;
}
.history-source-list {
border-top: 1px solid var(--barzine-line);
display: flex;
flex-wrap: wrap;
gap: 8px;
padding-top: 12px;
}
.history-source-list a,
.history-source-list > span:not(:first-child) {
background: var(--barzine-line);
color: var(--ink);
font-size: 12px;
font-weight: 950;
padding: 8px 10px;
text-decoration: none;
}
.history-research-panel {
background: var(--barzine-white);
color: var(--ink);
display: grid;
gap: 16px;
grid-column: 1 / -1;
padding: clamp(20px, 3vw, 30px);
}
.history-detail-panel__head,
.history-research-head,
.artist-guide-panel__head,
.prefecture-radar__head {
align-items: end;
display: flex;
gap: 18px;
justify-content: space-between;
}
.history-research-head > p {
color: var(--ink-soft);
max-width: 520px;
}
.history-research-grid {
display: grid;
gap: 14px;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.history-research-card {
background: var(--barzine-white);
display: grid;
gap: 12px;
padding: 18px;
}
.history-research-card span {
color: var(--red);
font-size: 11px;
font-weight: 950;
}
.history-research-card h5 {
font-size: 18px;
line-height: 1.25;
}
.history-research-card p,
.history-research-card li {
color: var(--ink-soft);
font-weight: 800;
}
.history-research-card ul {
display: grid;
gap: 8px;
margin: 0;
padding-left: 1.1em;
}
.history-research-detail {
display: grid;
gap: 12px;
}
.history-research-detail strong {
color: var(--red);
display: block;
font-size: 11px;
font-weight: 900;
margin-bottom: 3px;
}
.history-research-detail p {
font-size: 13px;
line-height: 1.7;
}
.history-figure-context {
display: grid;
gap: 10px;
list-style: none;
margin: 0;
padding: 0;
}
.history-figure-context li {
background: var(--barzine-black);
color: var(--barzine-white);
display: grid;
gap: 4px;
padding: 14px;
}
.history-figure-context span {
color: var(--barzine-yellow);
font-family: var(--font-display-en);
font-size: 11px;
font-weight: 950;
text-transform: uppercase;
}
.history-search-seeds,
.era-feature__footer,
.recommend-box,
.song-link-list,
.artist-track-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.history-recommend-track-list {
display: grid;
gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
width: 100%;
}
.recommend-box--history-tracks {
width: 100%;
}
.artist-track-list--cards,
.song-link-list {
display: grid;
gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.artist-card .song-link-list {
grid-template-columns: 1fr;
}
.era-next-nav {
display: grid;
gap: 12px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.era-next-nav button,
.era-next-nav a {
background: var(--ink);
border: 0;
color: var(--white);
display: grid;
gap: 6px;
min-height: 84px;
padding: 16px;
text-align: left;
text-decoration: none;
}
.era-next-nav button:last-child,
.era-next-nav a:last-child {
text-align: right;
}
.era-next-nav span {
color: var(--barzine-yellow);
font-size: 11px;
font-weight: 950;
}
.era-next-nav strong {
font-size: clamp(18px, 2vw, 26px);
line-height: 1.2;
}
.artist-card {
background: var(--barzine-white);
color: var(--ink);
align-content: start;
display: grid;
gap: 12px;
padding: 18px;
}
.artist-card__top {
align-items: start;
display: grid;
gap: 12px;
grid-template-columns: 38px minmax(0, 1fr);
}
.artist-card__top span {
color: var(--red);
font-weight: 950;
}
.artist-card__top a {
color: var(--ink);
text-decoration: none;
}
.artist-card__top a::after {
color: var(--barzine-pink);
content: " →";
font-family: var(--font-display-en);
font-size: 0.88em;
}
.artist-card__top a:hover,
.artist-card__top a:focus-visible {
color: var(--red);
}
.heads-pick {
background: var(--barzine-white);
color: var(--ink);
display: grid;
gap: 4px;
padding: 12px;
text-decoration: none;
}
.heads-pick--link:hover,
.heads-pick--link:focus-visible {
background: var(--barzine-white);
}
.history-card p {
color: var(--barzine-line);
}
.artist-table-wrap {
background: transparent;
overflow: visible;
}
.artist-index-grid {
display: grid;
gap: 18px;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 22px;
}
.artist-index-card {
background: var(--barzine-white);
display: grid;
gap: 12px;
min-width: 0;
padding: 12px;
}
.artist-index-card.active {
outline: 2px solid var(--red);
outline-offset: -2px;
}
.artist-index-card__link {
background: transparent;
border: 0;
color: inherit;
cursor: pointer;
display: grid;
gap: 10px;
padding: 0;
text-align: left;
width: 100%;
}
.artist-index-card__image {
aspect-ratio: 4 / 5;
background: var(--ink);
display: block;
overflow: hidden;
position: relative;
}
.artist-index-card__image img,
.artist-detail__image img {
filter: grayscale(0.12) contrast(1.03);
height: 100%;
object-fit: cover;
width: 100%;
}
.artist-index-card__image em {
background: var(--barzine-black);
bottom: 8px;
color: var(--white);
font-size: 11px;
font-style: normal;
font-weight: 950;
left: 8px;
padding: 5px 7px;
position: absolute;
}
.artist-index-card__body {
display: grid;
gap: 6px;
}
.artist-index-card__body small {
color: var(--red);
font-size: 11px;
font-weight: 950;
}
.artist-index-card__body strong {
font-size: clamp(24px, 2.6vw, 38px);
line-height: 1.05;
}
.artist-index-card__body span {
color: var(--ink-soft);
display: -webkit-box;
font-size: 13px;
line-height: 1.55;
min-height: 3.1em;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.artist-index-card__tracks {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.artist-index-card__tracks a {
background: var(--barzine-white);
color: var(--ink);
font-size: 11px;
font-weight: 900;
padding: 6px 8px;
}
.artist-index-card__tracks span {
background: var(--barzine-white);
color: var(--ink);
display: inline-flex;
font-size: 11px;
font-weight: 900;
padding: 6px 8px;
}
.artist-quality-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.artist-quality-row span {
background: var(--barzine-white);
color: var(--ink);
font-size: 10px;
font-weight: 950;
padding: 5px 7px;
}
.artist-quality-row span:first-child {
background: var(--ink);
color: var(--white);
}
.artist-detail {
background: var(--ink);
color: var(--white);
display: grid;
gap: clamp(18px, 3vw, 34px);
grid-template-columns: minmax(340px, 0.85fr) minmax(0, 1fr);
margin-top: 18px;
padding: clamp(18px, 3vw, 34px);
}
.artist-detail__image {
aspect-ratio: 4 / 5;
background: var(--barzine-black);
overflow: hidden;
}
.artist-detail__main {
display: grid;
gap: 16px;
}
.artist-detail h3 {
color: var(--white);
font-size: clamp(38px, 7vw, 84px);
line-height: 0.95;
}
.artist-detail__lead {
color: var(--barzine-white);
font-size: clamp(17px, 2vw, 22px);
line-height: 1.65;
}
.artist-detail h4 {
color: var(--barzine-yellow);
}
.artist-detail .artist-track-list a,
.artist-detail .artist-track-list span,
.artist-detail .artist-social-links a {
background: var(--barzine-white);
color: var(--ink);
}
.artist-page-hero {
background: var(--black);
color: var(--white);
display: grid;
grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr);
min-height: calc(100vh - 82px);
}
.artist-page-hero__image {
background: var(--barzine-black);
min-height: 520px;
}
.artist-page-hero__image img {
filter: grayscale(0.08) contrast(1.05);
}
.artist-page-hero__copy {
align-content: center;
display: grid;
gap: 22px;
padding: clamp(28px, 5vw, 72px);
}
.artist-page-hero__copy h1 {
font-size: clamp(48px, 8vw, 118px);
line-height: 0.92;
}
.artist-page-hero__copy p {
color: var(--barzine-white);
font-size: clamp(17px, 2vw, 24px);
max-width: 760px;
}
.artist-page-hero .dictionary-entry__meta span {
color: var(--ink);
font-weight: 950;
}
.artist-page-body {
background: var(--paper);
}
.artist-page-grid {
display: grid;
gap: 16px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.artist-page-panel {
background: var(--barzine-white);
display: grid;
gap: 14px;
grid-auto-rows: max-content;
align-content: start;
padding: clamp(20px, 3vw, 34px);
}
.artist-page-panel > .section-kicker {
min-height: 14px;
}
.artist-page-panel > h2 {
align-self: start;
margin: 0;
min-height: clamp(54px, 7vw, 92px);
}
.artist-page-panel > p:not(.section-kicker) {
margin-top: 0;
}
.artist-page-panel--wide {
grid-column: 1 / -1;
}
.artist-page-panel--share {
background: var(--barzine-black);
color: var(--barzine-white);
}
.artist-page-panel ol {
margin: 0;
padding-left: 1.2em;
}
.artist-member-list span {
align-items: flex-start;
background: var(--barzine-black);
color: var(--white);
flex-direction: column;
gap: 3px;
}
.artist-member-list small {
color: var(--barzine-yellow);
font-size: 10px;
font-weight: 950;
line-height: 1.2;
}
.artist-track-list--thumbs {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.artist-track-card,
.artist-track-list--thumbs .artist-track-card,
.artist-track-list--cards .artist-track-card,
.song-link-list .artist-track-card {
background: var(--barzine-black);
color: var(--white);
display: grid;
gap: 0;
overflow: hidden;
padding: 0;
}
.artist-track-list .artist-track-card__thumb,
.song-link-list .artist-track-card__thumb,
.artist-track-card__thumb {
aspect-ratio: 16 / 10;
background: var(--barzine-black);
color: inherit;
display: block;
overflow: hidden;
padding: 0;
position: relative;
text-decoration: none;
}
a.artist-track-card__thumb {
cursor: pointer;
}
a.artist-track-card__thumb::after {
background: var(--barzine-pink);
color: var(--barzine-white);
content: "見る→";
font-family: var(--font-display-en);
font-size: 11px;
font-weight: 950;
left: 10px;
line-height: 1;
padding: 8px 9px;
position: absolute;
top: 10px;
z-index: 2;
}
a.artist-track-card__thumb:focus-visible {
outline: 3px solid var(--barzine-pink);
outline-offset: -3px;
}
.artist-track-card__thumb img {
height: 100%;
object-fit: cover;
transition: filter 180ms ease, transform 180ms ease;
width: 100%;
}
a.artist-track-card__thumb:hover img,
a.artist-track-card__thumb:focus-visible img {
filter: contrast(1.12);
transform: scale(1.035);
}
.artist-track-card__youtube-placeholder {
align-items: center;
background:
linear-gradient(135deg, var(--barzine-pink), transparent 38%),
linear-gradient(315deg, var(--barzine-yellow), transparent 42%),
var(--barzine-black);
display: flex;
height: 100%;
justify-content: center;
width: 100%;
}
.artist-track-card__youtube-placeholder span {
background: var(--red);
clip-path: polygon(30% 20%, 30% 80%, 82% 50%);
display: block;
height: 42px;
width: 54px;
}
.artist-track-card__thumb em {
background: var(--red);
bottom: 10px;
color: var(--white);
font-size: 10px;
font-style: normal;
font-weight: 950;
left: 10px;
padding: 6px 8px;
position: absolute;
}
.artist-track-card__copy {
display: grid;
gap: 6px;
padding: 14px;
}
.artist-track-list .artist-track-card__copy,
.song-link-list .artist-track-card__copy {
background: transparent;
color: inherit;
display: grid;
padding: 14px;
}
.artist-track-card__copy strong {
font-size: clamp(18px, 2vw, 26px);
line-height: 1.12;
}
.artist-track-card__copy small {
color: var(--barzine-white);
font-size: 12px;
line-height: 1.5;
}
.artist-track-card--compact .artist-track-card__copy strong {
font-size: 16px;
}
.track-platform-links {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 6px;
padding-top: 4px;
}
.artist-track-list .track-platform-links,
.song-link-list .track-platform-links {
background: transparent;
color: inherit;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
padding: 4px 0 0;
}
.artist-track-list .track-platform-links a,
.song-link-list .track-platform-links a,
.track-platform-links a,
.track-platform-links span {
align-items: center;
background: var(--barzine-white);
color: var(--ink);
display: inline-flex;
font-size: 10px;
font-weight: 950;
justify-content: center;
line-height: 1;
min-height: 48px;
padding: 0 14px;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
}
.track-platform-links--pending span {
background: var(--barzine-black);
color: var(--barzine-white);
}
.artist-track-list .track-platform-links a.track-platform-link--youtube,
.song-link-list .track-platform-links a.track-platform-link--youtube {
background: var(--barzine-pink);
color: var(--white);
}
.artist-track-list .track-platform-links a.track-platform-link--apple,
.song-link-list .track-platform-links a.track-platform-link--apple {
background: var(--barzine-yellow);
color: var(--black);
}
.artist-track-list .track-platform-links a.track-platform-link--spotify,
.song-link-list .track-platform-links a.track-platform-link--spotify {
background: var(--barzine-green);
color: var(--white);
}
.artist-track-card--youtube .artist-track-card__thumb em,
.artist-track-list a.artist-track-card--youtube small {
color: var(--barzine-yellow);
}
.artist-track-card--youtube-search .artist-track-card__thumb em {
background: var(--barzine-yellow);
color: var(--black);
}
.artist-track-card--apple .artist-track-card__thumb em,
.artist-track-list a.artist-track-card--apple small {
color: var(--barzine-pink);
}
.artist-track-card--spotify .artist-track-card__thumb em,
.artist-track-list a.artist-track-card--spotify small {
color: var(--barzine-green);
}
.artist-discography-panel {
display: grid;
gap: 18px;
}
.artist-discography-sections {
display: grid;
gap: 22px;
}
.artist-discography-section {
display: grid;
gap: 12px;
}
.artist-discography-section h3 {
color: var(--barzine-pink);
font-size: 14px;
margin: 0;
text-transform: uppercase;
}
.artist-discography-grid {
display: grid;
gap: 12px;
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.artist-discography-card {
background: var(--barzine-black);
color: var(--barzine-white);
display: grid;
min-width: 0;
text-decoration: none;
}
.artist-discography-card:hover img,
.artist-discography-card:focus-visible img {
filter: contrast(1.12);
transform: scale(1.035);
}
.artist-discography-card__media {
aspect-ratio: 1;
background: var(--barzine-black);
display: block;
overflow: hidden;
}
.artist-discography-card__media img {
height: 100%;
object-fit: cover;
transition: filter 180ms ease, transform 180ms ease;
width: 100%;
}
.artist-discography-card__copy {
display: grid;
gap: 6px;
padding: 10px;
}
.artist-discography-card__copy strong {
font-size: 13px;
line-height: 1.25;
}
.artist-discography-card__copy small,
.artist-discography-card__copy em {
font-size: 10px;
font-style: normal;
font-weight: 950;
line-height: 1;
text-transform: uppercase;
}
.artist-discography-card__copy small {
color: var(--barzine-line);
}
.artist-discography-card__copy em {
background: var(--barzine-yellow);
color: var(--barzine-black);
justify-self: start;
padding: 6px 8px;
}
.artist-episode-list {
display: grid;
gap: 12px;
list-style: none;
margin: 0;
padding: 0;
}
.artist-episode-list li {
border-top: 1px solid var(--barzine-line);
display: grid;
gap: 6px;
padding-top: 12px;
}
.artist-episode-list p {
margin: 0;
}
.artist-episode-list a {
color: var(--red);
font-size: 12px;
font-weight: 950;
text-transform: uppercase;
}
.artist-visual-grid,
.artist-source-list {
display: grid;
gap: 10px;
}
.artist-visual-card {
background: var(--barzine-black);
border: 0;
color: var(--white);
cursor: pointer;
display: grid;
gap: 8px;
overflow: hidden;
padding: 0;
text-align: left;
}
.artist-visual-card img {
aspect-ratio: 16 / 9;
object-fit: cover;
}
.artist-visual-card span,
.artist-source-list small {
color: var(--barzine-yellow);
font-size: 11px;
font-weight: 950;
}
.artist-visual-card span,
.artist-visual-card strong {
padding-left: 12px;
padding-right: 12px;
}
.artist-visual-card strong {
padding-bottom: 14px;
}
.artist-source-list a {
background: var(--barzine-black);
color: var(--white);
display: grid;
gap: 4px;
min-height: 54px;
padding: 13px 14px;
}
.artist-news-list {
display: grid;
gap: 10px;
}
.artist-news-list a {
background: var(--barzine-black);
color: var(--white);
display: grid;
gap: 6px;
padding: 14px;
}
.artist-news-list span {
color: var(--barzine-yellow);
font-size: 11px;
font-weight: 950;
text-transform: uppercase;
}
.artist-news-list strong {
font-size: clamp(18px, 2vw, 25px);
line-height: 1.15;
}
.artist-news-list small {
color: var(--barzine-white);
font-size: 13px;
line-height: 1.55;
}
.artist-related-list {
display: grid;
gap: 8px;
}
.artist-related-list a {
background: var(--barzine-white);
color: var(--ink);
display: grid;
gap: 2px;
min-height: 46px;
padding: 10px 12px;
padding-right: 40px;
position: relative;
}
.artist-related-list a::after {
color: var(--barzine-pink);
content: "→";
font-family: var(--font-display-en);
font-size: 18px;
font-weight: 950;
line-height: 1;
position: absolute;
right: 12px;
top: 13px;
}
.artist-related-list a:hover,
.artist-related-list a:focus-visible {
background: var(--barzine-black);
color: var(--barzine-white);
}
.artist-related-list small {
color: var(--ink-soft);
font-size: 12px;
}
.artist-detail p,
.artist-detail .artist-note {
color: var(--barzine-white);
}
.artist-note {
font-size: 12px;
margin-top: 8px;
}
.prefecture-card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.prefecture-card {
display: grid;
gap: 14px;
padding: 20px;
}
.prefecture-card__top {
align-items: start;
display: flex;
justify-content: space-between;
}
.prefecture-card__top span,
.prefecture-card__top small {
color: var(--red);
font-size: 11px;
font-weight: 950;
}
.prefecture-artist-list {
display: grid;
gap: 8px;
}
.prefecture-artist-list a {
background: var(--barzine-white);
color: var(--ink);
display: grid;
gap: 3px;
padding: 12px;
}
.prefecture-artist-list span,
.prefecture-artist-list small {
color: var(--ink-soft);
font-size: 12px;
}
.artist-pick-block {
margin-top: clamp(34px, 5vw, 68px);
}
.artist-profile-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.artist-profile-card {
background: var(--artist-bg);
color: var(--artist-ink);
display: grid;
}
.artist-profile-card header {
background:
linear-gradient(135deg, color-mix(in srgb, var(--artist-accent) 28%, transparent), transparent 48%),
var(--artist-bg);
display: grid;
gap: 12px;
min-height: 260px;
padding: clamp(24px, 4vw, 42px);
}
.artist-profile-card header span {
color: var(--artist-accent);
font-size: 11px;
font-weight: 950;
}
.artist-profile-card header h3 {
font-size: clamp(34px, 5vw, 64px);
}
.artist-profile-card__body {
display: grid;
gap: 18px;
padding: clamp(22px, 3vw, 34px);
}
.artist-profile-card__body ol {
margin: 0;
padding-left: 1.2em;
}
.artist-table {
border-collapse: collapse;
min-width: 720px;
width: 100%;
}
.artist-table th,
.artist-table td {
padding: 16px 14px;
text-align: left;
vertical-align: top;
}
.artist-table th {
background: var(--barzine-white);
color: var(--barzine-line);
font-size: 12px;
}
.artist-table td {
font-size: 14px;
}
.artist-table tr + tr td {
box-shadow: inset 0 1px 0 var(--barzine-line);
}
.tag-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.tag {
background: var(--barzine-white);
color: var(--barzine-line);
display: inline-flex;
font-size: 11px;
font-weight: 850;
padding: 5px 8px;
}
.status-badge {
background: var(--barzine-white);
color: var(--red);
white-space: nowrap;
}
.chill-section {
background: var(--green-soft);
color: var(--barzine-green);
}
.notice-box,
.cta-card {
background: var(--barzine-white);
display: grid;
gap: 10px;
padding: 20px;
}
.legal-note,
.guide-card {
display: grid;
gap: 14px;
padding: 20px;
}
.legal-note strong {
color: var(--green);
font-size: 22px;
}
.legal-note span {
color: var(--ink-soft);
font-size: 12px;
font-weight: 900;
}
.cannabis-check-grid,
.cannabis-angle-grid,
.mini-dictionary__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cannabis-check-grid article,
.cannabis-angle-grid article,
.mini-dictionary__grid article {
display: grid;
gap: 10px;
padding: 18px;
}
.mini-dictionary__grid a {
display: inline-flex;
min-height: 32px;
}
.cannabis-history,
.guide-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cannabis-era {
background: var(--barzine-white);
display: grid;
gap: 12px;
padding: 20px;
}
.cannabis-era > span {
color: var(--green);
font-size: 11px;
font-weight: 950;
}
.guide-card section {
border-top: 1px solid var(--barzine-white);
padding-top: 12px;
}
.social-plan {
grid-column: 1 / -1;
margin-top: 28px;
}
.social-plan-grid article {
display: grid;
gap: 10px;
padding: 18px;
}
.social-plan-grid article > span {
color: var(--red);
font-size: 11px;
font-weight: 950;
}
.status,
.section-note {
color: var(--muted);
font-size: 13px;
font-weight: 800;
}
.notice-box strong {
color: var(--green);
}
.policy-page {
display: grid;
gap: 18px;
}
.policy-card {
background: var(--barzine-white);
color: var(--ink);
display: grid;
gap: 12px;
padding: clamp(22px, 4vw, 42px);
}
.policy-card h2 {
font-size: clamp(24px, 3vw, 38px);
line-height: 1.1;
}
.policy-card p {
color: var(--ink-soft);
font-size: 16px;
line-height: 1.8;
max-width: 760px;
}
.page-beta-note {
background: var(--barzine-yellow);
color: var(--barzine-black);
font-size: 14px;
font-weight: 900;
line-height: 1.6;
margin: 0;
padding: 12px clamp(18px, 4vw, 54px);
text-align: center;
}
.footer-policy-links {
display: flex;
flex-wrap: wrap;
gap: 10px 16px;
}
.footer-policy-links a {
color: inherit;
font-size: 13px;
font-weight: 900;
text-decoration: none;
}
.footer-policy-links a:hover,
.footer-policy-links a:focus-visible {
text-decoration: underline;
}
.cta-card span {
color: var(--green);
}
.about-hero {
align-items: end;
background: var(--black);
color: var(--white);
display: grid;
isolation: isolate;
min-height: clamp(390px, 58vh, 640px);
overflow: hidden;
padding: clamp(96px, 12vw, 148px) clamp(18px, 4vw, 42px) clamp(48px, 7vw, 86px);
position: relative;
}
.about-hero__mark {
inset: 0 -10vw auto auto;
max-width: 980px;
opacity: 0.1;
pointer-events: none;
position: absolute;
transform: translateY(-4%);
width: min(1080px, 112vw);
z-index: -1;
}
.about-hero__mark img {
filter: grayscale(1) contrast(1.12);
height: auto;
object-fit: contain;
object-position: right top;
width: 100%;
}
.about-hero__copy {
margin: 0 auto;
max-width: var(--content-max);
width: 100%;
}
.about-hero__copy h1 {
color: var(--white);
font-size: clamp(42px, 8vw, 92px);
line-height: 0.98;
max-width: 780px;
}
.about-hero__copy p:not(.section-kicker) {
color: var(--barzine-white);
font-size: clamp(17px, 2vw, 22px);
font-weight: 600;
line-height: 1.75;
margin-top: 18px;
max-width: 720px;
}
.about-section {
display: grid;
gap: clamp(34px, 5.5vw, 66px);
padding-bottom: clamp(64px, 9vw, 124px);
padding-top: clamp(54px, 8vw, 108px);
}
.about-statement {
color: var(--white);
margin-left: auto;
margin-right: auto;
}
.about-statement {
display: grid;
font-size: clamp(16px, 1.45vw, 18px);
font-weight: 400;
gap: clamp(16px, 2.2vw, 24px);
line-height: 1.96;
max-width: 760px;
}
.about-statement p {
color: var(--barzine-white);
font-weight: 400;
line-height: inherit;
}
.about-statement h2 {
color: var(--white);
font-size: clamp(27px, 3.2vw, 44px);
font-weight: 760;
line-height: 1.16;
margin-bottom: 2px;
max-width: 760px;
}
.about-statement--wide {
max-width: 980px;
}
.about-statement--wide > p {
max-width: 760px;
}
.about-lead {
color: var(--white) !important;
font-size: clamp(19px, 2.1vw, 25px);
font-weight: 650;
line-height: 1.72;
max-width: 760px;
}
.about-statement--split {
align-items: start;
gap: clamp(28px, 5vw, 60px);
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 1040px;
}
.about-statement--split > div {
display: grid;
gap: clamp(16px, 2vw, 22px);
min-width: 0;
}
.site-footer {
align-items: center;
background: var(--black);
color: var(--barzine-white);
display: flex;
gap: 20px;
justify-content: space-between;
padding: 32px clamp(16px, 4vw, 42px);
}
.site-footer nav {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0.65rem 1rem;
}
.site-footer nav a {
white-space: nowrap;
}
.site-footer p {
color: var(--muted);
font-size: 13px;
margin-top: 4px;
}
.site-footer a {
color: var(--white);
font-weight: 850;
}
.sr-only {
clip: rect(0 0 0 0);
border: 0;
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
@media (max-width: 1100px) {
.hero-shell,
.home-hero,
.home-lead,
.scene-layout,
.scene-feature,
.deep-cuts-grid,
.deep-cut-card--feature,
.deep-cut-hero,
.deep-cut-body,
.news-layout,
.daily-brief__panel,
.split-section,
.chill-section,
.dictionary-layout,
.artist-layout,
.battle-layout {
grid-template-columns: 1fr;
}
.hero-rail {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.home-rail {
min-height: 0;
}
.home-rail__list {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.home-news-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.youtube-update-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.daily-brief__local ul {
grid-template-columns: 1fr;
}
.section-media.compact {
max-height: 360px;
}
.artist-index-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.term-detail {
order: 3;
position: static;
}
.term-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
order: 4;
}
.term-learning-routes {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 840px) {
.site-header {
grid-template-columns: minmax(0, 1fr) 42px;
height: 72px;
}
.logo-plate {
height: 38px;
width: 168px;
}
.brand-logo {
height: 100%;
width: 100%;
}
.main-nav {
display: none;
}
.icon-button {
grid-column: 2;
display: inline-flex;
}
.mobile-nav {
top: 72px;
}
.hero-shell {
min-height: auto;
padding: 16px;
}
.home-hero {
padding: 14px;
}
.home-manifest {
padding: 30px 14px;
}
.home-manifest h1,
.home-manifest h2 {
font-size: 30px;
}
.home-manifest p:not(.section-kicker) {
font-size: 15px;
}
.home-lead {
min-height: 0;
}
.home-lead__media {
min-height: 52vh;
}
/* JSのプレースホルダー→実データ差し替え時のCLS対策（実測317px→508px） */
.home-lead__body {
min-height: 520px;
padding: 22px;
}
.home-lead__body h1,
.home-lead__body h2 {
font-size: 31px;
}
.home-rail__list {
grid-template-columns: 1fr;
}
.home-rail__list a {
min-height: 96px;
}
.home-news-grid,
.youtube-update-grid,
.audience-grid,
.home-daily-grid,
.submit-grid,
.scene-feature {
grid-template-columns: 1fr;
}
.top-news-card {
grid-template-columns: 126px minmax(0, 1fr);
grid-template-rows: auto;
min-height: 150px;
}
.top-news-card__body {
padding: 14px;
}
.top-news-card strong {
font-size: 16px;
}
.top-news-card em {
display: none;
}
.news-article {
grid-template-columns: 1fr;
}
.news-article__media {
min-height: 260px;
}
.news-article__body {
padding: 28px;
}
.audience-card,
.submit-card {
min-height: 0;
}
.scene-feature {
min-height: 0;
}
.scene-feature__media {
min-height: 48vh;
}
.hero-card {
grid-template-columns: 1fr;
min-height: 0;
}
.hero-image {
min-height: 260px;
}
.hero-copy {
padding: 24px;
}
h1 {
font-size: 32px;
}
h2 {
font-size: 26px;
}
.lesson-card {
padding: 22px;
}
.lesson-card h3 {
font-size: 30px;
}
.lesson-card p {
font-size: 16px;
line-height: 1.72;
}
.hero-rail,
.card-grid,
.history-grid,
.history-static-summary,
.history-jp-hiphop-layout,
.history-jp-hiphop-links,
.term-grid,
.page-link-grid,
.dictionary-deep-grid,
.history-detail-grid,
.deep-cuts-grid,
.deep-cut-card--feature,
.deep-cut-hero,
.deep-cut-body,
.history-research-grid,
.cannabis-check-grid,
.cannabis-angle-grid,
.mini-dictionary__grid,
.archive-visual-band,
.cannabis-visual-band,
.era-feature__grid,
.artist-guide-grid,
.prefecture-card-grid,
.artist-index-grid,
.artist-profile-grid,
.intake-layout,
.intake-channel-grid,
.guide-grid,
.social-plan-grid,
.cannabis-history {
grid-template-columns: 1fr;
}
.artist-detail {
grid-template-columns: 1fr;
}
.quality-panel {
position: static;
}
.deep-cut-sidebar {
position: static;
}
.artist-page-hero {
grid-template-columns: 1fr;
min-height: 0;
}
.artist-page-hero__image {
min-height: 56vh;
}
.artist-page-hero__copy {
padding: 24px 18px 32px;
}
.artist-page-grid {
grid-template-columns: 1fr;
}
.event-controls,
.battle-controls,
.era-next-nav {
grid-template-columns: 1fr;
}
.battle-panel--events {
display: none;
}
.battle-metrics,
.battle-summary-grid {
grid-template-columns: 1fr 1fr;
}
.battle-info-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.battle-event-media {
grid-template-columns: minmax(0, 1fr) minmax(96px, 0.42fr);
}
.era-next-nav button:last-child,
.era-next-nav a:last-child {
text-align: left;
}
.artist-track-list--thumbs {
grid-template-columns: 1fr;
}
.event-source-grid {
grid-template-columns: 1fr;
}
.term-learning-routes {
display: flex;
margin-inline: 0;
max-width: 100%;
overflow-x: auto;
padding: 0 0 8px;
scroll-snap-type: x proximity;
}
.term-learning-routes button,
.term-learning-routes a {
flex: 0 0 min(72vw, 240px);
scroll-snap-align: start;
}
.image-modal__sheet {
bottom: 0;
left: 0;
max-height: 90vh;
max-width: none;
top: auto;
transform: none;
}
.image-modal__sheet img {
max-height: 62vh;
}
.archive-panel--wide {
grid-column: auto;
}
.history-detail-panel__head,
.history-research-head,
.artist-guide-panel__head,
.prefecture-radar__head {
align-items: stretch;
flex-direction: column;
}
.section-head {
align-items: stretch;
flex-direction: column;
}
.event-card {
align-items: start;
grid-template-columns: 72px minmax(0, 1fr);
}
.content-card {
grid-template-columns: 128px minmax(0, 1fr);
grid-template-rows: auto;
min-height: 150px;
}
.card-media {
min-height: 100%;
}
.content-card-body {
gap: 8px;
padding: 14px;
}
.content-card .card-badge {
font-size: 10px;
min-height: 24px;
padding: 6px 8px;
}
.content-card h3 {
font-size: 17px;
line-height: 1.25;
min-height: 0;
-webkit-line-clamp: 3;
}
.detail-button {
min-height: 36px;
padding: 8px 10px;
}
.summary-sheet {
bottom: 0;
grid-template-columns: 1fr;
left: 0;
max-height: 88vh;
max-width: none;
top: auto;
transform: none;
}
.summary-sheet__media {
max-height: 34vh;
min-height: 220px;
}
.summary-sheet__body {
max-height: 54vh;
padding: 22px;
}
.summary-sheet__close {
right: 10px;
top: 10px;
}
.about-hero {
min-height: 420px;
padding-top: 108px;
}
.about-hero__mark {
opacity: 0.065;
transform: translate(18%, -2%);
width: 118vw;
}
.about-statement--split {
grid-template-columns: 1fr;
}
.event-card .text-button {
grid-column: 1 / -1;
width: 100%;
}
.form-grid {
grid-template-columns: 1fr;
}
.site-footer {
align-items: flex-start;
flex-direction: column;
}
}
@media (max-width: 480px) {
.logo-plate {
height: 34px;
width: 150px;
}
.home-lead__media {
min-height: 42vh;
}
.home-lead__body p {
font-size: 14px;
}
.top-news-card {
grid-template-columns: 108px minmax(0, 1fr);
}
.battle-event-media,
.battle-info-grid,
.battle-summary-grid {
grid-template-columns: 1fr;
}
.track-platform-links,
.artist-track-list .track-platform-links,
.song-link-list .track-platform-links {
flex-wrap: wrap;
}
.scene-feature__media {
min-height: 40vh;
}
.hero-copy {
padding: 22px;
}
h1 {
font-size: 29px;
}
.about-hero {
min-height: 360px;
padding-bottom: 42px;
padding-top: 92px;
}
.about-hero__copy h1 {
font-size: 40px;
}
.about-section {
gap: 42px;
}
.rail-card {
min-height: 136px;
}
.content-card {
grid-template-columns: 112px minmax(0, 1fr);
}
.section-band {
padding-left: 14px;
padding-right: 14px;
}
.battle-metrics,
.battle-summary-grid {
grid-template-columns: 1fr;
}
}
/* BARZINE launch polish: keep the palette to the six brand colors only. */
.site-header {
background: var(--barzine-black);
box-shadow: none;
gap: 12px;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto;
height: auto;
padding-bottom: 14px;
padding-top: 16px;
}
.brand {
grid-column: 1;
grid-row: 1;
justify-self: center;
}
.main-nav {
display: flex;
grid-column: 1;
grid-row: 2;
justify-self: center;
margin-left: 0;
}
.icon-button {
background: var(--barzine-black);
border: 1px solid var(--barzine-line);
border-radius: 0;
display: none;
grid-column: 1;
justify-self: start;
}
.icon-button span {
background: var(--barzine-white);
}
.section-band,
.home-manifest,
.home-hero,
.home-section,
.page-shell,
.artist-index-page,
.news-page,
.events-page,
.history-page,
.dictionary-page,
.lessons-page,
.battle-page {
padding-left: var(--page-gutter);
padding-right: var(--page-gutter);
}
.home-manifest,
.home-hero,
.section-inner,
.news-layout,
.artist-table-wrap,
.events-layout,
.history-shell,
.dictionary-shell,
.lesson-list,
.battle-shell {
margin-left: auto;
margin-right: auto;
max-width: var(--content-max);
}
.adsbygoogle,
.barzine-ad-slot,
[data-ad-slot] {
min-height: 250px;
}
.home-hero__body > p,
.home-hero p,
.home-manifest p {
max-width: 760px;
}
.page-beta-note {
max-width: none;
text-align: center;
}
.history-era-main,
.history-era-main--single {
display: grid;
gap: 18px;
grid-template-columns: 1fr;
}
.history-listen-inline {
border-bottom: 0;
display: grid;
gap: 18px;
grid-template-columns: minmax(160px, 0.25fr) minmax(0, 1fr);
padding-bottom: 28px;
}
.history-listen-inline h4 {
align-self: start;
color: var(--barzine-black);
font-family: var(--font-ui);
font-size: 18px;
line-height: 1.2;
margin: 0;
}
.history-listen-inline p {
color: var(--barzine-black);
font-size: clamp(18px, 2vw, 24px);
font-weight: 700;
line-height: 1.75;
}
.history-listen-lead {
color: var(--barzine-black);
font-size: clamp(18px, 2vw, 24px);
font-weight: 700;
line-height: 1.75;
max-width: 980px;
}
.history-listen-inline .check-list {
grid-column: 2;
}
.archive-detail {
border-bottom: 0;
}
.archive-detail > h4 {
color: var(--barzine-pink);
font-family: var(--font-ui);
font-size: 16px;
font-weight: 800;
letter-spacing: 0;
}
.history-detail-grid h5,
.deep-note h5,
.history-research-card h5 {
color: var(--barzine-green);
font-family: var(--font-ui);
font-size: 15px;
font-weight: 800;
letter-spacing: 0;
}
.history-stack .archive-detail p,
.history-stack .archive-detail li,
.history-stack .history-detail-panel p,
.history-stack .history-detail-panel li,
.history-stack .artist-guide-panel p,
.history-stack .artist-guide-panel li,
.timeline__row p {
font-weight: 650;
}
.history-stack .history-search-seeds em,
.history-stack .history-search-seeds a {
color: var(--barzine-black);
}
.history-stack .tag-cloud a,
.history-stack .tag-cloud span {
background: var(--barzine-black);
border: 0;
color: var(--barzine-white);
}
.history-stack .tag-cloud a::after {
color: var(--barzine-yellow);
}
.history-stack .tag-cloud a:hover,
.history-stack .tag-cloud a:focus-visible {
background: var(--barzine-pink);
color: var(--barzine-white);
}
.history-stack .tag-cloud a:hover::after,
.history-stack .tag-cloud a:focus-visible::after {
color: var(--barzine-yellow);
}
.history-stack a[data-term-summary] {
position: relative;
text-decoration: underline;
text-decoration-color: var(--barzine-pink);
text-decoration-thickness: 2px;
text-underline-offset: 0.15em;
}
@media (hover: hover) and (pointer: fine) {
.history-stack a[data-term-summary]::after {
background: var(--barzine-black);
color: var(--barzine-white);
content: attr(data-term-summary);
font-size: 12px;
font-weight: 850;
left: auto;
line-height: 1.55;
min-width: 220px;
opacity: 0;
padding: 12px;
pointer-events: none;
position: absolute;
right: 0;
top: calc(100% + 10px);
transform: translateY(-4px);
transition: opacity 0.16s ease, transform 0.16s ease;
width: min(320px, 70vw);
z-index: 12;
}
.history-stack a[data-term-summary]:hover::after,
.history-stack a[data-term-summary]:focus-visible::after {
opacity: 1;
transform: translateY(0);
}
}
.track-platform-links,
.artist-track-list .track-platform-links,
.song-link-list .track-platform-links {
align-items: center;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
}
.artist-track-list .track-platform-links a,
.song-link-list .track-platform-links a,
.track-platform-links a {
align-items: center;
border: 0;
border-radius: 0;
color: var(--barzine-black);
display: inline-flex;
font-family: var(--font-ui);
font-weight: 900;
justify-content: center;
line-height: 1;
min-height: 44px;
padding: 0 16px;
text-align: center;
}
a.artist-track-card__thumb {
display: block;
pointer-events: auto;
z-index: 1;
}
a.artist-track-card__thumb img {
display: block;
}
.artist-track-list .track-platform-links a.track-platform-link--youtube,
.song-link-list .track-platform-links a.track-platform-link--youtube,
.track-platform-links a.track-platform-link--youtube {
background: var(--barzine-pink);
color: var(--barzine-white);
order: 1;
}
.artist-track-list .track-platform-links a.track-platform-link--apple,
.song-link-list .track-platform-links a.track-platform-link--apple,
.track-platform-links a.track-platform-link--apple {
background: var(--barzine-yellow);
color: var(--barzine-black);
order: 2;
}
.artist-track-list .track-platform-links a.track-platform-link--spotify,
.song-link-list .track-platform-links a.track-platform-link--spotify,
.track-platform-links a.track-platform-link--spotify {
background: var(--barzine-green);
color: var(--barzine-white);
order: 3;
}
.badge,
.card-badge,
.status-badge,
.disclosure-badge,
.dictionary-entry__meta span,
.metric-row span,
.tag-cloud span,
.tag-cloud button,
.tag-cloud a,
.prefecture-card__cities span,
.prefecture-dig-list span,
.artist-angle-row span,
.lesson-card__meta span,
.lesson-card__meta a,
.lesson-card__meta b,
.lesson-route a,
.lesson-route span,
.deep-cut-tags span,
.barzine-share-actions a,
.barzine-share-actions button,
.artist-track-list .track-platform-links a,
.song-link-list .track-platform-links a,
.track-platform-links a,
.track-platform-links span {
box-sizing: border-box;
padding-block: 2px 0;
}
.status-action {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.status-action a,
.dictionary-share-button {
background: var(--barzine-pink);
color: var(--barzine-white);
}
.barzine-share-actions {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.barzine-share-actions a,
.barzine-share-actions button {
align-items: center;
appearance: none;
background: var(--barzine-pink);
border: 0;
color: var(--barzine-white);
cursor: pointer;
display: inline-flex;
font-family: inherit;
font-size: 13px;
font-weight: 950;
justify-content: center;
line-height: 1;
min-height: 44px;
padding: 0 16px;
text-transform: uppercase;
}
.barzine-share-actions a:nth-child(2),
.barzine-share-actions button:nth-child(3) {
background: var(--barzine-black);
color: var(--barzine-white);
}
.artist-page-panel--share .barzine-share-actions a:nth-child(2),
.artist-page-panel--share .barzine-share-actions button:nth-child(3) {
background: var(--barzine-green);
}
.barzine-share-actions a:hover,
.barzine-share-actions a:focus-visible,
.barzine-share-actions button:hover,
.barzine-share-actions button:focus-visible {
outline: 3px solid var(--barzine-yellow);
outline-offset: -3px;
}
.lesson-card a,
.history-card,
.history-context-links a,
.history-page-links a {
position: relative;
}
.lesson-card a::after,
.history-card::after,
.history-context-links a::after,
.history-page-links a::after {
color: var(--barzine-pink);
content: " →";
font-family: var(--font-display-en);
font-weight: 950;
}
.lesson-card a:hover,
.lesson-card a:focus-visible,
.history-context-links a:hover,
.history-context-links a:focus-visible,
.history-page-links a:hover,
.history-page-links a:focus-visible {
outline: 3px solid var(--barzine-pink);
outline-offset: -3px;
}
.history-recommend-track-list,
.artist-guide-grid,
.history-detail-grid,
.history-era-main .archive-panel--wide {
align-items: start;
}
.history-listen-lead,
.history-stack .archive-detail p,
.history-stack .archive-detail li,
.history-stack .history-detail-panel p,
.history-stack .history-detail-panel li,
.history-stack .artist-guide-panel p,
.history-stack .artist-guide-panel li {
line-break: strict;
overflow-wrap: normal;
text-wrap: pretty;
word-break: normal;
}
/* Typography rule: headlines hit hard, body copy stays regular. */
body {
font-weight: 400;
}
h1,
h2,
h3,
h4,
h5,
h6,
.page-hero h1,
.page-hero h2,
.home-manifest h1,
.home-manifest h2,
.home-lead__body h1,
.home-lead__body h2,
.deep-cut-card strong,
.deep-cut-prose h2,
.rail-card strong,
.audience-card strong,
.submit-card strong,
.scene-feature strong,
.scene-mini strong,
.page-link-card strong,
.lesson-card strong,
.history-card strong,
.dictionary-entry__term,
.term-button strong,
.artist-page-hero__copy h1,
.artist-page-panel h2,
.about-hero__copy h1,
.about-statement h2 {
font-family: var(--font-display);
font-weight: 900;
}
.main-nav a,
.mobile-nav a,
.section-kicker,
.home-lead__eyebrow,
.home-lead__source,
.home-rail__head span,
.home-rail__head a,
.home-rail__list span,
.badge,
.card-badge,
.status-badge,
.disclosure-badge,
.meta,
.chip,
.text-button,
.tag-cloud span,
.tag-cloud button,
.tag-cloud a,
.deep-cut-card small,
.deep-cut-tags span,
.deep-cut-track-list span,
.deep-cut-speaker,
.deep-cut-persona-list strong,
.daily-brief__stats span,
.daily-brief__desk span,
.battle-summary-grid small,
.lesson-term-popover__meta,
.track-platform-links a {
font-family: var(--font-display-en);
font-weight: 900;
}
.page-hero p:not(.section-kicker),
.home-manifest p:not(.section-kicker),
.home-lead__body p,
.home-hero p,
.audience-card p,
.submit-card p,
.scene-feature p,
.scene-mini p,
.top-news-card em,
.deep-cut-note p,
.deep-cut-persona-list p,
.deep-cut-prose p,
.daily-brief__main p:not(.section-kicker),
.page-link-card p,
.lesson-card p,
.history-listen-lead,
.history-listen-inline p,
.history-stack .archive-detail p,
.history-stack .archive-detail li,
.history-stack .history-detail-panel p,
.history-stack .history-detail-panel li,
.history-stack .artist-guide-panel p,
.history-stack .artist-guide-panel li,
.timeline__row p,
.history-card p,
.artist-page-hero__copy p,
.artist-page-panel > p:not(.section-kicker),
.artist-episode-list p,
.artist-episode-list li,
.legal-note p,
.guide-card p,
.status,
.policy-card p,
.about-hero__copy p:not(.section-kicker),
.about-statement p,
.site-footer p {
font-weight: 400;
}
@media (min-width: 841px) {
.history-detail-grid,
.history-era-main .archive-panel--wide {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.artist-guide-grid,
.history-recommend-track-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 840px) {
.history-detail-grid,
.history-era-main .archive-panel--wide,
.artist-guide-grid,
.history-read-columns,
.history-essential-list,
.history-recommend-track-list {
grid-template-columns: 1fr;
}
.history-depth-toggle {
display: flex;
gap: 8px;
}
.history-stack[data-history-depth="simple"] .archive-detail:not(.history-simple-core),
.history-stack[data-history-depth="simple"] .history-detail-panel,
.history-stack[data-history-depth="simple"] .history-expanded-layer,
.history-stack[data-history-depth="simple"] .era-feature__footer,
.history-stack[data-history-depth="simple"] .artist-guide-panel,
.history-stack[data-history-depth="simple"] .history-research-panel {
display: none;
}
}
@media (max-width: 840px) {
.site-header {
grid-template-columns: 42px minmax(0, 1fr) 42px;
grid-template-rows: auto;
height: 72px;
padding-bottom: 0;
padding-top: 0;
}
.main-nav {
display: none;
}
.icon-button {
grid-column: 1;
display: inline-flex;
}
.brand {
grid-column: 2;
grid-row: 1;
}
.history-listen-inline {
grid-template-columns: 1fr;
}
.history-listen-inline .check-list {
grid-column: 1;
}
}
@media (min-width: 841px) {
.site-header {
align-content: center;
display: grid;
grid-template-areas:
"brand"
"nav";
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto;
justify-items: center;
row-gap: 12px;
}
.brand {
display: flex;
grid-area: brand;
grid-column: 1;
grid-row: 1;
justify-content: center;
justify-self: center;
width: 100%;
}
.main-nav {
display: flex;
flex-wrap: wrap;
grid-area: nav;
grid-column: 1;
grid-row: 2;
justify-content: center;
justify-self: center;
width: min(100%, var(--content-max));
}
.icon-button {
display: none;
}
}
/* 前庭障害等でOSの「視差効果を減らす」を有効にしている読者向け。
マイクロインタラクションは「速く感じる」ためのもので、必須情報ではない。 */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
html {
scroll-behavior: auto;
}
}
/* Reader paths: keep the media promise above editorial features. */
.home-intro {
background: var(--barzine-black);
color: var(--barzine-white);
margin: 0 auto;
max-width: var(--content-max);
padding: clamp(44px, 7vw, 92px) var(--page-gutter) clamp(30px, 5vw, 64px);
}
.home-intro h1 {
font-size: clamp(38px, 5.6vw, 76px);
line-height: 1.08;
max-width: 1120px;
}
.home-intro h1 span {
display: block;
}
.home-intro > p:last-child {
color: var(--barzine-line);
font-size: clamp(17px, 2vw, 24px);
line-height: 1.7;
margin-top: 18px;
}
.home-first-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.home-theme-grid {
display: grid;
gap: clamp(18px, 3vw, 36px);
grid-template-columns: minmax(240px, 0.42fr) minmax(0, 0.58fr);
}
.home-theme-copy {
display: grid;
}
.home-theme-copy a {
color: var(--barzine-white);
display: grid;
gap: 6px;
padding: 20px 0;
}
.home-theme-copy a + a {
border-top: 1px solid rgba(247, 247, 242, 0.18);
}
.home-theme-copy span,
.home-lab-feature small {
color: var(--barzine-pink);
font-family: var(--font-display-en);
font-size: 11px;
font-weight: 900;
}
.home-theme-copy strong {
font-size: clamp(22px, 2.5vw, 34px);
line-height: 1.2;
}
.home-lab-feature {
background: var(--barzine-white);
color: var(--ink);
display: grid;
grid-template-columns: minmax(0, 0.62fr) minmax(220px, 0.38fr);
min-height: 360px;
overflow: hidden;
}
.home-lab-feature__media {
background: #111;
min-height: 320px;
}
.home-lab-feature__media img {
height: 100%;
object-fit: cover;
width: 100%;
}
.home-lab-feature__body {
align-content: end;
display: grid;
gap: 10px;
padding: clamp(22px, 3vw, 36px);
}
.home-lab-feature__body strong {
font-size: clamp(26px, 3vw, 42px);
line-height: 1.05;
}
.home-lab-feature__body em {
color: var(--ink-soft);
font-style: normal;
}
.home-follow {
background: var(--barzine-white);
color: var(--ink);
display: grid;
gap: 18px;
justify-items: start;
margin: 0 auto;
max-width: var(--content-max);
padding: clamp(44px, 7vw, 88px) var(--page-gutter);
}
.home-follow h2 {
font-size: clamp(30px, 4vw, 52px);
}
.home-random-word {
background: var(--barzine-white);
color: var(--ink);
display: grid;
gap: clamp(28px, 5vw, 64px);
grid-template-columns: minmax(170px, 0.26fr) minmax(0, 0.74fr);
margin: 0 auto;
max-width: var(--content-max);
padding: clamp(42px, 7vw, 88px) var(--page-gutter);
}
.home-random-word__head {
align-content: space-between;
display: grid;
gap: 24px;
}
.home-random-word__head > div {
display: grid;
gap: 6px;
}
.home-random-word__head > div > span {
color: var(--ink-muted);
font-size: 13px;
font-weight: 800;
}
.home-random-word__head button {
align-items: center;
align-self: end;
background: var(--barzine-black);
border: 0;
border-radius: 0;
color: var(--barzine-white);
cursor: pointer;
display: inline-flex;
font: 700 24px/1 var(--font-ui);
height: 44px;
justify-content: center;
width: 44px;
}
.home-random-word__head button:hover,
.home-random-word__head button:focus-visible {
background: var(--barzine-pink);
}
#randomWordLink {
color: var(--ink);
display: grid;
gap: 12px;
min-width: 0;
}
#randomWordKana {
color: var(--barzine-red);
font-size: 13px;
font-weight: 900;
}
#randomWordTerm {
font-size: clamp(42px, 7vw, 92px);
line-height: 0.95;
overflow-wrap: anywhere;
}
#randomWordShort {
color: var(--ink-soft);
font-size: clamp(16px, 1.7vw, 21px);
font-weight: 750;
line-height: 1.75;
max-width: 760px;
}
#randomWordLink small {
color: var(--ink);
font-size: 12px;
font-weight: 900;
}
.main-nav a,
.mobile-nav a {
align-items: center;
display: inline-flex;
flex-direction: column;
gap: 2px;
}
.nav-hint {
color: var(--barzine-line);
font-family: var(--font-ui);
font-size: 10px;
font-weight: 700;
line-height: 1;
}
.deep-cut-term-link {
color: inherit;
text-decoration: underline;
text-decoration-color: var(--barzine-pink);
text-decoration-thickness: 2px;
text-underline-offset: 0.18em;
}
.deep-cut-onward {
border-top: 0;
display: grid;
gap: 24px;
margin-top: clamp(20px, 4vw, 44px);
padding-top: clamp(34px, 5vw, 62px);
}
.deep-cut-onward > h2 {
font-size: clamp(28px, 3.2vw, 44px);
}
.deep-cut-next-grid,
.deep-cut-onward-foot {
display: grid;
gap: 12px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.deep-cut-next-grid a,
.deep-cut-theme-guide,
.deep-cut-follow {
background: var(--barzine-black);
color: var(--barzine-white);
display: grid;
gap: 8px;
min-height: 150px;
padding: 18px;
}
.deep-cut-next-grid span,
.deep-cut-theme-guide span,
.deep-cut-follow span {
color: var(--barzine-pink);
font-family: var(--font-display-en);
font-size: 11px;
font-weight: 900;
}
.deep-cut-next-grid strong,
.deep-cut-theme-guide strong,
.deep-cut-follow strong {
font-size: 17px;
line-height: 1.45;
}
.deep-cut-onward-foot {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.deep-cut-theme-guide small,
.deep-cut-follow small {
color: var(--barzine-line);
font-size: 13px;
line-height: 1.65;
}
.deep-cut-term-block {
display: grid;
gap: 14px;
}
.deep-cut-term-block h3 {
font-size: 20px;
}
.deep-cut-term-grid {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.deep-cut-term-grid a {
background: #ecece7;
color: var(--ink);
display: grid;
gap: 4px;
max-width: 260px;
padding: 12px 14px;
}
.deep-cut-term-grid strong {
font-size: 14px;
}
.deep-cut-term-grid small {
color: var(--ink-soft);
font-size: 12px;
line-height: 1.5;
}
@media (max-width: 840px) {
.home-intro {
padding-left: 18px;
padding-right: 18px;
}
.home-intro h1 {
font-size: 32px;
}
.home-first-grid,
.home-theme-grid,
.home-lab-feature,
.home-random-word,
.deep-cut-next-grid,
.deep-cut-onward-foot {
grid-template-columns: 1fr;
}
.home-random-word__head {
align-items: center;
display: flex;
justify-content: space-between;
}
.home-lab-feature__media {
min-height: 240px;
}
.main-nav a,
.mobile-nav a {
align-items: flex-start;
}
.deep-cut-next-grid a,
.deep-cut-theme-guide,
.deep-cut-follow {
min-height: 0;
}
.deep-cut-term-grid {
display: grid;
grid-template-columns: 1fr;
}
.deep-cut-term-grid a {
max-width: none;
}
}
/* DEEP CUTS is BARZINE's primary reading surface. */
.deep-cuts-index {
display: grid;
gap: clamp(52px, 8vw, 96px);
margin: 0 auto;
max-width: var(--content-max);
}
.deep-cut-card__meta {
color: var(--ink-muted);
font-family: var(--font-ui);
font-size: 12px;
font-weight: 800;
}
.deep-cuts-browser {
display: grid;
gap: 24px;
}
.deep-cuts-browser__head {
align-items: end;
display: flex;
justify-content: space-between;
}
.deep-cuts-browser__head h2 {
font-size: clamp(32px, 4.4vw, 58px);
}
.deep-cuts-browser__head > p {
color: var(--barzine-line);
font-size: 13px;
font-weight: 900;
}
.deep-cuts-controls {
align-items: end;
display: grid;
gap: 12px;
grid-template-columns: minmax(0, 1fr) minmax(150px, 0.24fr) minmax(210px, 0.3fr);
}
.deep-cuts-filter-group {
display: flex;
gap: 6px;
overflow-x: auto;
scrollbar-width: none;
}
.deep-cuts-filter-group::-webkit-scrollbar {
display: none;
}
.deep-cuts-filter-group button {
background: #242426;
border: 0;
border-radius: 0;
color: var(--barzine-line);
cursor: pointer;
flex: 0 0 auto;
font: 800 12px/1 var(--font-ui);
min-height: 42px;
padding: 0 14px;
}
.deep-cuts-filter-group button:hover,
.deep-cuts-filter-group button:focus-visible,
.deep-cuts-filter-group button.is-active {
background: var(--barzine-pink);
color: var(--barzine-white);
}
.deep-cuts-select,
.deep-cuts-search {
display: grid;
gap: 6px;
}
.deep-cuts-select > span,
.deep-cuts-search > span {
color: var(--barzine-line);
font-size: 11px;
font-weight: 900;
}
.deep-cuts-select select,
.deep-cuts-search input {
background: var(--barzine-white);
border: 0;
border-radius: 0;
color: var(--ink);
font: 750 14px/1.2 var(--font-ui);
min-height: 42px;
min-width: 0;
padding: 0 12px;
width: 100%;
}
.deep-cuts-list-grid {
display: grid;
gap: 14px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.deep-cut-list-card {
background: var(--barzine-white);
color: var(--ink);
min-width: 0;
}
.deep-cut-list-card[hidden] {
display: none;
}
.deep-cut-list-card > a {
color: inherit;
display: grid;
grid-template-rows: auto 1fr;
height: 100%;
}
.deep-cut-list-card__media {
aspect-ratio: 16 / 10;
background: #171719;
display: block;
overflow: hidden;
}
.deep-cut-list-card__media img {
filter: grayscale(0.08) contrast(1.04);
height: 100%;
object-fit: cover;
transition: filter 160ms ease;
width: 100%;
}
.deep-cut-list-card > a:hover .deep-cut-list-card__media img,
.deep-cut-list-card > a:focus-visible .deep-cut-list-card__media img {
filter: grayscale(0) contrast(1.08);
}
.deep-cut-type-cover {
align-content: space-between;
background: #171719;
color: var(--barzine-white);
display: grid;
padding: clamp(18px, 3vw, 30px);
}
.deep-cut-type-cover small {
color: var(--barzine-pink);
font: 900 11px/1 var(--font-ui);
}
.deep-cut-type-cover b {
font: 900 clamp(32px, 4.5vw, 62px)/0.82 var(--font-display-en);
}
.deep-cut-list-card__body {
align-content: start;
display: grid;
gap: 12px;
padding: 20px;
}
.deep-cut-list-card__body small {
color: var(--barzine-red);
font-size: 10px;
font-weight: 950;
}
.deep-cut-list-card__body strong {
font-size: clamp(20px, 2vw, 28px);
line-height: 1.3;
overflow-wrap: anywhere;
}
.deep-cut-list-card__body em {
color: var(--ink-soft);
display: -webkit-box;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 1.75;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.deep-cut-list-card__body > span {
color: var(--ink-muted);
font-size: 11px;
font-weight: 800;
margin-top: auto;
}
.deep-cuts-empty {
color: var(--barzine-line);
font-size: 15px;
font-weight: 800;
padding: 36px 0;
}
.deep-cut-article-nav {
background: var(--barzine-black);
display: grid;
gap: 1px;
grid-template-columns: minmax(150px, 0.25fr) repeat(2, minmax(0, 1fr));
margin: 0 auto;
max-width: 1180px;
padding: 14px var(--page-gutter);
}
.deep-cut-article-nav a {
background: #171719;
color: var(--barzine-white);
display: grid;
gap: 7px;
min-height: 92px;
padding: 16px;
}
.deep-cut-article-nav a:hover,
.deep-cut-article-nav a:focus-visible {
background: #242426;
}
.deep-cut-article-nav span {
color: var(--barzine-pink);
font: 900 10px/1 var(--font-ui);
}
.deep-cut-article-nav strong {
font-size: 14px;
line-height: 1.45;
}
.deep-cut-article-nav__index strong {
font-size: 17px;
}
@media (max-width: 980px) {
.deep-cuts-controls {
grid-template-columns: 1fr 1fr;
}
.deep-cuts-filter-group {
grid-column: 1 / -1;
}
.deep-cuts-list-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.deep-cuts-index {
gap: 50px;
}
.deep-cut-card--feature {
grid-template-columns: 1fr;
}
.deep-cut-card__image {
min-height: 260px;
}
.deep-cuts-browser__head {
align-items: start;
}
.deep-cuts-controls,
.deep-cuts-list-grid {
grid-template-columns: 1fr;
}
.deep-cuts-filter-group {
margin-left: calc(var(--page-gutter) * -1);
margin-right: calc(var(--page-gutter) * -1);
padding-left: var(--page-gutter);
padding-right: var(--page-gutter);
}
.deep-cut-list-card__body strong {
font-size: 23px;
}
.deep-cut-article-nav {
grid-template-columns: 1fr;
padding: 10px 14px;
}
.deep-cut-article-nav a {
min-height: 0;
}
.deep-cut-article-nav .is-empty {
display: none;
}
}