@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700;800;900&family=Noto+Sans+JP:wght@400;500;700&display=swap');
:root{--yellow:#ffe500;--black:#080808;--surface:#111;--line:#313128;--muted:#a9a9a0}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--black);color:#f3f3ee;font-family:Arial,"Helvetica Neue","Noto Sans JP",sans-serif}a{color:inherit;text-decoration:none}button,a{ -webkit-tap-highlight-color:transparent}a:focus-visible{outline:2px solid var(--yellow);outline-offset:5px}.topbar{height:76px;display:flex;justify-content:space-between;align-items:center;padding:0 max(5vw,24px);border-bottom:1px solid #222;background:#080808f5;position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}.brand{display:flex;align-items:center;gap:8px;font-weight:1000;color:var(--yellow);font-size:23px;letter-spacing:-1px}.topbar nav{display:flex;gap:clamp(10px,2.6vw,40px)}.topbar nav a{font-size:11px;font-weight:800;letter-spacing:1.5px;color:#cecec5}.topbar nav a:hover{color:var(--yellow)}.section-pad{padding:104px max(5vw,24px)}.hero{min-height:490px;position:relative;overflow:hidden;display:flex;align-items:flex-start;flex-direction:column;justify-content:center;border-bottom:1px solid #333}.hero-grid{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#080808f5 0%,#080808aa 70%,#08080844),repeating-linear-gradient(0deg,transparent 0 68px,#262614 69px 70px),repeating-linear-gradient(90deg,transparent 0 68px,#262614 69px 70px);transform:skewY(-8deg) scale(1.4);opacity:.55}.hero>*:not(.hero-grid){position:relative}.eyebrow,.kicker{color:var(--yellow);font-size:11px;font-weight:900;letter-spacing:2.3px}.pulse{display:inline-block;width:7px;height:7px;background:var(--yellow);border-radius:50%;margin:0 12px}.hero-label{margin:18px 0 8px;letter-spacing:3px;font-size:clamp(10px,1.4vw,16px);font-weight:700}.hero h1{font-family:Impact,"Arial Black",sans-serif;font-size:clamp(56px,9vw,126px);letter-spacing:-.045em;line-height:.88;margin:0;max-width:100%;font-weight:1000}.hero h1 em{font-style:normal;color:var(--yellow)}.hero-sub{font-size:clamp(18px,2.3vw,26px);font-weight:900;letter-spacing:.06em;margin:18px 0 8px}.hero-desc{font-size:14px;color:#c6c6be;line-height:2}.hero-actions,.inline-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}.btn{min-height:51px;display:inline-flex;align-items:center;justify-content:center;padding:14px 25px;font-size:12px;font-weight:900;letter-spacing:1px}.btn.primary{background:var(--yellow);color:#080808}.btn.secondary{border:1px solid #79796c;color:#f2f2ed}.btn:hover{transform:translateY(-2px)}.hero-floor{margin-top:32px;width:100%;display:flex;justify-content:space-between;gap:10px;color:#77776f;font-size:10px;letter-spacing:1px}.section-surface{background:var(--surface)}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:34px}.section-heading p:last-child{color:var(--muted);font-size:13px;line-height:1.8}.section-heading h2,.section-about h2,.connect-section h2{font-family:Impact,"Arial Black",sans-serif;letter-spacing:.015em;font-size:clamp(42px,6.5vw,96px);line-height:1.05;margin:11px 0 0}.section-heading h2 span,.section-about h2 span,.connect-section h2 span{color:var(--yellow)}.track-list{border-top:1px solid #494938}.track{border-bottom:1px solid #37372d;display:grid;grid-template-columns:55px minmax(0,1fr) minmax(90px,.5fr) 110px;align-items:center;gap:16px;padding:18px 8px}.track-number{color:var(--yellow);font-weight:900;font-size:16px}.track-title{font-size:clamp(16px,2vw,25px);font-weight:900}.track-artist,.track-release{color:#aaa;font-size:12px;margin-top:6px}.track-action{border:1px solid var(--yellow);color:var(--yellow);padding:12px;text-align:center;font-size:11px;font-weight:900}.track-action:hover{background:var(--yellow);color:#000}.tiny-note{font-size:11px;color:#89897e;line-height:1.8}.release-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.release-card{display:block;min-width:0}.release-cover{aspect-ratio:1;position:relative;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;background:linear-gradient(135deg,#242419,#090909 62%,#343419)}.release-cover:before{content:"";position:absolute;inset:-35%;border:1px solid #ffe50030;transform:rotate(28deg)}.release-cover:after{content:"";position:absolute;width:85%;aspect-ratio:1;border:28px solid #ffe50013;border-radius:48%;top:10%;right:-22%;transform:rotate(-22deg)}.release-cover img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;z-index:1}.cover-label{position:relative;z-index:2;font-size:10px;letter-spacing:2px;color:var(--yellow);font-weight:900;padding:22px}.cover-title{position:relative;z-index:2;font-family:Impact,"Arial Black",sans-serif;color:var(--yellow);font-size:clamp(32px,5vw,67px);overflow-wrap:anywhere;line-height:.98;padding:22px}.release-info{display:flex;justify-content:space-between;gap:10px;margin-top:14px}.release-info strong{font-size:15px}.release-info span{color:#888;font-size:11px}.release-card:hover .release-cover{outline:2px solid var(--yellow)}.section-about{display:grid;grid-template-columns:1fr 1fr;gap:50px;border-top:1px solid #292920;border-bottom:1px solid #292920}.about-copy{font-size:16px;line-height:2.1;color:#ccc}.about-copy p{margin-top:0}.about-meta{display:flex;flex-wrap:wrap;gap:11px;margin-top:24px}.about-meta span{padding:8px 10px;border:1px solid #44442e;color:var(--yellow);font-size:10px;font-weight:900}.connect-section>p:not(.kicker){max-width:560px;color:#bbb;line-height:1.8}.links{display:flex;flex-wrap:wrap;gap:12px;margin-top:35px}.links a{padding:17px 24px;border:1px solid #676748;font-size:12px;font-weight:900}.links a:hover{background:var(--yellow);color:#000}footer{padding:26px max(5vw,24px);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:10px;font-weight:900;color:#aaa;letter-spacing:1px}.loading{color:#aaa}@media(max-width:740px){.topbar{height:62px;padding:0 18px}.topbar nav{gap:10px}.topbar nav a{font-size:9px;letter-spacing:.3px}.topbar nav a:last-child{display:none}.brand{font-size:19px}.section-pad{padding:78px 20px}.hero{min-height:420px}.hero-label{margin-top:12px}.hero h1{font-size:clamp(48px,12vw,76px)}.hero-floor{font-size:8px}.section-heading{display:block}.section-heading p:last-child{margin:20px 0}.track{grid-template-columns:28px 1fr 82px;gap:8px}.track-release{display:none}.track-action{padding:11px 6px;font-size:9px}.release-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.cover-label{padding:12px}.cover-title{padding:12px;font-size:clamp(27px,7vw,54px)}.release-info{display:block}.release-info strong{display:block}.release-info span{display:block;margin-top:6px}.section-about{grid-template-columns:1fr;gap:20px}.hero-actions{flex-direction:column;align-items:stretch;min-width:min(300px,100%)}.hero-floor span{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn:hover{transform:none}}

/* Compact hero: keep the opening section closer to s-don.com in scale. */
.hero.section-pad{padding-top:60px;padding-bottom:46px}
.hero-actions{margin-top:20px}
@media(max-width:740px){.hero.section-pad{padding-top:46px;padding-bottom:35px}.hero-desc{font-size:12px;line-height:1.8}.hero-floor{margin-top:26px}}

/* Official compact presentation, optimized for cover-first browsing */
.hero h1.hero-single-line{font-size:clamp(36px,6vw,76px);line-height:1.03}
.hero{min-height:330px}.hero.section-pad{padding-top:45px;padding-bottom:35px}
.section-pad{padding-top:65px;padding-bottom:65px}.release-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}
.release-cover img~.cover-label,.release-cover img~.cover-title{display:none}
@media(max-width:740px){.hero{min-height:300px}.hero h1.hero-single-line{font-size:clamp(30px,8vw,50px)}.section-pad{padding-top:49px;padding-bottom:49px}.release-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}

/* HYVE 2026: stable designed hero + official title logo */
.topbar{gap:clamp(10px,2.2vw,30px)}
.brand{flex:0 0 auto;line-height:0}
.brand img{display:block;width:clamp(104px,12vw,160px);height:auto;max-height:52px;object-fit:contain}
.topbar nav{margin-left:auto}
.header-social{display:flex;align-items:center;gap:8px;flex-shrink:0}
.header-social a{width:27px;height:27px;border:1px solid #77775e;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--yellow);font-size:13px;font-weight:900;line-height:1}
.header-social a:hover{background:var(--yellow);color:#080808}
.hero h1{font-size:clamp(45px,7.4vw,104px);line-height:.92}

.release-groups{display:grid;gap:40px}
.release-group h3{font-size:15px;font-weight:900;letter-spacing:1.4px;color:var(--yellow);margin:0 0 17px;padding-bottom:10px;border-bottom:1px solid #444435}
.release-group h3 span{color:#f3f3ee}
.release-group[hidden]{display:none}
@media(max-width:900px){.topbar nav{gap:10px}.topbar nav a{font-size:10px;letter-spacing:.4px}}
@media(max-width:740px){.topbar{height:64px;gap:10px}.brand img{width:100px;max-height:43px}.topbar nav{gap:9px}.topbar nav a{font-size:9px}.topbar nav a:nth-child(3){display:none}.header-social{gap:4px}.header-social a{width:24px;height:24px;font-size:11px}.hero h1{font-size:clamp(42px,10vw,70px)}.release-groups{gap:28px}}
@media(max-width:390px){.topbar nav a:nth-child(2){display:none}.brand img{width:88px}}

/* 2026-10-18 refined editorial typography + hierarchy */
body{font-family:Inter,'Noto Sans JP','Helvetica Neue',Arial,sans-serif;font-feature-settings:'kern' 1}
.hero h1,.section-heading h2,.section-about h2,.connect-section h2,.release-group h3{font-family:'Barlow Condensed',Impact,'Arial Narrow',sans-serif;font-weight:900;font-stretch:condensed}
.hero h1{color:#f5f5f0;letter-spacing:.008em;line-height:1.01;font-size:clamp(43px,7.2vw,102px);overflow-wrap:normal}
.hero h1 span{color:#f5f5f0}.hero h1 em{color:var(--yellow);font-style:normal}
.hero-label{letter-spacing:.15em}
.connect-section h2{color:#f5f5f0;letter-spacing:.018em}
.connect-section h2 span{color:var(--yellow)}
.topbar{justify-content:flex-start;gap:0}
.brand{margin-right:clamp(14px,2vw,27px)}
.header-social{order:1;gap:9px;margin-right:auto;flex-shrink:1;min-width:0}
.topbar nav{order:2;margin-left:auto}
.header-social a{width:22px;height:22px;padding:2px;border:0;border-radius:0;color:var(--yellow);background:transparent;opacity:.95}
.header-social a:hover{background:transparent;color:#fff;opacity:1;transform:translateY(-1px)}
.header-social a svg{width:100%;height:100%;display:block;fill:currentColor}
.header-social a img{width:100%;height:100%;display:block;filter:brightness(0) saturate(100%) invert(87%) sepia(77%) saturate(2682%) hue-rotate(357deg) brightness(106%) contrast(102%)}
.links a{display:inline-flex;align-items:center;gap:11px;letter-spacing:.045em}
.links svg{width:19px;height:19px;fill:currentColor;flex:none}
.links a:hover svg{fill:currentColor}
.links a[aria-disabled='true']{opacity:.45;cursor:not-allowed}
@media(max-width:900px){.topbar nav a{font-size:9px}.header-social{gap:7px}.header-social a{width:20px;height:20px}}
@media(max-width:740px){.topbar{flex-wrap:wrap;height:auto;min-height:62px;padding-top:8px;padding-bottom:8px;row-gap:6px}.brand{margin-right:12px}.brand img{width:91px}.header-social{gap:7px}.header-social a{width:19px;height:19px}.topbar nav{width:100%;order:3;justify-content:flex-start;gap:20px}.topbar nav a:nth-child(3){display:inline}.hero h1{font-size:clamp(42px,10vw,69px);letter-spacing:.003em}}
@media(max-width:390px){.topbar nav a:nth-child(2){display:inline}.header-social{gap:6px}.header-social a{width:18px;height:18px}}

/* FINAL VERIFIED RULES: HYVE alone uses the brand yellow. */
.hero h1, .hero h1 span, .hero h1.hero-single-line {color:#f5f5f0;}
.hero h1 em, .hero h1.hero-single-line em {color:#ffe500; font-style:normal;}
.hero h1 {letter-spacing:.018em;line-height:1.04;}
.connect-section h2 {color:#f5f5f0;letter-spacing:.025em;}
.connect-section h2 span {color:#ffe500;}
/* Monochrome icons directly beside the HYVE logo. */
.topbar {justify-content:flex-start;}
.brand {margin-right:clamp(12px,2vw,25px);}
.header-social {order:1;gap:9px;margin-right:auto;align-items:center;}
.topbar nav {order:2;margin-left:auto;}
.header-social a {border:0;border-radius:0;background:none;color:#ffe500;}
.header-social a img,.links a img {display:block;width:100%;height:100%;filter:brightness(0) saturate(100%) invert(85%) sepia(97%) saturate(1164%) hue-rotate(359deg) brightness(103%) contrast(107%);}
.links a img {width:19px;height:19px;flex:0 0 19px;}
@media(max-width:740px){.hero h1{letter-spacing:.012em}.header-social{margin-right:auto;}}

/* Compact embedded playlist, consistent with existing dark/yellow HYVE styling */
.embedded-player{max-width:900px;margin:0 0 34px;border:1px solid #3d3d2c;background:#080808;padding:16px}
.player-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 12px;font-size:12px;letter-spacing:.08em}
.player-heading strong{color:#ffe500}
.player-heading a{font-size:10px;font-weight:800;color:#ddd;text-decoration:underline;text-underline-offset:3px}
.embedded-player iframe{width:100%;aspect-ratio:16/9;display:block;border:0;background:#000}
@media(max-width:740px){.embedded-player{padding:10px;margin-bottom:24px}.player-heading{font-size:11px}}

/* Native HTML5 audio player; compact, no third-party iframe. */
.native-player{max-width:900px;margin:0 0 28px;border:1px solid #494932;background:#0a0a0a;padding:22px}
.native-player .player-heading{color:#ffe500}.native-player .player-heading span{color:#aaa;font-size:10px}
.now-playing{display:flex;flex-wrap:wrap;align-items:baseline;gap:7px 15px;margin:18px 0}
.now-playing strong{font-size:clamp(17px,2.5vw,27px);font-family:Impact,'Arial Black',sans-serif;letter-spacing:.025em}
.now-playing>span:last-child{color:#aaa;font-size:12px}
.playing-tag{color:#ffe500;font-size:10px;font-weight:800;letter-spacing:.1em}
.native-player audio{display:block;width:100%;height:48px;accent-color:#ffe500;color-scheme:dark}
.native-player .tiny-note{margin-bottom:0}
.track-action.playable{background:#ffe500;color:#080808;cursor:pointer;border-radius:0}
/* Restore the agreed original heavy headline font, keeping the white/yellow distinction. */
.hero h1,.section-heading h2,.section-about h2,.connect-section h2,.release-group h3,.cover-title{font-family:Impact,'Arial Black',sans-serif!important;font-weight:900;letter-spacing:.018em}
.hero h1,.hero h1 span{color:#f5f5f0}.hero h1 em{color:#ffe500}.connect-section h2{color:#f5f5f0}.connect-section h2 span{color:#ffe500}
@media(max-width:740px){.native-player{padding:14px}.now-playing{gap:5px 12px}}


/* Inline track player: track divider is the seek bar. */
#hyveAudio{display:none}
.track{position:relative;padding-bottom:22px}
.track-progress{
  appearance:none;-webkit-appearance:none;
  position:absolute;left:0;bottom:-3px;width:100%;height:6px;
  margin:0;border:0;border-radius:0;cursor:pointer;
  background:linear-gradient(to right,var(--yellow) 0,var(--yellow) var(--progress,0%),#3b3b35 var(--progress,0%),#3b3b35 100%);
  opacity:.45;transition:opacity .15s;z-index:2;
}
.track-progress:disabled{cursor:default}
.track-progress::-webkit-slider-thumb{
  -webkit-appearance:none;width:10px;height:10px;border:0;border-radius:50%;background:var(--yellow);opacity:0
}
.track-progress::-moz-range-thumb{width:10px;height:10px;border:0;border-radius:50%;background:var(--yellow);opacity:0}
.track.is-active .track-progress,.track:hover .track-progress{opacity:1}
.track.is-active .track-progress::-webkit-slider-thumb,.track:hover .track-progress::-webkit-slider-thumb{opacity:1}
.track.is-active .track-progress::-moz-range-thumb,.track:hover .track-progress::-moz-range-thumb{opacity:1}
.track-action.inline-play{width:43px;height:43px;padding:0;border:1px solid var(--yellow);background:transparent;color:var(--yellow);font-size:15px;cursor:pointer;justify-self:end}
.track-action.inline-play:hover,.track.is-playing .track-action.inline-play{background:var(--yellow);color:#080808}
.track-progress:focus-visible,.inline-play:focus-visible{outline:2px solid white;outline-offset:4px}
@media(max-width:740px){.track{padding-bottom:18px}.track-action.inline-play{width:38px;height:38px}}

/* Left-side track-number controls (2026-10-18) */
.track{grid-template-columns:48px minmax(0,1fr) minmax(90px,.32fr);column-gap:14px}
.track-number-play,.track-number-link{
  border:0;background:none;color:var(--yellow);font:900 16px/1 Arial,sans-serif;
  min-width:42px;min-height:42px;padding:0;display:flex;align-items:center;justify-content:center;
  cursor:pointer;text-align:center;text-decoration:none;letter-spacing:.03em;
}
.track-number-play:hover,.track-number-play:focus-visible,.track-number-link:hover,.track-number-link:focus-visible{color:#fff}
.track-number-play:not([aria-pressed="true"]):hover{font-size:0}
.track-number-play:not([aria-pressed="true"]):hover::before{content:"▶";font-size:16px}
.track-number-link:hover{font-size:0}
.track-number-link:hover::before{content:"↗";font-size:20px}
.track-number-play:focus-visible,.track-number-link:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.track>.track-progress{grid-column:1/-1}
@media(max-width:740px){.track{grid-template-columns:42px minmax(0,1fr);gap:8px}.track-release{display:none}}

/* HYVE inline playback: permanent play symbol and linked release names */
.track-number-play:not([aria-pressed="true"]):hover,
.track-number-link:hover {font-size:16px}
.track-number-play:not([aria-pressed="true"]):hover::before,
.track-number-link:hover::before {content:none}
.track-number-play,.track-number-link{
  font-family:Arial,sans-serif;
  color:var(--yellow);
  font-size:17px;
  transition:color .16s ease;
}
.track-number-play[aria-pressed="true"] {color:var(--yellow)}
.track-release-link{display:inline-block;width:fit-content;text-decoration:none;line-height:1.5}
.track-release-link:hover,.track-release-link:focus-visible{color:var(--yellow);text-decoration:underline;text-underline-offset:3px}
@media(max-width:740px){
  .track{grid-template-columns:42px minmax(0,1fr);gap:8px}
  .track-release-link{display:block;grid-column:2;grid-row:2;margin-top:-6px;font-size:11px}
  .track>.track-progress{grid-column:1/-1}
}

/* Minimal HYVE playback controls: glyphs only, no framing. */
.track-number-play,
.track-number-link,
.track-number-play:hover,
.track-number-link:hover,
.track.is-playing .track-number-play {
  appearance: none;
  -webkit-appearance: none;
  border: 0 !important;
  outline: none;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0;
  color: var(--yellow);
  font: 700 18px/1 Arial,sans-serif;
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.track-number-play::before,
.track-number-link::before,
.track-number-play:hover::before,
.track-number-link:hover::before { content: none !important; }
.track-number-play:focus-visible,
.track-number-link:focus-visible { outline: 1px dashed var(--yellow) !important; outline-offset: 3px; }

/* Flat icon-only player (no glyph-enclosing circle or button frame). */
.track-number-play, .track-number-link,
.track-number-play:hover, .track-number-link:hover,
.track.is-playing .track-number-play {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--yellow) !important;
  font-size: 0 !important; /* Hide platform-dependent circled play glyph */
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.track-number-play::before, .track-number-link::before,
.track-number-play:hover::before, .track-number-link:hover::before {
  content: "" !important;
  display: block;
  width: 20px;
  height: 22px;
  background: var(--yellow);
  clip-path: polygon(5% 0, 100% 50%, 5% 100%);
  font-size: 0;
}
.track-number-play[aria-pressed="true"]::before,
.track-number-play[aria-pressed="true"]:hover::before {
  width: 20px;
  height: 22px;
  clip-path: polygon(0 0, 36% 0, 36% 100%, 0 100%, 0 0, 64% 0, 100% 0, 100% 100%, 64% 100%, 64% 0);
}
.track-number-play:focus-visible, .track-number-link:focus-visible {
  outline: 1px dashed var(--yellow) !important;
  outline-offset: 0;
}

/* Linked album title beside each track */
a.track-release-link {cursor:pointer;pointer-events:auto;color:var(--yellow);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:text-decoration-color .15s,color .15s}
a.track-release-link:hover,a.track-release-link:focus-visible{text-decoration-color:currentColor;color:#fff}
span.track-release-link{color:#999;cursor:default}