/*
Theme Name: Jive Public Records
Theme URI: https://jivepublicrecords.com/
Author: JivePublicRecords
Description: JivePublicRecords専用のレスポンシブWordPressテーマ。投稿・カテゴリー・固定ページ、SoundCloud／YouTube制作実績に対応。
Version: 2.0.2
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: jive-public-records
*/
:root {
  --ink: #0b0c0d;
  --paper: #f4f1e9;
  --acid: #d9ff45;
  --muted: #aaa9a2;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: Arial, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input {
  font: inherit;
}
.site-header {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  right: 0;
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4vw;
  background: #0b0c0ddd;
  border-bottom: 1px solid #ffffff20;
  backdrop-filter: blur(16px);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  border: 2px solid var(--paper);
  border-radius: 50%;
  font-family: Georgia, serif;
  font-size: 24px;
  font-style: italic;
}
.desktop-nav {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.desktop-nav a:not(.nav-cta):hover {
  color: var(--acid);
}
.nav-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 17px;
  color: var(--ink);
  background: var(--acid);
}
.menu-button,
.mobile-nav {
  display: none;
}
.menu-button span { display:block; width:24px; height:2px; margin:5px 0; background:currentColor; }
.menu-button svg, .nav-cta svg, .button-primary svg, .text-link svg, .contact-band svg, .listen-cta svg, .yt-page a svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; }
.article-card[hidden] { display:none; }
.hero {
  position: relative;
  min-height: 760px;
  height: 100vh;
  max-height: 960px;
  display: grid;
  grid-template-columns: 55% 45%;
  overflow: hidden;
  border-bottom: 1px solid #ffffff24;
}

/* WordPress content templates */
.content-page { min-height:80vh; padding:150px 6vw 90px; background:var(--paper); color:var(--ink); }
.content-wrap { width:min(920px,100%); margin:auto; }
.content-wrap h1 { margin:24px 0 50px; font-size:clamp(42px,7vw,92px); line-height:1; letter-spacing:-.05em; }
.content-wrap .wp-post-image { width:100%; height:auto; margin-bottom:40px; }
.entry-content { font-size:17px; line-height:2; }
.entry-content img { max-width:100%; height:auto; }
.entry-content a { text-decoration:underline; text-decoration-color:#91ad00; text-underline-offset:4px; }
.entry-content h2,.entry-content h3 { margin-top:2.5em; line-height:1.35; }
.nav-links { display:flex; gap:20px; margin-top:50px; }
@media (max-width:900px) { .mobile-nav.open { display:flex; } }
@media (max-width:600px) { .content-page { padding:120px 6vw 60px; } }
.music-pricing { background:var(--paper); color:var(--ink); }
.music-pricing .pricing-intro { max-width:760px; margin:0 0 45px 7vw; color:#666; line-height:1.9; }
.music-option-grid { grid-template-columns:repeat(3,1fr); }
.music-option-grid article { display:flex; flex-direction:column; justify-content:space-between; min-height:170px; }
.pricing-note { margin:35px 0 0 7vw; color:#666; font-size:13px; }
@media(max-width:900px){.music-pricing .pricing-intro,.pricing-note{margin-left:0}.music-option-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.music-option-grid{grid-template-columns:1fr}}
.faq-page,.company-page { background:var(--paper); color:var(--ink); }
.faq-hero,.company-hero { min-height:540px; padding:170px 7vw 85px; border-bottom:1px solid #c5c2b8; }
.faq-hero h1,.company-hero h1 { margin:28px 0; font-size:clamp(62px,10vw,145px); line-height:.9; letter-spacing:-.07em; }
.faq-hero>p:last-child,.company-hero>p:last-child { max-width:700px; color:#666; font-size:17px; line-height:1.9; }
.faq-list { display:grid; grid-template-columns:32% 68%; padding:110px 7vw; }
.faq-list-head>span,.company-statement>span { color:#777; font-size:11px; font-weight:800; letter-spacing:.2em; }
.faq-list-head h2,.company-statement h2 { font-size:clamp(30px,4vw,54px); line-height:1.2; letter-spacing:-.04em; }
.faq-items,.company-info dl { border-top:1px solid #aaa79e; }
.faq-item { border-bottom:1px solid #aaa79e; }
.faq-item summary { display:grid; grid-template-columns:55px 1fr 28px; align-items:center; gap:15px; padding:28px 0; cursor:pointer; list-style:none; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary>span,.faq-item>div>span { color:#849b13; font-weight:800; }
.faq-item summary strong { font-size:18px; }
.faq-item summary i,.faq-item summary i:after { display:block; width:18px; height:2px; background:var(--ink); content:''; transition:.2s; }
.faq-item summary i:after { transform:rotate(90deg); }
.faq-item[open] summary i:after { transform:rotate(0); }
.faq-item>div { display:grid; grid-template-columns:55px 1fr; gap:15px; padding:0 43px 30px 0; }
.faq-item>div p { margin:0; color:#555; line-height:2; }
.faq-item>div a { font-weight:800; text-decoration:underline; text-underline-offset:4px; }
.faq-contact,.company-contact { display:flex; align-items:end; justify-content:space-between; gap:40px; padding:90px 7vw; background:var(--acid); }
.faq-contact p,.company-contact>p { font-size:11px; font-weight:800; letter-spacing:.2em; }
.faq-contact h2,.company-contact h2 { margin:18px 0 0; font-size:clamp(38px,6vw,78px); line-height:1; letter-spacing:-.05em; }
.faq-contact a,.company-contact>a { display:flex; align-items:center; gap:20px; padding:20px 25px; background:var(--ink); color:var(--paper); font-weight:800; }
.company-info { display:grid; grid-template-columns:42% 58%; gap:60px; padding:110px 7vw; }
.company-statement p { max-width:380px; color:#666; line-height:1.9; }
.company-info dl { margin:0; }
.company-info dl>div { display:grid; grid-template-columns:180px 1fr; gap:25px; padding:27px 0; border-bottom:1px solid #aaa79e; }
.company-info dt { color:#777; font-size:12px; font-weight:800; letter-spacing:.08em; }
.company-info dd { margin:0; font-size:18px; line-height:1.7; }
.company-info dd small { color:#777; }
.company-info dd a { display:inline-flex; align-items:center; gap:8px; text-decoration:underline; text-underline-offset:4px; }
.company-info dd svg { width:17px; fill:none; stroke:currentColor; stroke-width:2; }
@media(max-width:900px){.faq-list,.company-info{grid-template-columns:1fr;gap:50px}.faq-contact,.company-contact{align-items:flex-start;flex-direction:column}}
@media(max-width:600px){.faq-hero,.company-hero{min-height:420px;padding:130px 6vw 65px}.faq-list,.company-info{padding:75px 6vw}.faq-item summary{grid-template-columns:38px 1fr 22px}.faq-item>div{grid-template-columns:38px 1fr;padding-right:0}.faq-contact,.company-contact{padding:75px 6vw}.faq-contact a,.company-contact>a{width:100%;justify-content:space-between}.company-info dl>div{grid-template-columns:1fr;gap:10px}}

/* Fast click-to-load media players */
.media-loader { width:100%; border:0; cursor:pointer; font:inherit; }
.youtube-loader { position:relative; display:block; height:100%; padding:0; overflow:hidden; background:#17191b; color:#fff; }
.youtube-loader img { display:block; width:100%; height:100%; object-fit:cover; opacity:.78; transition:.25s; }
.youtube-loader:hover img { opacity:.95; transform:scale(1.015); }
.youtube-loader .play-mark { position:absolute; left:50%; top:50%; display:grid; place-items:center; width:66px; height:66px; padding-left:5px; transform:translate(-50%,-50%); border-radius:50%; background:var(--acid); color:var(--ink); font-size:25px; box-shadow:0 8px 30px #0008; }
.youtube-loader small { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); padding:7px 11px; background:#0b0c0ddd; color:#fff; font-size:11px; white-space:nowrap; }
.soundcloud-loader { display:flex; align-items:center; justify-content:center; gap:13px; min-height:112px; margin-top:17px; border:1px solid #ffffff20; background:linear-gradient(135deg,#202326,#151719); color:var(--paper); font-weight:800; }
.soundcloud-loader .play-mark { display:grid; place-items:center; width:42px; height:42px; padding-left:3px; border-radius:50%; background:var(--acid); color:var(--ink); font-size:16px; }
.soundcloud-loader>span:last-child { color:var(--paper); font-size:13px; }
.soundcloud-loader:hover { border-color:var(--acid); }
.yt-sound-grid article>div { grid-template-columns:28px 1fr; }
.yt-sound-grid iframe { width:100%; }
.track-card .soundcloud-loader { margin-top:auto; }
@media(max-width:600px){.youtube-loader .play-mark{width:54px;height:54px}.soundcloud-loader{min-height:96px}}

/* Contact page */
.contact-page { background:var(--paper); color:var(--ink); }
.contact-hero { min-height:560px; padding:170px 7vw 80px; border-bottom:1px solid #c5c2b8; }
.contact-hero h1 { margin:30px 0 55px; font-size:clamp(62px,10vw,145px); line-height:.85; letter-spacing:-.075em; }
.contact-hero>div { display:flex; align-items:end; justify-content:space-between; gap:40px; }
.contact-hero>div p { max-width:650px; margin:0; color:#555; font-size:17px; line-height:1.9; }
.contact-hero>div span { color:#777; font-size:12px; line-height:1.8; }
.contact-form-section { display:grid; grid-template-columns:32% 68%; gap:60px; padding:110px 7vw; }
.contact-side>span { color:#777; font-size:11px; font-weight:800; letter-spacing:.2em; }
.contact-side h2 { margin:25px 0; font-size:clamp(32px,4vw,56px); line-height:1.15; letter-spacing:-.045em; }
.contact-side p { max-width:360px; color:#666; line-height:1.9; }
.contact-form-wrap { max-width:900px; }
.contact-form-wrap form,.contact-form-wrap .mw_wp_form { width:100%; }
.contact-form-wrap table,.contact-form-wrap tbody { display:block; width:100%; border:0; }
.contact-form-wrap tr { display:grid; grid-template-columns:180px 1fr; gap:25px; padding:22px 0; border-bottom:1px solid #b8b5ac; }
.contact-form-wrap th,.contact-form-wrap td { display:block; padding:0; border:0; text-align:left; vertical-align:top; }
.contact-form-wrap th,.contact-form-wrap label { font-weight:800; line-height:1.7; }
.contact-form-wrap input[type=text],.contact-form-wrap input[type=email],.contact-form-wrap input[type=tel],.contact-form-wrap input[type=url],.contact-form-wrap select,.contact-form-wrap textarea { width:100%; min-height:54px; padding:14px 16px; border:1px solid #97958d; border-radius:0; outline:none; background:#fff; color:var(--ink); font-size:16px; transition:.2s; }
.contact-form-wrap textarea { min-height:180px; resize:vertical; }
.contact-form-wrap input:focus,.contact-form-wrap textarea:focus,.contact-form-wrap select:focus { border-color:#718500; box-shadow:0 0 0 3px #d9ff4566; }
.contact-form-wrap input[type=checkbox],.contact-form-wrap input[type=radio] { width:20px; height:20px; margin:3px 8px 3px 0; accent-color:#91a91b; vertical-align:middle; }
.contact-form-wrap .horizontal-item,.contact-form-wrap label { display:inline-flex; align-items:flex-start; gap:4px; margin:0 22px 10px 0; }
.contact-form-wrap .privacy,.contact-form-wrap .check { margin:35px 0; padding:22px; border:1px solid #b8b5ac; background:#efede6; }
.contact-form-wrap input[type=submit],.contact-form-wrap button[type=submit],.contact-form-wrap input[type=button] { min-width:230px; min-height:60px; padding:16px 28px; border:0; border-radius:0; background:var(--ink); color:var(--paper); font-size:15px; font-weight:800; cursor:pointer; transition:.2s; }
.contact-form-wrap input[type=submit]:hover,.contact-form-wrap button[type=submit]:hover,.contact-form-wrap input[type=button]:hover { background:#728500; transform:translateY(-2px); }
.contact-form-wrap .error { margin-top:7px; color:#c92d1d; font-size:13px; }
.contact-form-wrap>p:first-child:empty { display:none; }
@media(max-width:900px){.contact-form-section{grid-template-columns:1fr}.contact-side p{max-width:600px}.contact-hero>div{align-items:flex-start;flex-direction:column}}
@media(max-width:600px){.contact-hero{min-height:460px;padding:130px 6vw 65px}.contact-form-section{padding:75px 6vw}.contact-form-wrap tr{grid-template-columns:1fr;gap:10px}.contact-form-wrap .horizontal-item,.contact-form-wrap label{display:flex;margin-right:0}.contact-form-wrap input[type=submit],.contact-form-wrap button[type=submit],.contact-form-wrap input[type=button]{width:100%}}

/* Shared fixed pages and editable pricing */
.standard-page,.price-page { background:var(--paper); color:var(--ink); }
.standard-page-hero { min-height:500px; padding:170px 7vw 80px; border-bottom:1px solid #c5c2b8; }
.standard-page-hero h1 { margin:30px 0 0; max-width:1200px; font-size:clamp(58px,9vw,130px); line-height:.9; letter-spacing:-.07em; }
.standard-page-hero>p:last-child:not(.eyebrow) { max-width:700px; margin-top:45px; color:#666; font-size:17px; line-height:1.9; }
.standard-page-body { min-height:300px; padding:100px 7vw; }
.standard-page-body .entry-content { width:min(920px,100%); margin:auto; }
.standard-page-body .entry-content h2 { padding-bottom:18px; border-bottom:2px solid var(--ink); font-size:clamp(28px,4vw,48px); }
.standard-page-body .entry-content h3 { padding-left:18px; border-left:4px solid #a9c51c; font-size:24px; }
.standard-page-body .entry-content table { width:100%; border-collapse:collapse; }
.standard-page-body .entry-content th,.standard-page-body .entry-content td { padding:20px; border-bottom:1px solid #b8b5ac; text-align:left; }
.standard-page-body .entry-content blockquote { margin:40px 0; padding:28px; border-left:5px solid var(--acid); background:#e9e6de; }
.standard-page-body .entry-content .wp-block-button__link { display:inline-block; padding:17px 24px; border-radius:0; background:var(--ink); color:var(--paper); text-decoration:none; font-weight:800; }
.standalone-price { padding:100px 7vw; border-bottom:1px solid #c5c2b8; }
.standalone-price:nth-child(odd) { background:#ece9e1; }
.standalone-price .price-list { margin-bottom:0; }
.price-page .faq-contact { color:var(--ink); }
@media(max-width:600px){.standard-page-hero{min-height:400px;padding:130px 6vw 65px}.standard-page-body,.standalone-price{padding:70px 6vw}.standard-page-body .entry-content th,.standard-page-body .entry-content td{display:block;padding:13px 0}.standard-page-body .entry-content th{padding-top:24px;border-bottom:0;color:#777}}
.event-page { background:var(--ink); color:var(--paper); }
.event-hero { min-height:760px; padding:170px 7vw 90px; background:radial-gradient(circle at 85% 40%,#d9ff4525,transparent 28%),#111315; }
.event-hero h1 { margin:45px 0 35px; font-size:clamp(68px,10vw,148px); line-height:.82; letter-spacing:-.075em; }
.event-hero h1 em { color:var(--acid); font-family:Georgia,'Yu Mincho',serif; font-weight:400; }
.event-hero>p:not(.eyebrow) { max-width:720px; color:#aaa9a2; font-size:17px; line-height:2; }
.event-hero>a { display:flex; align-items:center; justify-content:space-between; width:270px; margin-top:38px; padding:18px; background:var(--acid); color:var(--ink); font-weight:800; }
.event-hero svg { width:18px; fill:none; stroke:currentColor; stroke-width:2; }
.event-intro { display:grid; grid-template-columns:25% 75%; padding:120px 7vw; background:var(--paper); color:var(--ink); }
.event-intro>p { font-size:10px; font-weight:800; letter-spacing:.2em; }
.event-intro>div { max-width:980px; }
.event-intro h2 { margin:0; font-size:clamp(40px,5vw,70px); line-height:1.12; letter-spacing:-.05em; }
.event-intro div p { max-width:760px; margin-top:35px; color:#5f5e5a; line-height:2; }
.event-works,.event-model,.event-pricing { padding:110px 7vw; }
.event-tags { display:grid; grid-template-columns:repeat(3,1fr); margin:55px 0 0 8%; border-top:1px solid #ffffff25; border-left:1px solid #ffffff25; }
.event-tags div { min-height:130px; padding:22px; border-right:1px solid #ffffff25; border-bottom:1px solid #ffffff25; }
.event-tags span { display:block; margin-bottom:35px; color:#777; font-size:10px; }
.event-tags strong { font-size:16px; }
.event-model { background:var(--acid); color:var(--ink); }
.event-model .yt-section-title>span,.event-model .yt-section-title p { color:#657700; }
.event-model-table { margin:55px 0 20px 8%; border-top:2px solid var(--ink); }
.event-model-table>div { display:flex; justify-content:space-between; gap:30px; padding:17px 0; border-bottom:1px solid #657700; }
.event-model-table .event-total { padding:25px 0; font-size:24px; }
.event-model>p { margin-left:8%; font-size:12px; }
.event-pricing { background:var(--paper); color:var(--ink); }
.event-pricing .yt-section-title p { color:#777; }.event-pricing .yt-section-title>span { color:#718500; }
.event-pricing .price-list { margin-bottom:0; }
@media(max-width:900px){.event-intro{grid-template-columns:1fr;gap:30px}.event-tags{grid-template-columns:1fr 1fr;margin-left:0}.event-model-table,.event-model>p{margin-left:0}}
@media(max-width:600px){.event-hero{min-height:650px;padding:130px 6vw 70px}.event-intro,.event-works,.event-model,.event-pricing{padding:75px 6vw}.event-tags{grid-template-columns:1fr}.event-model-table>div{align-items:flex-start;flex-direction:column;gap:5px}}
.faq-contact,.event-page .faq-contact { color:var(--ink); }
.faq-contact>div { min-width:0; flex:1 1 auto; }
.faq-contact h2 { max-width:1250px; }
.faq-contact>a { flex:0 0 auto; min-width:250px; justify-content:space-between; white-space:nowrap; }
@media(max-width:900px){.faq-contact>a{min-width:280px}}
@media(max-width:600px){.faq-contact>a{min-width:0}}
@media(max-width:900px){
  .mobile-nav { display:none; max-height:calc(100vh - 82px); overflow-y:auto; }
  .mobile-nav.open { display:grid; }
  body.menu-open { overflow:hidden; }
  .menu-button { position:relative; z-index:2; width:42px; height:42px; padding:7px; }
  .menu-button span { transition:transform .2s,opacity .2s; }
  .menu-button[aria-expanded="true"] span:first-child { transform:translateY(3.5px) rotate(45deg); }
  .menu-button[aria-expanded="true"] span:last-child { transform:translateY(-3.5px) rotate(-45deg); }
}
.hero-copy {
  align-self: center;
  z-index: 2;
  padding: 112px 0 70px 7vw;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
}
.eyebrow span {
  width: 34px;
  height: 2px;
  background: var(--acid);
}
.hero h1 {
  margin: 32px 0;
  font-size: clamp(60px, 8vw, 130px);
  line-height: 0.9;
  letter-spacing: -0.065em;
  white-space: nowrap;
}
.hero h1 em {
  color: var(--acid);
  font-family: Georgia, 'Yu Mincho', serif;
  font-weight: 400;
}
.hero-lead {
  margin: 0 0 38px;
  color: #d4d2cb;
  font-size: 16px;
  line-height: 2;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 28px;
}
.button-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-width: 204px;
  padding: 18px 21px;
  background: var(--acid);
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}
.text-link {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  border-bottom: 1px solid #777;
  padding: 10px 0;
}
.hero-visual {
  position: relative;
  height: 100%;
}
.hero-visual:after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--ink), transparent 36%),
    linear-gradient(0deg, var(--ink), transparent 24%);
}
.hero-visual > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.2);
  opacity: 0.74;
}
.disc {
  position: absolute;
  z-index: 2;
  right: 12%;
  bottom: 15%;
  width: 170px;
  height: 170px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink);
  background: var(--acid);
  box-shadow: 0 0 0 10px #d9ff4525;
  animation: float 4s ease-in-out infinite;
}
.disc:after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink);
}
.disc span {
  font-size: 10px;
  line-height: 1.35;
  font-weight: 900;
  text-align: center;
  transform: translateY(-38px);
}
.vertical-type {
  position: absolute;
  z-index: 3;
  right: 18px;
  top: 130px;
  margin: 0;
  color: #ddd;
  writing-mode: vertical-rl;
  font-size: 9px;
  letter-spacing: 0.25em;
}
.scroll-note {
  position: absolute;
  z-index: 3;
  left: 7vw;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: #8d8d88;
}
.scroll-note span {
  width: 70px;
  height: 1px;
  background: #555;
}
@keyframes float {
  50% {
    transform: translateY(-10px) rotate(3deg);
  }
}
.manifesto {
  display: grid;
  grid-template-columns: 25% 75%;
  padding: 130px 7vw;
  background: var(--paper);
  color: var(--ink);
}
.section-index {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
}
.manifesto-copy {
  margin: 0;
  max-width: 930px;
  font-size: clamp(30px, 4vw, 60px);
  line-height: 1.55;
  letter-spacing: -0.035em;
}
.manifesto-copy strong {
  position: relative;
  z-index: 1;
  font-weight: 800;
}
.manifesto-copy strong:after {
  content: '';
  position: absolute;
  z-index: -1;
  height: 22%;
  left: -2%;
  right: -2%;
  bottom: 8%;
  background: var(--acid);
}
.services,
.archive {
  padding: 120px 7vw;
}
.services {
  background: #121416;
}
.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 54px;
}
.section-heading h2,
.section-heading h1 {
  margin: 10px 0 0;
  font-size: clamp(48px, 6vw, 84px);
  letter-spacing: -0.05em;
}
.archive-page .archive { padding-top:170px; min-height:75vh; }
.section-heading > p {
  color: #aaa9a2;
  line-height: 1.8;
  font-size: 14px;
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid #ffffff28;
  border-left: 1px solid #ffffff28;
}
.service-card {
  min-height: 335px;
  padding: 26px;
  border-right: 1px solid #ffffff28;
  border-bottom: 1px solid #ffffff28;
  transition: 0.25s;
}
.service-card:hover {
  background: var(--acid);
  color: var(--ink);
  transform: translateY(-4px);
}
.service-card:hover > p {
  color: #333;
}
.service-top {
  display: flex;
  justify-content: space-between;
  color: #777;
  font-size: 11px;
}
.service-en {
  margin: 92px 0 8px;
  color: var(--acid);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
}
.service-card h3 {
  margin: 0 0 18px;
  font-size: 25px;
}
.service-card > p:last-child {
  margin: 0;
  color: #92928d;
  font-size: 13px;
  line-height: 1.8;
}
.archive {
  background: var(--paper);
  color: var(--ink);
}
.archive-heading .eyebrow,
.archive-heading > p {
  color: #6d6c67;
}
.archive-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 38px;
  border-bottom: 1px solid #b8b5ac;
}
.filters {
  display: flex;
  gap: 28px;
}
.filters button {
  padding: 16px 0;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: #777;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
}
.filters button.active {
  color: var(--ink);
  border-color: var(--ink);
}
.filters sup {
  padding-left: 5px;
  font-size: 9px;
}
.search {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 250px;
  padding: 11px 0;
  border-bottom: 1px solid #777;
}
.search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
}
.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 52px 24px;
}
.article-card {
  min-width: 0;
}
.article-image {
  position: relative;
  aspect-ratio: 1.38;
  overflow: hidden;
  background: #222;
}
.article-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1);
  transition: 0.45s;
}
.article-image.works:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, #d9ff4522, #0008);
}
.article-image.terms:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, #ffffff18, #0007);
}
.article-card:hover img {
  transform: scale(1.05);
  filter: grayscale(0.2);
}
.article-image > span {
  position: absolute;
  z-index: 2;
  left: 15px;
  top: 14px;
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.15em;
}
.sound-mark {
  position: absolute;
  z-index: 2;
  right: 14px;
  bottom: 14px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--acid);
  border-radius: 50%;
  color: var(--acid);
  background: #0b0c0de8;
  box-shadow:
    inset 0 0 0 4px #0b0c0d,
    inset 0 0 0 5px #d9ff4545;
  transition: 0.25s;
}
.sound-mark svg {
  width: 19px;
  height: 19px;
}
.article-card:hover .sound-mark {
  color: var(--ink);
  background: var(--acid);
  transform: rotate(-8deg) scale(1.06);
}
.article-meta {
  display: flex;
  justify-content: space-between;
  margin: 18px 0 10px;
  color: #777;
  font-size: 10px;
  letter-spacing: 0.09em;
}
.article-meta span {
  color: #4d5500;
  font-weight: 800;
}
.article-card h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.4;
}
.article-card > p {
  margin: 8px 0 0;
  color: #777;
  font-size: 12px;
}
.empty {
  padding: 60px 0;
  text-align: center;
  color: #777;
}
.contact-band {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  padding: 110px 7vw;
  background: var(--acid);
  color: var(--ink);
}
.contact-band .eyebrow {
  color: #535a27;
}
.contact-band .eyebrow span {
  background: var(--ink);
}
.contact-band h2 {
  margin: 22px 0 0;
  font-size: clamp(55px, 7vw, 105px);
  line-height: 0.95;
  letter-spacing: -0.06em;
}
.contact-band > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: min(340px, 100%);
  padding: 22px 0;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  font-weight: 800;
}
footer {
  display: grid;
  grid-template-columns: 1fr 1.6fr auto auto;
  align-items: end;
  gap: 40px;
  padding: 70px 7vw 38px;
  background: #080909;
}
footer address {
  color: #aaa;
  font-size: 11px;
  font-style: normal;
  line-height: 1.7;
}
footer address span {
  display: block;
  margin-bottom: 5px;
  color: var(--acid);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
}
.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px 30px;
  font-size: 12px;
  color: #aaa;
}
.footer-links a:hover {
  color: var(--acid);
}
footer > p {
  margin: 0;
  color: #666;
  font-size: 10px;
}
@media (max-width: 900px) {
  .desktop-nav {
    display: none;
  }
  .menu-button {
    display: block;
    border: 0;
    background: none;
    color: white;
  }
  .mobile-nav {
    position: absolute;
    top: 82px;
    left: 0;
    right: 0;
    display: grid;
    background: #0b0c0df6;
    padding: 20px 7vw 30px;
    border-bottom: 1px solid #444;
  }
  .mobile-nav a {
    padding: 16px 0;
    border-bottom: 1px solid #333;
    font-weight: 800;
  }
  .hero {
    grid-template-columns: 1fr;
    min-height: 720px;
  }
  .hero-copy {
    padding: 130px 7vw 100px;
  }
  .hero h1 {
    font-size: clamp(54px, 14vw, 92px);
  }
  .hero-visual {
    position: absolute;
    inset: 0;
    opacity: 0.45;
  }
  .hero-visual:after {
    background:
      linear-gradient(90deg, var(--ink), transparent),
      linear-gradient(0deg, var(--ink), transparent 70%);
  }
  .disc {
    width: 125px;
    height: 125px;
    right: 7%;
    bottom: 12%;
  }
  .vertical-type {
    display: none;
  }
  .manifesto {
    grid-template-columns: 1fr;
    gap: 35px;
    padding: 90px 7vw;
  }
  .service-grid,
  .article-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  footer {
    grid-template-columns: 1fr 1fr;
  }
  footer > p {
    grid-column: 1/-1;
  }
}
@media (max-width: 600px) {
  .site-header {
    height: 70px;
  }
  .mobile-nav {
    top: 70px;
  }
  .hero {
    min-height: 760px;
    height: auto;
  }
  .hero-copy {
    padding-top: 120px;
  }
  .hero-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
  .section-heading,
  .archive-tools,
  .contact-band {
    align-items: flex-start;
    flex-direction: column;
  }
  .section-heading > p {
    margin-top: 18px;
  }
  .services,
  .archive {
    padding: 80px 6vw;
  }
  .service-grid,
  .article-grid {
    grid-template-columns: 1fr;
  }
  .service-card {
    min-height: 260px;
  }
  .service-en {
    margin-top: 52px;
  }
  .filters {
    width: 100%;
    gap: 16px;
    overflow-x: auto;
  }
  .filters button {
    white-space: nowrap;
    font-size: 12px;
  }
  .search {
    width: 100%;
    min-width: 0;
    margin-bottom: 20px;
  }
  .article-grid {
    gap: 42px;
  }
  .contact-band {
    padding: 80px 7vw;
  }
  footer {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .footer-links {
    grid-template-columns: repeat(2, 1fr);
  }
  footer > p {
    grid-column: auto;
  }
}

/* YouTube music */
.yt-page{background:#0b0c0d;color:var(--paper)}.yt-nav-links{display:flex;gap:28px}.yt-nav-links a{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:800;letter-spacing:.15em}.yt-hero{min-height:690px;display:grid;grid-template-columns:58% 42%;overflow:hidden;background:#111315}.yt-hero-copy{align-self:center;padding:90px 3vw 80px 7vw}.yt-kicker{display:flex;align-items:center;gap:10px;color:var(--acid);font-size:10px;font-weight:800;letter-spacing:.2em}.yt-hero h1{margin:38px 0 30px;font-size:clamp(58px,7vw,108px);line-height:.94;letter-spacing:-.065em}.yt-hero h1 em{color:var(--acid);font-family:Georgia,'Yu Mincho',serif;font-weight:400}.yt-hero-copy>p:not(.yt-kicker){max-width:620px;color:#adaca6;font-size:15px;line-height:2}.yt-hero-copy>a{display:flex;align-items:center;justify-content:space-between;width:240px;margin-top:34px;padding:18px;background:var(--acid);color:var(--ink);font-weight:800}.yt-hero-art{position:relative;display:grid;place-items:center;background:var(--acid);overflow:hidden}.yt-hero-art:before{content:'';position:absolute;width:520px;height:520px;border:1px solid #111;border-radius:50%;box-shadow:0 0 0 45px #00000010,0 0 0 90px #00000010}.yt-hero-art img{position:relative;z-index:1;width:80%;filter:grayscale(1) contrast(1.2);mix-blend-mode:multiply}.yt-signal{position:absolute;z-index:2;bottom:50px;display:flex;align-items:end;gap:7px;height:55px}.yt-signal span{width:7px;background:var(--ink);animation:signal 1.1s ease-in-out infinite}.yt-signal span:nth-child(1),.yt-signal span:nth-child(5){height:20%}.yt-signal span:nth-child(2),.yt-signal span:nth-child(4){height:65%;animation-delay:.2s}.yt-signal span:nth-child(3){height:100%;animation-delay:.35s}@keyframes signal{50%{height:25%}}
.yt-concept{display:grid;grid-template-columns:25% 75%;padding:120px 7vw;background:var(--paper);color:var(--ink)}.yt-concept>p,.yt-media>p{font-size:10px;font-weight:800;letter-spacing:.2em}.yt-concept>div{max-width:980px}.yt-concept h2{margin:0;font-size:clamp(42px,5vw,72px);line-height:1.12;letter-spacing:-.05em}.yt-concept div>p{max-width:760px;margin:35px 0;color:#5f5e5a;font-size:16px;line-height:2}.yt-concept ul{display:flex;gap:28px;flex-wrap:wrap;padding:0;list-style:none}.yt-concept li{display:flex;gap:8px;align-items:center;font-size:13px;font-weight:800}.yt-concept li svg{width:17px;color:#748800}.yt-concept small{display:block;margin-top:22px;color:#777}.yt-media{display:grid;grid-template-columns:20% 24% 1fr;align-items:center;padding:70px 7vw;background:var(--acid);color:var(--ink)}.yt-media>strong{font-size:150px;line-height:.8;letter-spacing:-.08em}.yt-media h2{margin:0;font-size:42px}.yt-media div p{max-width:560px;line-height:1.8}.yt-media a{display:inline-flex;align-items:center;gap:9px;border-bottom:1px solid;padding:8px 0;font-size:12px;font-weight:800}
.yt-section,.yt-pricing{padding:110px 7vw;border-top:1px solid #ffffff1f}.yt-section-title{display:grid;grid-template-columns:8% 1fr;align-items:start}.yt-section-title>span{color:var(--acid);font-size:11px;font-weight:800}.yt-section-title p{margin:0 0 10px;color:#787974;font-size:9px;font-weight:800;letter-spacing:.22em}.yt-section-title h2{margin:0;font-size:clamp(44px,5vw,70px);line-height:1;letter-spacing:-.05em}.yt-section-lead{margin:20px 0 50px 8%;color:#92928d}.youtube-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:44px 22px;margin-top:55px}.youtube-frame{aspect-ratio:16/9;background:#17191b}.youtube-frame iframe{width:100%;height:100%;border:0}.youtube-card>p{display:flex;gap:18px;align-items:start;margin:15px 0 0;font-size:15px;font-weight:700}.youtube-card>p span{color:#686965;font-size:9px;letter-spacing:.1em}.yt-thumb{background:#151719}.yt-thumb-grid{display:grid;grid-template-columns:65% 1fr;gap:5vw;align-items:center;margin-top:50px}.yt-thumb-grid>img{width:100%;border:1px solid #ffffff20}.yt-thumb-grid svg{color:var(--acid)}.yt-thumb-grid h3{font-size:32px;line-height:1.3}.yt-thumb-grid p{color:#999994;line-height:2}.native-video-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:55px}.native-video-grid video{width:100%;aspect-ratio:16/9;background:#111}.native-video-grid h3{font-size:16px}.yt-sound-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:45px}.yt-sound-grid article{padding:22px;background:#17191b;border:1px solid #ffffff14}.yt-sound-grid article>div{display:grid;grid-template-columns:28px 24px 1fr;gap:10px;align-items:center}.yt-sound-grid span{color:#666;font-size:9px}.yt-sound-grid svg{width:17px;color:var(--acid)}.yt-sound-grid h3{margin:0;font-size:16px}.yt-sound-grid iframe{border:0;margin-top:17px}.yt-listen-link{display:flex;align-items:center;justify-content:center;gap:10px;width:max-content;margin:45px auto 0;padding:16px 25px;border:1px solid var(--acid);color:var(--acid);font-size:13px;font-weight:800}
.yt-pricing{background:var(--paper);color:var(--ink)}.yt-pricing .yt-section-title p{color:#686863}.yt-pricing .yt-section-title>span{color:#697c00}.price-list{margin:55px 0 80px 8%;border-top:2px solid var(--ink)}.price-list>div{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:24px 0;border-bottom:1px solid #aaa}.price-list h3{margin:0;font-size:18px}.price-list p{margin:6px 0 0;color:#777;font-size:12px}.price-list strong{font-size:26px;white-space:nowrap}.price-list small,.option-grid small{margin-right:10px;color:#777;font-size:9px;font-weight:400}.option-title{margin-left:8%;font-size:11px;letter-spacing:.2em}.option-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-left:8%;border-top:1px solid;border-left:1px solid}.option-grid article{padding:24px;border-right:1px solid;border-bottom:1px solid}.option-grid p{color:#777;font-size:11px}.option-grid h3{min-height:45px;font-size:16px}.option-grid strong{font-size:21px}.yt-final{display:grid;grid-template-columns:1.2fr 1fr auto;gap:55px;align-items:end;padding:100px 7vw;background:var(--acid);color:var(--ink)}.yt-final div>p{font-size:10px;font-weight:800;letter-spacing:.2em}.yt-final h2{margin:20px 0 0;font-size:clamp(44px,5vw,75px);line-height:1.05;letter-spacing:-.05em}.yt-final ul{margin:0;padding-left:20px;font-size:13px;line-height:2}.yt-final>a{display:flex;align-items:center;gap:20px;padding:18px 0;border-block:2px solid;font-weight:800;white-space:nowrap}
@media(max-width:900px){.yt-hero{grid-template-columns:1fr}.yt-hero-art{min-height:380px}.yt-concept{grid-template-columns:1fr;gap:35px}.yt-media{grid-template-columns:1fr 1fr}.yt-media>p{grid-column:1/-1}.yt-media>strong{font-size:100px}.yt-section-title{grid-template-columns:50px 1fr}.yt-section-lead{margin-left:50px}.yt-thumb-grid{grid-template-columns:1fr}.yt-final{grid-template-columns:1fr}.option-grid{grid-template-columns:1fr;margin-left:0}.price-list{margin-left:0}}
@media(max-width:600px){.yt-nav-links a:first-child{display:none}.yt-hero{min-height:auto}.yt-hero-copy{padding:80px 6vw 65px}.yt-hero h1{font-size:14vw}.yt-hero-art{min-height:300px}.yt-concept,.yt-section,.yt-pricing{padding:75px 6vw}.yt-media{grid-template-columns:1fr;padding:65px 6vw;gap:25px}.yt-media>strong{font-size:90px}.youtube-grid,.native-video-grid,.yt-sound-grid{grid-template-columns:1fr}.yt-section-lead{margin-left:0}.price-list>div{align-items:flex-start;flex-direction:column}.yt-final{padding:75px 6vw}.yt-listen-link{width:100%;text-align:center}}

/* Listening room */
.listen-page {
  background: #0b0c0d;
  color: var(--paper);
}
.listen-nav {
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5vw;
  border-bottom: 1px solid #ffffff22;
}
.listen-nav > a:last-child {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.15em;
}
.listen-hero {
  position: relative;
  min-height: 650px;
  padding: 115px 7vw 80px;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 52%, #d9ff451d 0 18%, transparent 18.4%),
    repeating-radial-gradient(
      circle at 82% 52%,
      transparent 0 38px,
      #ffffff0c 39px 40px
    ),
    #111315;
}
.listen-hero:after {
  content: 'WAVE';
  position: absolute;
  right: -2vw;
  bottom: -6vw;
  color: #ffffff05;
  font-size: 25vw;
  font-weight: 900;
  line-height: 1;
}
.listen-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--acid);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.22em;
}
.listen-kicker svg {
  width: 19px;
}
.listen-hero h1 {
  position: relative;
  z-index: 1;
  margin: 55px 0 38px;
  font-size: clamp(72px, 11vw, 160px);
  line-height: 0.77;
  letter-spacing: -0.075em;
}
.listen-hero h1 em {
  color: var(--acid);
  font-family: Georgia, 'Yu Mincho', serif;
  font-weight: 400;
}
.listen-hero > p {
  position: relative;
  z-index: 1;
  margin-left: 42%;
  color: #b5b4ae;
  font-size: 15px;
  line-height: 2;
}
.listen-count {
  position: absolute;
  right: 7vw;
  top: 105px;
  display: flex;
  align-items: end;
  gap: 13px;
  color: var(--acid);
}
.listen-count strong {
  font-size: 68px;
  line-height: 0.8;
}
.listen-count span {
  font-size: 9px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.15em;
}
.listen-intro {
  display: grid;
  grid-template-columns: 25% 75%;
  padding: 120px 7vw;
  background: var(--paper);
  color: var(--ink);
}
.listen-intro > p {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
}
.listen-intro > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8vw;
  align-items: end;
}
.listen-intro h2 {
  margin: 0;
  font-size: clamp(42px, 5vw, 75px);
  line-height: 1.1;
  letter-spacing: -0.05em;
}
.listen-intro div p {
  margin: 0;
  color: #62615d;
  font-size: 15px;
  line-height: 2;
}
.listen-section {
  padding: 110px 7vw;
  border-top: 1px solid #ffffff20;
}
.listen-section:nth-of-type(odd) {
  background: #121416;
}
.listen-section-head {
  display: grid;
  grid-template-columns: 8% 40% 1fr;
  gap: 30px;
  align-items: end;
  margin-bottom: 55px;
}
.listen-section-head > span {
  align-self: start;
  color: var(--acid);
  font-size: 11px;
  font-weight: 800;
}
.listen-section-head div p {
  margin: 0 0 12px;
  color: #888;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.2em;
}
.listen-section-head h2 {
  margin: 0;
  font-size: clamp(42px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.05em;
}
.listen-section-head > p {
  justify-self: end;
  max-width: 500px;
  margin: 0;
  color: #92928d;
  font-size: 14px;
  line-height: 1.9;
}
.track-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.track-card {
  display: grid;
  grid-template-rows: auto minmax(0, auto) auto;
  align-content: start;
  min-width: 0;
  padding: 25px;
  background: #1a1c1e;
  border: 1px solid #ffffff18;
}
.track-card:hover {
  border-color: #d9ff4577;
}
.track-heading {
  display: grid;
  grid-template-columns: 28px 24px 1fr;
  gap: 10px;
  align-items: center;
}
.track-heading span {
  color: #696a66;
  font-size: 10px;
}
.track-heading svg {
  width: 18px;
  color: var(--acid);
}
.track-heading h3 {
  margin: 0;
  font-size: 18px;
}
.track-card > p {
  min-height: 64px;
  margin: 15px 0;
  color: #aaa9a2;
  font-size: 13px;
  line-height: 1.8;
}
.track-card iframe {
  display: block;
  margin-top: 20px;
  border: 0;
  background: #111;
}
.listen-cta {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  padding: 100px 7vw;
  background: var(--acid);
  color: var(--ink);
}
.listen-cta p {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
}
.listen-cta h2 {
  margin: 22px 0 0;
  font-size: clamp(48px, 6vw, 90px);
  line-height: 1;
  letter-spacing: -0.055em;
}
.listen-cta a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 300px;
  padding: 20px 0;
  border-block: 2px solid;
  font-weight: 800;
}
.listen-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 40px 7vw;
}

/* Final mobile navigation state — keep last to win the cascade. */
.mobile-nav[hidden] { display:none !important; }
@media (max-width:900px) {
  .mobile-nav:not([hidden]).open { display:grid !important; }
}
.listen-footer a {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--acid);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.15em;
}
.listen-footer address {
  color: #8d8d88;
  font-size: 11px;
  font-style: normal;
}
.listen-footer address span {
  margin-right: 10px;
  color: var(--acid);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
}
@media (max-width: 900px) {
  .listen-hero > p {
    margin-left: 0;
    max-width: 560px;
  }
  .listen-count {
    top: auto;
    bottom: 55px;
  }
  .listen-intro {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .listen-intro > div {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .listen-section-head {
    grid-template-columns: 50px 1fr;
  }
  .listen-section-head > p {
    grid-column: 2;
  }
  .track-grid {
    grid-template-columns: 1fr;
  }
  .listen-cta {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 600px) {
  .listen-nav {
    height: 70px;
  }
  .listen-nav > a:last-child {
    font-size: 0;
  }
  .listen-hero {
    min-height: 610px;
    padding: 90px 6vw 70px;
  }
  .listen-hero h1 {
    font-size: 18vw;
    line-height: 0.85;
  }
  .listen-hero > p {
    font-size: 14px;
  }
  .listen-count {
    right: 6vw;
    bottom: 35px;
  }
  .listen-count strong {
    font-size: 50px;
  }
  .listen-intro,
  .listen-section {
    padding: 75px 6vw;
  }
  .listen-section-head {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .listen-section-head > p {
    grid-column: 1;
  }
  .track-card {
    padding: 18px;
  }
  .listen-cta {
    padding: 75px 6vw;
  }
  .listen-cta a {
    min-width: 100%;
    width: 100%;
  }
  .listen-footer {
    align-items: flex-start;
    flex-direction: column;
    padding: 32px 6vw;
  }
}