/* azul rex music / Phase 1 第4稿. Shared by static preview and WordPress. */
:root{
 --page:#ffffff;--paper:#fbfbfa;--cool:#f3f8fb;--soft:#f7f9fb;
 --text:#182731;--muted:#526370;--line:#d8e0e7;--accent:#126b9f;--blue:#145a92;
 --gutter:32px;--content-width:1120px;--rail:208px;--layout-gap:40px;--card-gap:24px;
 --sans:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--page);color:var(--text);font:17px/1.8 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{cursor:default}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:400}
ul{padding:0;list-style:none;margin:0}
button,a{-webkit-tap-highlight-color:transparent}
a,button{transition:color .22s ease,border-color .22s ease,background-color .22s ease}
:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
::selection{background:#d4eaf6;color:#133c59}
.wrap{width:calc(100% - var(--gutter)*2);max-width:var(--content-width);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.eyebrow,.section-kicker{font-size:13px;letter-spacing:.12em;line-height:1.6;color:var(--muted)}
.muted{color:var(--muted)}
.arrow{display:inline-block;font-size:22px;font-weight:300;line-height:1;flex-shrink:0}
.text-link{display:inline-flex;align-items:center;gap:18px;min-height:44px;font-size:15px;letter-spacing:.035em;border-bottom:1px solid #a4b6c4;padding:7px 0}
.text-link:hover{color:var(--accent);border-color:var(--accent)}
.skip-link{position:fixed;top:-100px;left:20px;z-index:100;background:white;color:var(--text);padding:12px}
.skip-link:focus{top:15px}
/* Official PNGs are unmodified. Only fully transparent outer margins leave the frame. */
.logo-window{position:relative;display:block;width:100%;overflow:hidden;flex-shrink:0}
.logo-window img.official-logo{position:absolute;max-width:none;height:auto;object-fit:contain;filter:none;mix-blend-mode:normal}
.logo-pending{display:flex;align-items:center;justify-content:center;min-height:60px;width:100%;border:1px dashed var(--line);color:var(--muted);font-size:16px;line-height:1.8}
.site-header{height:84px;position:relative;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:28px;padding-inline:max(var(--gutter),calc((100% - var(--content-width))/2));background:var(--page);border-bottom:1px solid #edf1f4}
.brand{display:inline-flex;align-items:center;flex-shrink:0;min-height:44px}
.brand--header{width:194px}
.brand--footer{width:176px}
.desktop-nav{display:flex;align-items:center;gap:21px}
.desktop-nav a{display:flex;align-items:center;min-height:44px;font-size:16px;letter-spacing:.015em;white-space:nowrap}
.desktop-nav a:hover,.desktop-nav a[aria-current=page]{color:var(--accent)}
.desktop-nav .contact-nav{border-bottom:1px solid #9bbdd3}
.menu-toggle{display:none;align-items:center;gap:12px;min-width:80px;height:44px;background:none;border:0;font-size:16px;letter-spacing:.04em}
.menu-icon{width:22px;height:10px;border-block:1px solid currentColor}
/* A restrained logo with room for a future locally approved video. */
.hero{height:368px;position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;background:var(--soft)}
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-art{position:absolute;inset:0;background:#f8fafc url('hero-study.svg') no-repeat 50% 50%/cover}
.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-inner{display:flex;justify-content:center;align-items:center;padding-bottom:8px}
.hero h1.hero-brand{width:min(420px,72%);margin:0;line-height:1;font-size:inherit;letter-spacing:normal;font-weight:inherit}
.hero-logo{display:block;width:100%;height:auto}
.hero-brand .logo-pending{min-height:160px}
.hero-bottom{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:flex-end}
.scroll-link{display:flex;align-items:center;gap:16px;font-size:11px;letter-spacing:.12em;min-height:44px;color:var(--muted)}
.scroll-link:after{content:"";height:25px;width:1px;background:var(--accent)}
/* Shared grid: a title rail and three equally sized image columns. */
.section{padding-block:64px}
.section-layout{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:var(--layout-gap);align-items:start}
.section-heading{min-width:0}
.section-heading>.text-link{margin-top:24px;margin-left:25px}
/* Original section typography: small index, blue word, two offset musical staff-like strokes.
   These strokes belong to headings only and never replace or alter the official logo. */
.section-title{display:grid;grid-template-columns:16px minmax(0,1fr);column-gap:9px;row-gap:13px;align-items:start;color:var(--accent);line-height:1.15;font-size:30px;font-weight:400;letter-spacing:.015em}
.title-index{font-size:11px;line-height:1.4;letter-spacing:.02em;margin-top:5px;font-variant-numeric:tabular-nums}
.title-word{display:block;white-space:nowrap}
.title-suffix{display:block;font-size:15px;letter-spacing:.09em;line-height:1.4;margin-top:5px}
.title-lines{grid-column:2;display:block;width:88px;height:8px;position:relative}
.title-lines:before,.title-lines:after{content:"";position:absolute;height:1px;transition:width .55s ease,transform .55s ease}
.title-lines:before{left:0;top:0;width:64px;background:var(--accent)}
.title-lines:after{left:24px;top:7px;width:64px;background:#a9d4e9}
.section-label{font-size:15px;line-height:1.6;color:var(--muted);margin:13px 0 0 25px}
/* Three verified dates and titles. No inner scroll area on the TOP. */
.news-section{background:var(--page)}
.news{padding-block:44px 48px;border-bottom:1px solid #e6edf2}
.news-list{min-width:0}
.news-row{display:grid;grid-template-columns:102px minmax(0,1fr) 20px;gap:22px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line);min-height:78px}
.news-row:first-child{padding-top:6px;min-height:64px}
.news-row:last-child{border-bottom:0;padding-bottom:6px;min-height:64px}
.news-row time{font-size:16px;font-variant-numeric:tabular-nums;letter-spacing:.01em;color:var(--muted)}
.news-row h3{font-size:19px;line-height:1.65}
.news-row:hover h3,.news-row:hover .arrow{color:var(--accent)}
.news-category{font-size:14px;letter-spacing:.03em;color:var(--muted)}
.news-row--categorized{grid-template-columns:106px 90px minmax(0,1fr) 20px}
.archive-note{font-size:15px;color:var(--muted);line-height:1.8;margin-bottom:12px}
.artists-section{background:var(--page)}
.artist-grid,.works-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--card-gap)}
.artist-card{display:block;min-width:0}
.artist-image{aspect-ratio:5/6;overflow:hidden;background:#edf0f3;position:relative}
.artist-image img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
.artist-caption{min-width:0;margin-top:14px}
.artist-card h3{font-size:23px;letter-spacing:.015em;line-height:1.45;overflow-wrap:anywhere}
.artist-card .artist-en{font-size:14px;letter-spacing:.04em;line-height:1.55;color:var(--muted);margin-top:5px}
.artist-card:hover h3{color:var(--accent)}
.works-section{background:var(--cool)}
.work-card{min-width:0}
.work-link,.work-pending{display:block}
.work-cover{aspect-ratio:1;background:#e5ebf1;position:relative;overflow:hidden;transition:box-shadow .35s ease}
.work-cover img{width:100%;height:100%;object-fit:contain}
.work-caption{margin-top:14px;min-width:0}
.work-card h3{font-size:23px;letter-spacing:.005em;line-height:1.45;overflow-wrap:anywhere}
.work-card p{font-size:16px;color:var(--muted);margin-top:5px;line-height:1.6}
.work-link:hover h3{color:var(--accent)}
.work-cover.pending{display:flex;align-items:center;justify-content:center;flex-direction:column;border:1px solid #d6e2ea;background:#edf3f7}
.work-cover.pending>span{font-size:27px;font-weight:300;letter-spacing:.12em}
.work-cover.pending small{position:absolute;bottom:16px;font-size:14px;letter-spacing:.02em;color:var(--muted)}
.pending-text{color:var(--muted)}
.store-section{background:var(--paper)}
.store-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--card-gap)}
.product{min-width:0}
.product-visual{aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:#eef1f3;border:1px solid #e1e5e8}
.product-visual span{font-size:15px;color:var(--muted)}
.product h3{font-size:20px;line-height:1.6;margin-top:13px}
.about{background:linear-gradient(110deg,#f7fafd,#f0f6fa)}
.about-brand{font-size:30px;font-weight:300;letter-spacing:-.015em;line-height:1.3;margin-bottom:16px}
.about-content p{font-size:18px;line-height:1.85;overflow-wrap:anywhere}
.about-content p+p{font-size:17px;color:var(--muted);margin-top:4px}
.about-links{margin-top:19px}
.site-footer{background:var(--page)}
.contact-section{padding-block:38px;border-bottom:1px solid #e6edf2}
.contact-section .section-layout{align-items:center}
.contact-link{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:60px;padding:10px 0;font-size:23px}
.contact-link>.arrow{color:var(--accent);font-size:28px}
.contact-link:hover{color:var(--accent)}
.footer-base{padding-block:34px 18px}
.footer-grid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:52px;align-items:center}
.footer-company{font-size:15px;color:var(--muted);line-height:1.8;margin-top:14px}
.footer-links{display:flex;flex-wrap:wrap;gap:0 24px;align-items:center}
.footer-links a,.footer-social a{font-size:15px;letter-spacing:.01em;min-height:44px;display:inline-flex;align-items:center;gap:8px}
.footer-links a:hover,.footer-social a:hover{color:var(--accent)}
.footer-social{display:flex;flex-wrap:wrap;gap:24px;margin-top:10px}
.footer-social .arrow{font-size:16px}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:24px;padding-top:12px;border-top:1px solid var(--line);font-size:14px;line-height:1.8;color:var(--muted)}
.footer-bottom a{display:inline-flex;align-items:center;min-height:44px}
.mobile-dialog{border:0;margin:0 0 0 auto;width:min(420px,100%);max-width:100%;height:100dvh;max-height:100%;padding:24px;background:var(--page);color:var(--text)}
.mobile-dialog::backdrop{background:#24364255;backdrop-filter:blur(7px)}
.dialog-close{background:none;border:1px solid var(--line);height:44px;min-width:44px;padding-inline:14px;float:right;font-size:16px}
.mobile-dialog nav{clear:both;display:flex;flex-direction:column;padding-top:22px}
.mobile-dialog nav a{font-size:21px;line-height:1.5;padding:12px 0;border-bottom:1px solid var(--line)}
.mobile-dialog nav a[aria-current=page]{color:var(--accent)}
body.dialog-open{overflow:hidden}
/* Shared lower pages retain their content and remain a separate next-phase scope. */
.page-main{min-height:65svh;padding-block:48px 72px}
.breadcrumb{display:flex;flex-wrap:wrap;gap:18px;font-size:15px;letter-spacing:.03em;color:var(--muted);margin-bottom:36px}
.page-header{margin-bottom:36px}
.page-header h1{font-size:clamp(34px,4vw,52px);font-weight:300;letter-spacing:-.025em;line-height:1.3;overflow-wrap:anywhere}
.page-header p{font-size:18px;color:var(--muted);line-height:1.85;margin-top:14px}
.page-note{padding:23px;background:var(--soft);border:1px solid var(--line);font-size:17px;color:var(--muted);line-height:1.9;margin:30px 0}
.roster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px var(--card-gap)}
.roster .artist-image{aspect-ratio:4/3}
.profile{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:start}
.profile>img{width:100%;max-height:660px;object-fit:cover}
.profile .division{font-size:16px;color:var(--muted)}
.profile p{font-size:18px;margin-block:22px}
.profile dl,.company-details{margin:25px 0}
.profile dl>div,.company-details>div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:20px;padding:16px 0;border-bottom:1px solid var(--line);font-size:17px}
.profile dt,.company-details dt{color:var(--muted)}
dd{margin:0}
.profile h2,.article h2{font-size:25px;margin:35px 0 18px}
.profile-links{display:flex;flex-wrap:wrap;gap:20px}
.article{max-width:800px}
.article p{margin-block:20px}
.page-main>.works-grid{margin-top:36px}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .artist-card:hover img{transform:scale(1.018)}
 .work-link:hover .work-cover{box-shadow:0 6px 20px #36556e14}
 .section-layout:hover .title-lines:before{width:76px}
 .section-layout:hover .title-lines:after{transform:translateX(5px)}
}
@media(max-width:1100px){
 .desktop-nav{display:none}.menu-toggle{display:flex}
 .site-header{height:76px}.brand--header{width:188px}
 :root{--rail:180px;--layout-gap:28px;--card-gap:20px}
 .section-title{font-size:27px}
 .footer-grid{grid-template-columns:270px minmax(0,1fr);gap:32px}
}
@media(max-width:900px){
 :root{--card-gap:20px}
 .section{padding-block:48px}
 .section-layout{grid-template-columns:minmax(0,1fr);gap:26px}
 .section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}
 .section-heading>.text-link{margin:0}
 .section-title{font-size:29px}
 .title-word{display:flex;align-items:baseline;gap:9px}
 .title-suffix{margin:0;font-size:16px}
 .section-label{font-size:15px;margin-top:10px}
 .hero{height:320px}.hero h1.hero-brand{width:360px}
 .news{padding-block:36px}
 .news-row h3{font-size:19px}
 .artist-card h3{font-size:22px}
 .artist-card .artist-en{font-size:14px;letter-spacing:.01em}
 .work-card h3{font-size:22px}
 .work-card p{font-size:16px}
 .footer-grid{grid-template-columns:1fr;gap:24px}
 .footer-identity{display:flex;align-items:center;gap:30px}
 .footer-company{margin-top:0}
 .footer-social{margin-top:8px}
 .contact-section .section-layout{grid-template-columns:208px minmax(0,1fr)}
 .contact-link{font-size:22px}
 .roster{grid-template-columns:repeat(2,minmax(0,1fr))}
 .profile{gap:28px}
}
@media(max-width:600px){
 :root{--gutter:20px;--card-gap:16px}
 body{font-size:17px;line-height:1.8}
 .site-header{height:68px;gap:18px}.brand--header{width:164px}.brand--footer{width:142px}
 .menu-toggle{font-size:15px;gap:10px;min-width:76px;padding:0}
 .hero{height:256px}.hero-inner{padding-bottom:4px}.hero h1.hero-brand{width:min(268px,88%)}
 .hero-bottom{bottom:7px}.scroll-link{font-size:10px;gap:12px}.scroll-link:after{height:19px}
 .section{padding-block:36px}
 .section-layout{gap:24px}
 .section-title{font-size:25px;grid-template-columns:13px minmax(0,1fr);column-gap:7px;row-gap:10px}
 .title-index{font-size:10px;margin-top:4px}
 .title-suffix{font-size:13px;letter-spacing:.045em}
 .title-word{gap:5px}
 .title-lines{height:6px;width:73px}.title-lines:before{width:52px}.title-lines:after{width:52px;left:21px;top:5px}
 .section-label{font-size:14px;margin:9px 0 0 20px}
 .section-heading{gap:12px}
 .section-heading>.text-link{font-size:14px;gap:8px;flex-shrink:0}
 .section-heading .arrow{font-size:19px}
 .news{padding-block:30px;gap:20px}
 .news-row{grid-template-columns:minmax(0,1fr) 18px;gap:6px 12px;padding-block:16px;min-height:0}
 .news-row:first-child{padding-top:0;min-height:0}.news-row:last-child{padding-bottom:0;min-height:0}
 .news-row time{grid-column:1;grid-row:1;font-size:15px}
 .news-row h3{grid-column:1;grid-row:2;font-size:18px;line-height:1.65}
 .news-row .arrow{grid-column:2;grid-row:1/3;font-size:20px}
 .news-row--categorized{grid-template-columns:100px minmax(0,1fr) 18px}
 .news-row--categorized .news-category{grid-column:2;grid-row:1;font-size:13px}
 .news-row--categorized h3{grid-column:1/3}.news-row--categorized .arrow{grid-column:3}
 /* Mobile lists keep the image beside its title: no oversized single-column posters. */
 .artist-grid,.works-grid{grid-template-columns:minmax(0,1fr);gap:18px}
 .artist-grid .artist-card{display:grid;grid-template-columns:112px minmax(0,1fr);gap:18px;align-items:center}
 .artist-grid .artist-caption{margin:0}
 .artist-card h3{font-size:21px;letter-spacing:0}
 .artist-card .artist-en{font-size:14px;letter-spacing:.005em;margin-top:6px}
 .artist-grid .artist-card+.artist-card{border-top:1px solid #e7edf1;padding-top:18px}
 .work-link,.work-pending{display:grid;grid-template-columns:112px minmax(0,1fr);gap:18px;align-items:center}
 .work-caption{margin:0}.work-card h3{font-size:22px}.work-card p{font-size:16px;line-height:1.65;margin-top:6px}
 .work-cover.pending>span{font-size:21px;letter-spacing:.08em}
 .work-cover.pending small{font-size:12px;bottom:10px;letter-spacing:0}
 .work-card+.work-card{border-top:1px solid #dce7ee;padding-top:18px}
 .store-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
 .product h3{font-size:18px;margin-top:10px}.product-visual span{font-size:14px}
 .about-brand{font-size:27px;margin-bottom:12px}
 .about-content p{font-size:17px;line-height:1.8}.about-content p+p{font-size:16px;margin-top:6px}
 .about-links{margin-top:16px}
 .contact-section{padding-block:28px}
 .contact-section .section-layout{grid-template-columns:minmax(0,1fr);gap:10px}
 .contact-link{font-size:21px;min-height:48px;padding:4px 0 0 20px}
 .contact-link>.arrow{font-size:25px}
 .footer-base{padding-block:26px 16px}
 .footer-grid{gap:18px}.footer-identity{display:block}.footer-company{font-size:15px;margin-top:12px;line-height:1.8}
 .footer-links{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
 .footer-links a,.footer-social a{font-size:15px;letter-spacing:0;min-height:44px}
 .footer-social{gap:24px;margin-top:10px}
 .footer-bottom{margin-top:18px;padding-top:12px;font-size:13px;flex-wrap:wrap;gap:0 20px}
 .footer-bottom a{font-size:13px}
 .page-main{padding-block:32px 48px}.breadcrumb{font-size:14px;margin-bottom:26px;gap:14px}
 .page-header h1{font-size:34px}.page-header p{font-size:17px}.page-note{font-size:16px;padding:18px}
 .roster{grid-template-columns:minmax(0,1fr)}.roster .artist-card h3{font-size:24px}
 .profile{grid-template-columns:minmax(0,1fr);gap:24px}.profile>img{max-height:550px}
 .profile dl>div,.company-details>div{grid-template-columns:80px minmax(0,1fr);font-size:16px}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}
 .hero-media video{display:none}
}