/* v15: clear routes from the portfolio to its projects and the person behind them. */
#af-black.fx-site.fx-hud .editorial-eyebrow{color:var(--af-accent);font-family:var(--fx-mono),'Noto Sans JP',sans-serif;font-size:11px;line-height:1.8;letter-spacing:.13em;margin:0 0 18px}
#af-black.fx-site.fx-hud .af-overview .af-music-heading>div:first-child{flex:1;min-width:0}
#af-black.fx-site.fx-hud .af-overview .af-music-heading>div:first-child>p{max-width:880px;font-size:14px;line-height:2.1;letter-spacing:.025em;text-wrap:pretty}
#af-black.fx-site.fx-hud .section-overview-link{display:inline-flex;margin-top:24px}
#af-black.fx-site.fx-hud .af-overview .af-listening-header{flex-wrap:wrap}
#af-black.fx-site.fx-hud .af-overview .af-listening-header>div:first-child{flex-basis:65%}
/* Two platform entrances replace the repeated thumbnail rows. */
#af-black.fx-site.fx-hud .channel-portals{position:relative;padding:90px 0 100px;border-top:1px solid #ffffff20}
#af-black.fx-site.fx-hud .channel-intro{margin-bottom:38px}
#af-black.fx-site.fx-hud .channel-intro h2{font-family:'Noto Sans JP',sans-serif;font-size:clamp(25px,2.8vw,40px);line-height:1.5;letter-spacing:.02em;margin:0 0 16px}
#af-black.fx-site.fx-hud .channel-intro>p:last-child{color:#aeb5ae;font-size:14px;line-height:1.9}
#af-black.fx-site.fx-hud .channel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
#af-black.fx-site.fx-hud .channel-portal{display:flex;flex-direction:column;min-width:0;padding:32px;border:1px solid #ffffff24;border-radius:16px;overflow:hidden;position:relative;scroll-margin-top:100px;transition:transform .25s,border-color .25s}
#af-black.fx-site.fx-hud .channel-portal:hover{transform:translateY(-5px);border-color:#ffffff70}
#af-black.fx-site.fx-hud .channel-portal:focus-visible{outline:3px solid var(--af-accent);outline-offset:5px}
#af-black.fx-site.fx-hud .channel-youtube{background:linear-gradient(155deg,#241215,#131315 53%,#0e0f11);color:#f6f5f1}
#af-black.fx-site.fx-hud .channel-brand{display:flex;align-items:center;gap:10px;margin-bottom:25px;font-family:Arial,sans-serif;font-size:30px;font-weight:700;letter-spacing:-1px}
#af-black.fx-site.fx-hud .channel-brand small{margin-left:auto;align-self:center;font-family:var(--fx-mono);font-size:10px;letter-spacing:.09em;font-weight:400;opacity:.6}
#af-black.fx-site.fx-hud .channel-yt-icon{display:flex;width:40px}
#af-black.fx-site.fx-hud .channel-yt-icon svg{display:block;width:100%;height:auto}
#af-black.fx-site.fx-hud .channel-video-preview{aspect-ratio:16/9;overflow:hidden;border-radius:8px;position:relative;background:#202024}
#af-black.fx-site.fx-hud .channel-video-preview img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s}
#af-black.fx-site.fx-hud .channel-portal:hover .channel-video-preview img{transform:scale(1.025)}
#af-black.fx-site.fx-hud .channel-play{display:grid;place-items:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:44px;background:#ff0033ee;color:white;border-radius:12px;font-size:18px;box-shadow:0 5px 28px #0008}
#af-black.fx-site.fx-hud .channel-copy{padding:25px 0 24px;flex:1}
#af-black.fx-site.fx-hud .channel-account{font-family:var(--fx-mono);font-size:10px;letter-spacing:.035em;opacity:.65}
#af-black.fx-site.fx-hud .channel-copy h3{font-family:'Noto Sans JP',sans-serif;font-size:clamp(18px,1.8vw,26px);line-height:1.55;letter-spacing:.005em;margin:13px 0 12px}
#af-black.fx-site.fx-hud .channel-copy p{font-size:13px;line-height:1.95;opacity:.75;max-width:440px;margin:0}
#af-black.fx-site.fx-hud .channel-link{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #ffffff25;padding-top:20px;font-size:13px;font-weight:700;gap:18px}
#af-black.fx-site.fx-hud .channel-link>span{display:grid;place-items:center;width:37px;height:37px;border:1px solid currentColor;border-radius:50%;font-size:19px;transition:transform .25s}
#af-black.fx-site.fx-hud .channel-portal:hover .channel-link>span{transform:rotate(45deg)}
#af-black.fx-site.fx-hud .channel-note{background:#f3f1e9;color:#202723;border-color:#e6e4dc}
#af-black.fx-site.fx-hud .note-wordmark{font-size:37px;line-height:1;font-weight:900;letter-spacing:-2px}
#af-black.fx-site.fx-hud .channel-note-cover{aspect-ratio:16/9;min-height:230px;border-top:1px solid #23382c30;border-bottom:1px solid #23382c30;display:flex;flex-direction:column;justify-content:center;position:relative;padding:23px 28px;background:linear-gradient(110deg,#e7eadf,#f5f3eb);overflow:hidden}
#af-black.fx-site.fx-hud .note-cover-label{font-size:10px;letter-spacing:.16em;margin-bottom:15px;color:#607468}
#af-black.fx-site.fx-hud .note-cover-title{font-family:'Noto Sans JP',sans-serif;font-size:clamp(22px,2.2vw,35px);line-height:1.6;letter-spacing:.02em;font-weight:700}
#af-black.fx-site.fx-hud .note-cover-title em{font-style:normal;color:#447e68;font-size:.75em}
#af-black.fx-site.fx-hud .note-cover-sign{display:flex;justify-content:space-between;margin-top:18px;font-family:var(--fx-mono);font-size:10px;letter-spacing:.1em}
#af-black.fx-site.fx-hud .channel-note .channel-link{border-color:#23382c30}
/* Works: broad images paired with complete project introductions. */
#af-black.fx-site.fx-hud .works-main{position:relative;padding-top:150px}
#af-black.fx-site.fx-hud .works-wrap{max-width:1580px}
#af-black.fx-site.fx-hud .works-intro{padding:30px 0 0}
#af-black.fx-site.fx-hud .works-intro h1{font-family:var(--fx-display);font-size:clamp(78px,12vw,170px);font-weight:700;line-height:.95;letter-spacing:-.07em;margin:0 0 38px}
#af-black.fx-site.fx-hud .works-intro h1>span{color:var(--af-accent)}
#af-black.fx-site.fx-hud .works-intro-bottom{display:grid;grid-template-columns:.8fr 1.2fr;gap:7%;align-items:start}
#af-black.fx-site.fx-hud .works-intro-bottom h2{font-size:clamp(24px,2.4vw,34px);line-height:1.6;margin:0;font-weight:700;letter-spacing:.02em}
#af-black.fx-site.fx-hud .works-intro-bottom>p{font-size:14px;line-height:2.1;color:#b8c0b5;margin:0}
#af-black.fx-site.fx-hud .works-jump{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:48px;border-top:1px solid #ffffff25}
#af-black.fx-site.fx-hud .works-jump a{display:flex;justify-content:space-between;gap:10px;padding:22px 0;font-family:var(--fx-mono);font-size:11px;letter-spacing:.02em;border-bottom:1px solid #ffffff25}
#af-black.fx-site.fx-hud .works-jump a:hover{color:var(--af-accent)}
#af-black.fx-site.fx-hud .work-feature{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);align-items:center;gap:clamp(30px,5vw,80px);padding-block:95px;border-bottom:1px solid #ffffff1c;scroll-margin-top:85px;position:relative}
#af-black.fx-site.fx-hud .work-feature-visual{min-width:0;align-self:start;position:sticky;top:120px;margin-top:8px}
#af-black.fx-site.fx-hud .work-feature-visual>a{display:block;position:relative;overflow:hidden;border:1px solid #ffffff20;border-radius:12px;background:#111}
#af-black.fx-site.fx-hud .work-feature-visual img:not(.work-vv-logo){display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform .6s}
#af-black.fx-site.fx-hud .work-feature-visual a:hover img:not(.work-vv-logo){transform:scale(1.025)}
#af-black.fx-site.fx-hud .work-image-label{position:absolute;bottom:0;left:0;right:0;padding:44px 22px 18px;background:linear-gradient(transparent,#000b);color:#fff;font-family:var(--fx-mono);font-size:10px;letter-spacing:.09em}
#af-black.fx-site.fx-hud .work-feature-copy{min-width:0}
#af-black.fx-site.fx-hud .work-feature-copy h2{font-family:var(--fx-display);font-size:clamp(32px,3.3vw,50px);letter-spacing:-.025em;line-height:1.15;margin:0 0 23px}
#af-black.fx-site.fx-hud .work-feature-copy .work-lead{font-size:19px;font-weight:700;color:#f1f4ec;line-height:1.7;margin:0 0 20px}
#af-black.fx-site.fx-hud .work-feature-copy>p:not(.work-lead):not(.editorial-eyebrow){font-size:14px;line-height:2.05;color:#b6beb2;margin:0 0 18px}
#af-black.fx-site.fx-hud .work-fields{display:flex;flex-wrap:wrap;gap:9px;list-style:none;padding:0;margin:25px 0}
#af-black.fx-site.fx-hud .work-fields li{border:1px solid #ffffff22;border-radius:4px;padding:5px 10px;font-size:10px;color:#bec6b9}
#af-black.fx-site.fx-hud .work-feature .af-action{display:inline-flex;max-width:100%;font-size:12px}
#af-black.fx-site.fx-hud .work-sound .editorial-eyebrow{color:#b9b1ff}
#af-black.fx-site.fx-hud .work-forest .editorial-eyebrow{color:#bdcb9e}
#af-black.fx-site.fx-hud .work-forest .work-feature-visual img:not(.work-vv-logo){aspect-ratio:16/9;object-position:50% 50%}
#af-black.fx-site.fx-hud .work-vv-logo{position:absolute;width:24%;max-width:170px;height:auto;bottom:12px;right:12px;left:auto;filter:drop-shadow(0 3px 8px #000);pointer-events:none}
#af-black.fx-site.fx-hud .works-further{padding:72px 0 95px;max-width:780px}
#af-black.fx-site.fx-hud .works-further h2{font-size:28px;line-height:1.6;margin:0 0 20px}
#af-black.fx-site.fx-hud .works-further>p:not(.editorial-eyebrow){font-size:14px;line-height:2;color:#b6beb2}
#af-black.fx-site.fx-hud .works-further>div{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
/* About: a readable, continuous personal essay instead of project blocks. */
#af-black.fx-site.fx-hud .creator-story-main{position:relative;padding-top:145px}
#af-black.fx-site.fx-hud .creator-story-wrap{max-width:1200px}
#af-black.fx-site.fx-hud .creator-story-header{padding:25px 0 60px;border-bottom:1px solid #ffffff28}
#af-black.fx-site.fx-hud .creator-story-header h1{font-family:'Noto Sans JP',sans-serif;font-size:clamp(34px,4.8vw,66px);line-height:1.5;letter-spacing:.01em;margin:25px 0 26px;font-weight:700}
#af-black.fx-site.fx-hud .creator-story-deck{font-size:15px;line-height:2.1;color:#bcc3b7;max-width:850px}
#af-black.fx-site.fx-hud .creator-story-sign{display:flex;align-items:center;gap:12px;margin-top:32px}
#af-black.fx-site.fx-hud .creator-story-sign>span:first-child{font-size:28px;color:var(--af-accent)}
#af-black.fx-site.fx-hud .creator-story-sign>b{font-size:16px;font-family:var(--fx-display);letter-spacing:.015em}
#af-black.fx-site.fx-hud .creator-story-sign>span:last-child{font-family:var(--fx-mono);font-size:9px;letter-spacing:.07em;color:#949f8f;margin-left:8px}
#af-black.fx-site.fx-hud .creator-essay{max-width:780px;margin:0 auto;padding-top:60px}
#af-black.fx-site.fx-hud .creator-essay>section{padding:0 0 38px;scroll-margin-top:110px}
#af-black.fx-site.fx-hud .creator-essay h2{font-family:'Noto Sans JP',sans-serif;font-size:clamp(22px,2vw,29px);line-height:1.65;letter-spacing:.015em;font-weight:700;margin:0 0 24px;color:#f1f3ed;text-wrap:pretty}
#af-black.fx-site.fx-hud .creator-essay>section>p{font-size:15px;line-height:2.35;letter-spacing:.035em;color:#bac2b5;margin:0 0 24px;overflow-wrap:anywhere}
#af-black.fx-site.fx-hud .creator-essay-end{padding:4px 0 45px;border-bottom:1px solid #ffffff20}
#af-black.fx-site.fx-hud .creator-essay-end>p{font-family:var(--fx-display);font-size:30px;font-weight:600;letter-spacing:.015em;margin-bottom:20px}
#af-black.fx-site.fx-hud .creator-essay-end small{display:block;font-size:10px;line-height:1.9;color:#7f8a79;margin-top:15px}
#af-black.fx-site.fx-hud .creator-next{padding:42px 0 12px}
#af-black.fx-site.fx-hud .creator-next h2{font-size:23px;margin:13px 0 23px}
#af-black.fx-site.fx-hud .creator-next .af-action{display:inline-flex}
#af-black.fx-site.fx-hud .creator-story-wrap .profile-follow{padding-top:64px}
@media(min-width:761px){
/* Match the quieter SOCIAL MEDIA scale across the homepage section titles. */
#af-black.fx-site.fx-hud .af-overview .af-music-heading h2{font-size:clamp(36px,4.5vw,64px);font-stretch:100%;line-height:1.1;letter-spacing:-.035em}
/* Reverse the middle project only on desktop; all three images retain 16:9. */
#af-black.fx-site.fx-hud .work-sound{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr)}
#af-black.fx-site.fx-hud .work-sound>.work-feature-visual{grid-column:2;grid-row:1}
#af-black.fx-site.fx-hud .work-sound>.work-feature-copy{grid-column:1;grid-row:1}
}
@media(max-width:1000px){
#af-black.fx-site.fx-hud .channel-portal{padding:24px}
#af-black.fx-site.fx-hud .channel-grid{gap:20px}
#af-black.fx-site.fx-hud .channel-note-cover{padding:16px 20px}
#af-black.fx-site.fx-hud .note-cover-label{margin-bottom:8px}
#af-black.fx-site.fx-hud .note-cover-sign{margin-top:8px}
#af-black.fx-site.fx-hud .work-feature{gap:32px}
#af-black.fx-site.fx-hud .work-feature-visual img:not(.work-vv-logo){aspect-ratio:16/9}
#af-black.fx-site.fx-hud .works-intro-bottom{grid-template-columns:1fr;gap:20px}
}
@media(max-width:760px){
#af-black.fx-site.fx-hud .af-overview .af-music-heading>div:first-child>p{font-size:13px;line-height:2}
#af-black.fx-site.fx-hud .channel-portals{padding:60px 0}
#af-black.fx-site.fx-hud .channel-grid{grid-template-columns:1fr;gap:22px}
#af-black.fx-site.fx-hud .channel-portal{padding:24px}
#af-black.fx-site.fx-hud .channel-copy h3{font-size:23px}
#af-black.fx-site.fx-hud .note-cover-title{font-size:clamp(25px,5vw,38px)}
#af-black.fx-site.fx-hud .channel-note-cover{padding:22px 26px}
#af-black.fx-site.fx-hud .work-feature{grid-template-columns:1fr;gap:28px;padding-block:55px;scroll-margin-top:80px}
#af-black.fx-site.fx-hud .work-feature-visual{position:relative;top:auto;margin:0}
#af-black.fx-site.fx-hud .work-feature-visual img:not(.work-vv-logo),#af-black.fx-site.fx-hud .work-forest .work-feature-visual img:not(.work-vv-logo){aspect-ratio:16/9}
#af-black.fx-site.fx-hud .work-feature-copy h2{font-size:34px}
#af-black.fx-site.fx-hud .work-vv-logo{width:24%;bottom:8px;right:8px}
#af-black.fx-site.fx-hud .works-main,#af-black.fx-site.fx-hud .creator-story-main{padding-top:100px}
#af-black.fx-site.fx-hud .works-jump{grid-template-columns:1fr;gap:0;margin-top:32px}
#af-black.fx-site.fx-hud .works-jump a{padding:18px 0}
#af-black.fx-site.fx-hud .works-further{padding:48px 0 60px}
#af-black.fx-site.fx-hud .creator-story-header{padding-bottom:35px}
#af-black.fx-site.fx-hud .creator-story-deck{font-size:14px}
#af-black.fx-site.fx-hud .desktop-break{display:none}
#af-black.fx-site.fx-hud .creator-essay{padding-top:40px}
#af-black.fx-site.fx-hud .creator-essay>section{padding-bottom:23px}
#af-black.fx-site.fx-hud .creator-essay>section>p{font-size:14px;line-height:2.2}
#af-black.fx-site.fx-hud .creator-next h2{font-size:21px}
}
@media(prefers-reduced-motion:reduce){#af-black.fx-site.fx-hud :is(.channel-portal,.channel-video-preview img,.channel-link>span,.work-feature-visual img){transition:none}}